/* ═══════════════════════════════════════════════════════
   EVOQIA DESIGN SYSTEM — COMPONENTS
   v1.0 · Componentes reutilizables
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   CARDS — Dark Mode con borde superior de color
   ══════════════════════════════════════════════════════ */

/* Card base - estilo dark mode */
.card {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-subtle);
  border-radius: var(--ev-radius-lg);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--ev-duration-normal) var(--ev-ease-default),
    box-shadow var(--ev-duration-normal) var(--ev-ease-default),
    border-color var(--ev-duration-normal) var(--ev-ease-default);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
  border-color: var(--ev-border-default);
}

/* Card Header con borde superior de color (versión moderna) */
.card-header-primary {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-brand-primary), transparent);
}

.card-header-primary h5,
.card-header-primary h6 {
  color: var(--ev-text-primary);
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Card Headers con colores semánticos */
.card-header-success {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-success::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-success), transparent);
}

.card-header-warning {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-warning::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-warning), transparent);
}

.card-header-danger {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-danger::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-danger), transparent);
}

.card-header-info {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-info), transparent);
}

/* Card Headers para canales específicos */
.card-header-ml {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-ml::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-channel-ml), transparent);
}

.card-header-tn {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-tn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-channel-tn), transparent);
}

.card-header-pv {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-pv::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-channel-pv), transparent);
}

.card-header-web {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-web::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-channel-web), transparent);
}

.card-header-fq {
  position: relative;
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border-subtle);
  padding: 1rem 1.25rem;
}

.card-header-fq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-channel-fq), transparent);
}

/* Card Body - dark mode */
.card-body {
  background: var(--ev-bg-surface);
  color: var(--ev-text-primary);
  padding: 1.25rem;
}

/* Card Footer - dark mode */
.card-footer {
  background: var(--ev-bg-raised);
  border-top: 1px solid var(--ev-border-subtle);
  color: var(--ev-text-secondary);
  padding: 0.75rem 1.25rem;
}

/* Card con borde primario (legacy) */
.card-border-primary {
  border-top: 3px solid var(--ev-brand-primary);
}

/* Card Stats (para dashboards) */
.card-stats {
  border-left: 4px solid var(--ev-brand-primary);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.card-stats:hover {
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}

.card-stats-success {
  border-left-color: var(--ev-success);
}

.card-stats-warning {
  border-left-color: var(--ev-warning);
}

.card-stats-danger {
  border-left-color: var(--ev-danger);
}

.card-stats-info {
  border-left-color: var(--ev-info);
}

/* Card con icono y número grande */
.card-icon-number {
  display: flex;
  align-items: center;
  gap: var(--ev-space-4);
}

.card-icon-number .icon {
  font-size: 2.5rem;
  opacity: 0.8;
}

.card-icon-number .number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.card-icon-number .label {
  font-size: 0.875rem;
  color: var(--ev-text-secondary);
  margin-top: var(--ev-space-1);
}

/* ══════════════════════════════════════════════════════
   MODALS — Sistema Completo Dark/Light Mode
   ══════════════════════════════════════════════════════ */

/* ── Bootstrap Modal Base Override ── */
/* Backdrop (fondo oscuro detrás del modal) */
.modal-backdrop {
  background-color: var(--ev-modal-backdrop);
  opacity: 1;
}

.modal-backdrop.show {
  opacity: 1;
}

/* Modal Dialog */
.modal-dialog {
  pointer-events: all;
}

/* Modal Content - Contenedor principal del modal */
.modal-content {
  background-color: var(--ev-modal-content-bg);
  border: 1px solid var(--ev-modal-content-border);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-modal-shadow);
  color: var(--ev-text-primary);
}

/* ── Modal Header ── */
.modal-header {
  background-color: var(--ev-modal-header-bg) !important;
  border-bottom: 1px solid var(--ev-modal-header-border) !important;
  color: var(--ev-text-primary) !important;
  padding: var(--ev-space-4) var(--ev-space-5) !important;
  border-radius: var(--ev-radius-lg) var(--ev-radius-lg) 0 0 !important;
}

.modal-title {
  color: var(--ev-text-primary);
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0;
}

/* Botón de cierre del modal */
.modal-header .btn-close {
  filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(277%) hue-rotate(182deg) brightness(95%) contrast(92%);
  opacity: 0.7;
  transition: opacity var(--ev-duration-fast) var(--ev-ease-default);
}

.modal-header .btn-close:hover {
  opacity: 1;
}

[data-theme="light"] .modal-header .btn-close,
.light-mode .modal-header .btn-close {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
  opacity: 0.5;
}

[data-theme="light"] .modal-header .btn-close:hover,
.light-mode .modal-header .btn-close:hover {
  opacity: 0.75;
}

/* ── Modal Body ── */
.modal-body {
  background-color: var(--ev-modal-body-bg);
  color: var(--ev-text-primary);
  padding: var(--ev-space-5);
}

/* ── Modal Footer ── */
.modal-footer {
  background-color: var(--ev-modal-footer-bg) !important;
  border-top: 1px solid var(--ev-modal-footer-border) !important;
  padding: var(--ev-space-4) var(--ev-space-5) !important;
  border-radius: 0 0 var(--ev-radius-lg) var(--ev-radius-lg) !important;
}

/* Forzar que los bordes redondeados del modal-content sean respetados */
.modal-content {
  border-radius: var(--ev-radius-lg) !important;
  overflow: hidden !important;
}

/* ── Variantes de Modal Header ── */

/* Modal Header con color primario (barra de color completa) */
.modal-content .modal-header.modal-header-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  background-color: #3b82f6 !important;
  color: white !important;
  border-bottom: none !important;
  border-radius: var(--ev-radius-lg) var(--ev-radius-lg) 0 0 !important;
}

.modal-content .modal-header.modal-header-primary .btn-close {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}

.modal-content .modal-header.modal-header-primary .btn-close:hover {
  opacity: 1 !important;
}

.modal-content .modal-header.modal-header-primary .modal-title,
.modal-content .modal-header.modal-header-primary h5,
.modal-content .modal-header.modal-header-primary h6,
.modal-content .modal-header.modal-header-primary h1,
.modal-content .modal-header.modal-header-primary h2,
.modal-content .modal-header.modal-header-primary h3,
.modal-content .modal-header.modal-header-primary h4 {
  color: white !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* Modal Header Success */
.modal-header-success {
  background: linear-gradient(135deg, var(--ev-success) 0%, #059669 100%);
  color: white;
  border-bottom: none;
}

.modal-header-success .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.modal-header-success .modal-title {
  color: white;
}

/* Modal Header Warning */
.modal-header-warning {
  background: linear-gradient(135deg, var(--ev-warning) 0%, #d97706 100%);
  color: #1e293b;
  border-bottom: none;
}

.modal-header-warning .btn-close {
  filter: brightness(0);
  opacity: 0.7;
}

.modal-header-warning .modal-title {
  color: #1e293b;
  font-weight: 600;
}

/* Modal Header Danger */
.modal-header-danger {
  background: linear-gradient(135deg, var(--ev-danger) 0%, #dc2626 100%);
  color: white;
  border-bottom: none;
}

.modal-header-danger .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.modal-header-danger .modal-title {
  color: white;
}

/* Modal Header Info */
.modal-header-info {
  background: linear-gradient(135deg, var(--ev-info) 0%, #0891b2 100%);
  color: white;
  border-bottom: none;
}

.modal-header-info .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.modal-header-info .modal-title {
  color: white;
}

/* Modal Header Dark (estilo neutro con variables) */
.modal-header-dark {
  background-color: var(--ev-modal-header-bg);
  color: var(--ev-text-primary);
  border-bottom: 1px solid var(--ev-modal-header-border);
}

.modal-header-dark .modal-title {
  color: var(--ev-text-primary);
}

/* ── Modal Footer con acciones ── */
.modal-footer-actions {
  display: flex;
  gap: var(--ev-space-3);
  justify-content: flex-end;
  padding: var(--ev-space-4) var(--ev-space-5);
  border-top: 1px solid var(--ev-modal-footer-border);
  background-color: var(--ev-modal-footer-bg);
}

/* ── Form Controls dentro de Modales ── */
/* Asegura que todos los inputs, selects y textareas usen variables CSS */

.modal .form-control,
.modal .form-select,
.modal .form-control:not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--ev-bg-raised);
  border: 1px solid var(--ev-border-default);
  color: var(--ev-text-primary);
  transition: border-color var(--ev-duration-fast) var(--ev-ease-default),
              box-shadow var(--ev-duration-fast) var(--ev-ease-default);
}

.modal .form-control::placeholder,
.modal .form-select::placeholder {
  color: var(--ev-text-muted);
  opacity: 1;
}

.modal .form-control:focus,
.modal .form-select:focus {
  background-color: var(--ev-bg-surface);
  border-color: var(--ev-brand-primary);
  color: var(--ev-text-primary);
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow);
  outline: none;
}

.modal .form-control:disabled,
.modal .form-select:disabled {
  background-color: var(--ev-bg-surface);
  border-color: var(--ev-border-subtle);
  color: var(--ev-text-disabled);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Labels dentro de modales */
.modal .form-label,
.modal label {
  color: var(--ev-text-primary);
  font-weight: 500;
  margin-bottom: var(--ev-space-2);
}

.modal .form-text,
.modal small {
  color: var(--ev-text-muted);
  font-size: 0.875rem;
}

/* Checkboxes y Radios en modales */
.modal .form-check-input {
  background-color: var(--ev-bg-raised);
  border: 1px solid var(--ev-border-default);
}

.modal .form-check-input:checked {
  background-color: var(--ev-brand-primary);
  border-color: var(--ev-brand-primary);
}

.modal .form-check-input:focus {
  border-color: var(--ev-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow);
}

.modal .form-check-label {
  color: var(--ev-text-secondary);
}

/* ── Tabs dentro de Modales ── */
.modal .nav-tabs {
  border-bottom: 2px solid var(--ev-border-default);
  background-color: transparent;
}

.modal .nav-tabs .nav-link {
  color: var(--ev-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: var(--ev-space-3) var(--ev-space-4);
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

.modal .nav-tabs .nav-link:hover {
  color: var(--ev-text-primary);
  border-bottom-color: var(--ev-border-strong);
  background: transparent;
}

.modal .nav-tabs .nav-link.active {
  color: var(--ev-brand-primary);
  border-bottom-color: var(--ev-brand-primary);
  background: transparent;
  font-weight: 600;
}

.modal .tab-content {
  background-color: transparent;
  color: var(--ev-text-primary);
  padding-top: var(--ev-space-4);
}

/* ── Tables dentro de Modales ── */
.modal .table {
  color: var(--ev-text-primary);
}

.modal .table thead th {
  background-color: var(--ev-bg-raised);
  color: var(--ev-text-primary);
  border-color: var(--ev-border-subtle);
}

.modal .table tbody td {
  background-color: var(--ev-modal-body-bg);
  color: var(--ev-text-secondary);
  border-color: var(--ev-border-subtle);
}

.modal .table-hover tbody tr:hover {
  background-color: var(--ev-bg-hover);
}

/* ── Modal Scrollable ── */
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
  background: var(--ev-bg-raised);
  border-radius: var(--ev-radius-sm);
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background: var(--ev-border-strong);
  border-radius: var(--ev-radius-sm);
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--ev-brand-primary);
}

/* ── Offcanvas (lateral modal) ── */
.offcanvas {
  background-color: var(--ev-bg-surface);
  border-left: 1px solid var(--ev-border-default);
  color: var(--ev-text-primary);
}

.offcanvas-header {
  background-color: var(--ev-bg-raised);
  border-bottom: 1px solid var(--ev-border-subtle);
  color: var(--ev-text-primary);
}

.offcanvas-title {
  color: var(--ev-text-primary);
  font-weight: 600;
}

.offcanvas-body {
  background-color: var(--ev-bg-surface);
  color: var(--ev-text-primary);
}

.offcanvas-footer {
  background-color: var(--ev-bg-raised) !important;
  border-top: 1px solid var(--ev-border-subtle) !important;
  color: var(--ev-text-primary);
}

.offcanvas .btn-close {
  filter: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(277%) hue-rotate(182deg) brightness(95%) contrast(92%);
}

[data-theme="light"] .offcanvas .btn-close,
.light-mode .offcanvas .btn-close {
  filter: brightness(0);
}

/* ── Responsive Modal Sizes ── */
@media (max-width: 768px) {
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--ev-space-4);
  }

  .modal-title {
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════════════════
   BADGES Y NOTIFICACIONES
   ══════════════════════════════════════════════════════ */

/* Badge de notificación (contador) */
.badge-notification {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--ev-danger);
  color: white;
  border-radius: var(--ev-radius-full);
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* Badge con colores de canal */
.badge-channel-ml {
  background-color: var(--ev-channel-ml-bg);
  color: var(--ev-channel-ml);
  border: 1px solid var(--ev-channel-ml);
}

.badge-channel-tn {
  background-color: var(--ev-channel-tn-bg);
  color: var(--ev-channel-tn);
  border: 1px solid var(--ev-channel-tn);
}

.badge-channel-pv {
  background-color: var(--ev-channel-pv-bg);
  color: var(--ev-channel-pv);
  border: 1px solid var(--ev-channel-pv);
}

.badge-channel-web {
  background-color: var(--ev-channel-web-bg);
  color: var(--ev-channel-web);
  border: 1px solid var(--ev-channel-web);
}

.badge-channel-fq {
  background-color: var(--ev-channel-fq-bg);
  color: var(--ev-channel-fq);
  border: 1px solid var(--ev-channel-fq);
}

/* Badge de estado */
.badge-status-active {
  background-color: var(--ev-success-subtle);
  color: var(--ev-success);
  border: 1px solid var(--ev-success);
}

.badge-status-pending {
  background-color: var(--ev-warning-subtle);
  color: var(--ev-warning);
  border: 1px solid var(--ev-warning);
}

.badge-status-inactive {
  background-color: var(--ev-danger-subtle);
  color: var(--ev-danger);
  border: 1px solid var(--ev-danger);
}

/* ══════════════════════════════════════════════════════
   TABLAS — Dark Mode Design System
   ══════════════════════════════════════════════════════ */

/* Tabla base - Override Bootstrap defaults */
.table {
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
  --bs-table-hover-bg: rgba(59, 130, 246, 0.08) !important;
  --bs-table-border-color: var(--ev-border-subtle) !important;
  color: var(--ev-text-primary) !important;
  border-color: var(--ev-border-subtle) !important;
}

/* Table Header - Modern Dark Style */
.table thead {
  background: linear-gradient(180deg, var(--ev-bg-raised) 0%, var(--ev-bg-surface) 100%);
  border-bottom: 2px solid var(--ev-border-default);
}

.table thead th {
  color: var(--ev-text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 0.75rem;
  border-bottom: 2px solid var(--ev-border-default);
  white-space: nowrap;
}

/* Override Bootstrap table-light */
.table-light {
  --bs-table-bg: var(--ev-bg-raised) !important;
  --bs-table-color: var(--ev-text-primary) !important;
}

.table .table-light th {
  background: linear-gradient(180deg, var(--ev-bg-raised) 0%, var(--ev-bg-surface) 100%);
  color: var(--ev-text-primary);
}

/* Table Body */
.table tbody {
  background-color: var(--ev-bg-surface) !important;
}

.table tbody td {
  padding: 0.875rem 0.75rem;
  vertical-align: middle;
  border-color: var(--ev-border-subtle);
  color: var(--ev-text-secondary);
  font-size: 0.9rem;
}

/* Table Hover Effect */
.table-hover tbody tr {
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

.table-hover tbody tr:hover {
  background-color: rgba(59, 130, 246, 0.08);
  cursor: pointer;
  transform: scale(1.002);
}

.table-hover tbody tr:hover td {
  color: var(--ev-text-primary);
}

/* Table Striped - Subtle alternating rows */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Table Bordered - Enhanced borders */
.table-bordered {
  border: 1px solid var(--ev-border-default);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--ev-border-subtle);
}

/* Table con borde superior de color (como las cards) */
.table-primary {
  border-top: 3px solid var(--ev-brand-primary);
}

.table-success {
  border-top: 3px solid var(--ev-success);
}

.table-warning {
  border-top: 3px solid var(--ev-warning);
}

.table-danger {
  border-top: 3px solid var(--ev-danger);
}

.table-info {
  border-top: 3px solid var(--ev-info);
}

/* Columna de acciones - Siempre al final */
.table-actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
  padding-right: 1rem !important;
}

.table-actions .btn {
  margin-left: var(--ev-space-1);
}

.table-actions .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

/* Tabla responsive - mejor scroll */
.table-responsive {
  border-radius: var(--ev-radius-md);
  border: 1px solid var(--ev-border-subtle);
}

.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: var(--ev-bg-raised);
  border-radius: var(--ev-radius-sm);
}

.table-responsive::-webkit-scrollbar-thumb {
  background: var(--ev-border-strong);
  border-radius: var(--ev-radius-sm);
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--ev-brand-primary);
}

/* Tabla con header primario (color de fondo) */
.table-header-primary thead {
  background: linear-gradient(135deg, var(--ev-brand-primary) 0%, var(--ev-brand-secondary) 100%);
  border: none;
}

.table-header-primary thead th {
  color: white;
  border: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Badges en tablas */
.table .badge {
  font-size: 0.75rem;
  padding: 0.35em 0.65em;
  font-weight: 600;
}

/* Iconos en tablas */
.table .bi,
.table .fa,
.table .fas,
.table .far {
  font-size: 1.1rem;
  vertical-align: middle;
}

/* Empty state para tablas */
.table-empty-state {
  padding: 3rem;
  text-align: center;
  color: var(--ev-text-muted);
}

.table-empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.table-empty-state h6 {
  color: var(--ev-text-secondary);
  margin-bottom: 0.5rem;
}

.table-empty-state p {
  font-size: 0.875rem;
  color: var(--ev-text-muted);
}

/* Tabla compacta (small) */
.table-sm thead th {
  padding: 0.75rem 0.5rem;
  font-size: 0.8rem;
}

.table-sm tbody td {
  padding: 0.65rem 0.5rem;
  font-size: 0.85rem;
}

/* Loading state para tablas */
.table-loading {
  position: relative;
  opacity: 0.6;
  pointer-events: none;
}

.table-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--ev-border-subtle);
  border-top-color: var(--ev-brand-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ══════════════════════════════════════════════════════
   FORMULARIOS — Global Dark/Light Mode Support
   ══════════════════════════════════════════════════════ */

/* ── Form Controls Globales (inputs, selects, textareas) ── */
/* Aplica a TODOS los form-control, form-select en cualquier parte del DOM */
.form-control,
.form-select,
textarea.form-control,
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background-color: var(--ev-bg-raised) !important;
  border: 1px solid var(--ev-border-default) !important;
  color: var(--ev-text-primary) !important;
  transition: border-color var(--ev-duration-fast) var(--ev-ease-default),
              box-shadow var(--ev-duration-fast) var(--ev-ease-default);
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
  color: var(--ev-text-muted) !important;
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background-color: var(--ev-bg-surface) !important;
  border-color: var(--ev-brand-primary) !important;
  color: var(--ev-text-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow) !important;
  outline: none;
}

.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
  background-color: var(--ev-bg-surface) !important;
  border-color: var(--ev-border-subtle) !important;
  color: var(--ev-text-disabled) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Select con flechita customizada para dark mode ── */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* Input con icono */
.input-group-icon .input-group-text {
  background-color: var(--ev-bg-raised);
  border-color: var(--ev-border-default);
  color: var(--ev-text-secondary);
}

/* Input de búsqueda */
.input-search {
  background-color: var(--ev-bg-raised);
  border-color: var(--ev-border-default);
  color: var(--ev-text-primary);
  padding-left: var(--ev-space-5);
}

.input-search::placeholder {
  color: var(--ev-text-muted);
}

.input-search:focus {
  background-color: var(--ev-bg-surface);
  border-color: var(--ev-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow);
}

/* Select mejorado */
.form-select-primary:focus {
  border-color: var(--ev-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow);
}

/* Label obligatorio */
.form-label-required::after {
  content: " *";
  color: var(--ev-danger);
}

/* ══════════════════════════════════════════════════════
   BOTONES — Dark Mode Bootstrap Override
   ══════════════════════════════════════════════════════ */

/* Primary Button - Modern Blue Gradient */
.btn-primary {
  background: linear-gradient(135deg, var(--ev-brand-primary) 0%, var(--ev-brand-secondary) 100%);
  border: 1px solid var(--ev-brand-primary);
  color: white;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--ev-brand-secondary) 0%, var(--ev-brand-primary) 100%);
  border-color: var(--ev-brand-light);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
}

.btn-primary:active,
.btn-primary:focus {
  background: var(--ev-brand-secondary);
  border-color: var(--ev-brand-primary);
  color: white;
  box-shadow: 0 0 0 0.25rem var(--ev-brand-glow);
}

/* Secondary Button - Neutral Dark */
.btn-secondary {
  background: var(--ev-bg-raised);
  border: 1px solid var(--ev-border-default);
  color: var(--ev-text-primary);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.btn-secondary:hover {
  background: var(--ev-bg-hover);
  border-color: var(--ev-border-strong);
  color: var(--ev-text-primary);
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-sm);
}

.btn-secondary:active,
.btn-secondary:focus {
  background: var(--ev-bg-hover);
  border-color: var(--ev-border-strong);
  color: var(--ev-text-primary);
  box-shadow: 0 0 0 0.25rem rgba(148, 163, 184, 0.2);
}

/* Success Button - Green */
.btn-success {
  background: linear-gradient(135deg, var(--ev-success) 0%, #059669 100%);
  border: 1px solid var(--ev-success);
  color: white;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, var(--ev-success) 100%);
  border-color: var(--ev-success);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
}

.btn-success:active,
.btn-success:focus {
  background: #059669;
  border-color: var(--ev-success);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
}

/* Warning Button - Yellow/Orange */
.btn-warning {
  background: linear-gradient(135deg, var(--ev-warning) 0%, #d97706 100%);
  border: 1px solid var(--ev-warning);
  color: #1e293b;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
}

.btn-warning:hover {
  background: linear-gradient(135deg, #d97706 0%, var(--ev-warning) 100%);
  border-color: var(--ev-warning);
  color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.25);
}

.btn-warning:active,
.btn-warning:focus {
  background: #d97706;
  border-color: var(--ev-warning);
  color: #0f172a;
  box-shadow: 0 0 0 0.25rem rgba(251, 191, 36, 0.25);
}

/* Danger Button - Red */
.btn-danger {
  background: linear-gradient(135deg, var(--ev-danger) 0%, #dc2626 100%);
  border: 1px solid var(--ev-danger);
  color: white;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, var(--ev-danger) 100%);
  border-color: var(--ev-danger);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25);
}

.btn-danger:active,
.btn-danger:focus {
  background: #dc2626;
  border-color: var(--ev-danger);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
}

/* Info Button - Cyan/Blue */
.btn-info {
  background: linear-gradient(135deg, var(--ev-info) 0%, #0891b2 100%);
  border: 1px solid var(--ev-info);
  color: white;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}

.btn-info:hover {
  background: linear-gradient(135deg, #0891b2 0%, var(--ev-info) 100%);
  border-color: var(--ev-info);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.25);
}

.btn-info:active,
.btn-info:focus {
  background: #0891b2;
  border-color: var(--ev-info);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(6, 182, 212, 0.25);
}

/* Outline Buttons - Dark Mode */
.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--ev-brand-primary);
  color: var(--ev-brand-primary);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.btn-outline-primary:hover {
  background: var(--ev-brand-primary);
  border-color: var(--ev-brand-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}

.btn-outline-primary:active,
.btn-outline-primary:focus {
  background: var(--ev-brand-primary);
  border-color: var(--ev-brand-primary);
  color: white;
  box-shadow: 0 0 0 0.25rem var(--ev-brand-glow);
}

.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--ev-border-strong) !important;
  color: var(--ev-text-secondary) !important;
  font-weight: 500 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: var(--ev-radius-md) !important;
  transition: all var(--ev-duration-normal) var(--ev-ease-default) !important;
}

.btn-outline-secondary:hover {
  background: var(--ev-bg-hover) !important;
  border-color: var(--ev-border-strong) !important;
  color: var(--ev-text-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ev-shadow-sm) !important;
}

.btn-outline-success {
  background: transparent;
  border: 1px solid var(--ev-success);
  color: var(--ev-success);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.btn-outline-success:hover {
  background: var(--ev-success);
  border-color: var(--ev-success);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}

.btn-outline-success:active,
.btn-outline-success:focus {
  background: var(--ev-success);
  border-color: var(--ev-success);
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
}

.btn-outline-warning {
  background: transparent;
  border: 1px solid var(--ev-warning);
  color: var(--ev-warning);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.btn-outline-warning:hover {
  background: var(--ev-warning);
  border-color: var(--ev-warning);
  color: #1e293b;
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}

.btn-outline-danger {
  background: transparent;
  border: 1px solid var(--ev-danger);
  color: var(--ev-danger);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.btn-outline-danger:hover {
  background: var(--ev-danger);
  border-color: var(--ev-danger);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}

.btn-outline-info {
  background: transparent;
  border: 1px solid var(--ev-info);
  color: var(--ev-info);
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
}

.btn-outline-info:hover {
  background: var(--ev-info);
  border-color: var(--ev-info);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}

/* Button Sizes */
.btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  border-radius: var(--ev-radius-sm);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  border-radius: var(--ev-radius-lg);
}

/* Disabled State - All buttons */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* ══════════════════════════════════════════════════════
   BOTONES PERSONALIZADOS
   ══════════════════════════════════════════════════════ */

/* Botón primario con icono */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--ev-space-2);
}

.btn-icon i,
.btn-icon .icon {
  font-size: 1rem;
}

/* Botón de exportar Excel - Estandarizado */
.btn-export-excel {
  display: inline-flex;
  align-items: center;
  gap: var(--ev-space-2);
  border-color: var(--ev-success);
  color: var(--ev-success);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--ev-radius-md);
  transition: all var(--ev-duration-normal) var(--ev-ease-default);
  background: transparent;
}

.btn-export-excel:hover {
  background-color: var(--ev-success);
  border-color: var(--ev-success);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-md);
}

.btn-export-excel i {
  font-size: 1.1rem;
}

/* Botón circular (para acciones) */
.btn-circle {
  width: 36px;
  height: 36px;
  border-radius: var(--ev-radius-full);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-circle-sm {
  width: 28px;
  height: 28px;
  font-size: 0.875rem;
}

.btn-circle-lg {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
}

/* Botón con borde de color */
.btn-outline-brand {
  border-color: var(--ev-brand-primary);
  color: var(--ev-brand-primary);
}

.btn-outline-brand:hover {
  background-color: var(--ev-brand-primary);
  color: white;
}

/* ══════════════════════════════════════════════════════
   ALERTS Y MENSAJES
   ══════════════════════════════════════════════════════ */

/* Alert con icono */
.alert-with-icon {
  display: flex;
  align-items: flex-start;
  gap: var(--ev-space-3);
}

.alert-with-icon .icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Alert de suscripción vencida */
.alert-subscription {
  background-color: var(--ev-warning-subtle);
  border-left: 4px solid var(--ev-warning);
  color: var(--ev-text-primary);
}

/* Alerts dentro de modales - Dark Mode */
.modal .alert-primary {
  background-color: var(--ev-brand-subtle) !important;
  border: 1px solid var(--ev-brand-primary) !important;
  color: var(--ev-text-primary) !important;
}

.modal .alert-success {
  background-color: var(--ev-success-subtle) !important;
  border: 1px solid var(--ev-success) !important;
  color: var(--ev-text-primary) !important;
}

.modal .alert-warning {
  background-color: var(--ev-warning-subtle) !important;
  border: 1px solid var(--ev-warning) !important;
  color: var(--ev-text-primary) !important;
}

.modal .alert-danger {
  background-color: var(--ev-danger-subtle) !important;
  border: 1px solid var(--ev-danger) !important;
  color: var(--ev-text-primary) !important;
}

/* ══════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════ */

.breadcrumb-dark {
  background-color: transparent;
  padding: var(--ev-space-3) 0;
}

.breadcrumb-dark .breadcrumb-item {
  color: var(--ev-text-secondary);
}

.breadcrumb-dark .breadcrumb-item.active {
  color: var(--ev-text-primary);
}

.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ev-text-muted);
}

/* ══════════════════════════════════════════════════════
   DROPDOWNS
   ══════════════════════════════════════════════════════ */

.dropdown-menu-dark {
  background-color: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-default);
  box-shadow: var(--ev-shadow-lg);
}

.dropdown-menu-dark .dropdown-item {
  color: var(--ev-text-secondary);
}

.dropdown-menu-dark .dropdown-item:hover {
  background-color: var(--ev-bg-hover);
  color: var(--ev-text-primary);
}

.dropdown-menu-dark .dropdown-divider {
  border-color: var(--ev-border-subtle);
}

/* ══════════════════════════════════════════════════════
   PAGINATION — Modern Dark Mode Design
   ══════════════════════════════════════════════════════ */

/* Pagination Container */
.pagination {
  --bs-pagination-bg: var(--ev-bg-surface);
  --bs-pagination-border-color: var(--ev-border-subtle);
  --bs-pagination-hover-bg: var(--ev-bg-hover);
  --bs-pagination-hover-border-color: var(--ev-border-default);
  --bs-pagination-focus-bg: var(--ev-bg-hover);
  --bs-pagination-active-bg: var(--ev-brand-primary);
  --bs-pagination-active-border-color: var(--ev-brand-primary);
  --bs-pagination-disabled-bg: var(--ev-bg-surface);
  --bs-pagination-disabled-border-color: var(--ev-border-subtle);
  gap: 0.5rem;
}

/* Page Links - Modern Style */
.pagination .page-link {
  background-color: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-subtle);
  color: var(--ev-text-secondary);
  border-radius: var(--ev-radius-md);
  padding: 0.5rem 0.75rem;
  min-width: 40px;
  text-align: center;
  font-weight: 500;
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

.pagination .page-link:hover {
  background-color: var(--ev-bg-hover);
  border-color: var(--ev-border-default);
  color: var(--ev-text-primary);
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-sm);
}

.pagination .page-link:focus {
  background-color: var(--ev-bg-hover);
  border-color: var(--ev-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow);
  color: var(--ev-text-primary);
}

/* Active Page */
.pagination .page-item.active .page-link {
  background-color: var(--ev-brand-primary);
  border-color: var(--ev-brand-primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

/* Disabled State */
.pagination .page-item.disabled .page-link {
  background-color: var(--ev-bg-surface);
  border-color: var(--ev-border-subtle);
  color: var(--ev-text-muted);
  opacity: 0.5;
  cursor: not-allowed;
}

/* First, Previous, Next, Last buttons */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  font-weight: 600;
}

/* Pagination Info (showing X of Y) */
.pagination-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ev-text-secondary);
  font-size: 0.875rem;
}

.pagination-info strong {
  color: var(--ev-text-primary);
  font-weight: 600;
}

/* Pagination with jump to page */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--ev-bg-raised);
  border-radius: var(--ev-radius-lg);
  border: 1px solid var(--ev-border-subtle);
}

.pagination-jump {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-jump label {
  color: var(--ev-text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.pagination-jump input {
  width: 70px;
  padding: 0.375rem 0.5rem;
  background-color: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-default);
  border-radius: var(--ev-radius-md);
  color: var(--ev-text-primary);
  text-align: center;
  font-size: 0.875rem;
}

.pagination-jump input:focus {
  border-color: var(--ev-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow);
  outline: none;
}

.pagination-jump button {
  padding: 0.375rem 0.75rem;
  background-color: var(--ev-brand-primary);
  border: none;
  border-radius: var(--ev-radius-md);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

.pagination-jump button:hover {
  background-color: var(--ev-brand-secondary);
  box-shadow: var(--ev-shadow-sm);
}

/* Pagination Size Selector */
.pagination-size {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-size label {
  color: var(--ev-text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

.pagination-size select {
  padding: 0.375rem 0.5rem;
  background-color: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-default);
  border-radius: var(--ev-radius-md);
  color: var(--ev-text-primary);
  font-size: 0.875rem;
}

.pagination-size select:focus {
  border-color: var(--ev-brand-primary);
  box-shadow: 0 0 0 0.2rem var(--ev-brand-glow);
  outline: none;
}

/* Compact Pagination (for mobile) */
@media (max-width: 768px) {
  .pagination {
    gap: 0.25rem;
  }

  .pagination .page-link {
    padding: 0.375rem 0.5rem;
    min-width: 36px;
    font-size: 0.875rem;
  }

  .pagination-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination-info,
  .pagination-jump,
  .pagination-size {
    width: 100%;
    justify-content: space-between;
  }
}

/* ══════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════ */

.nav-tabs-dark {
  border-bottom: 1px solid var(--ev-border-default);
}

.nav-tabs-dark .nav-link {
  color: var(--ev-text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
}

.nav-tabs-dark .nav-link:hover {
  color: var(--ev-text-primary);
  border-bottom-color: var(--ev-border-strong);
}

.nav-tabs-dark .nav-link.active {
  color: var(--ev-brand-light);
  border-bottom-color: var(--ev-brand-primary);
  background: transparent;
}

/* ══════════════════════════════════════════════════════
   SPINNERS Y LOADING
   ══════════════════════════════════════════════════════ */

.spinner-primary {
  color: var(--ev-brand-primary);
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* ══════════════════════════════════════════════════════
   LIST GROUPS
   ══════════════════════════════════════════════════════ */

.list-group-dark .list-group-item {
  background-color: var(--ev-bg-surface);
  border-color: var(--ev-border-subtle);
  color: var(--ev-text-secondary);
}

.list-group-dark .list-group-item:hover {
  background-color: var(--ev-bg-hover);
  color: var(--ev-text-primary);
}

.list-group-dark .list-group-item.active {
  background-color: var(--ev-brand-primary);
  border-color: var(--ev-brand-primary);
  color: white;
}

/* ══════════════════════════════════════════════════════
   OFFCANVAS
   ══════════════════════════════════════════════════════ */

.offcanvas-dark {
  background-color: var(--ev-bg-surface);
  border-left: 1px solid var(--ev-border-default);
}

.offcanvas-dark .offcanvas-header {
  border-bottom: 1px solid var(--ev-border-subtle);
}

.offcanvas-dark .offcanvas-title {
  color: var(--ev-text-primary);
}

/* ══════════════════════════════════════════════════════
   TOOLTIPS (cuando se usen)
   ══════════════════════════════════════════════════════ */

.tooltip-dark .tooltip-inner {
  background-color: var(--ev-bg-overlay);
  color: var(--ev-text-primary);
  box-shadow: var(--ev-shadow-md);
}

/* ══════════════════════════════════════════════════════
   FOOTER — Clean Professional Design
   ══════════════════════════════════════════════════════ */

.footer {
  padding: 2.5rem 0 2rem;
  font-size: 0.8125rem;
  background: var(--ev-bg-surface);
  border-top: 1px solid var(--ev-border-default);
  margin-top: 4rem;
}

.footer .copyright {
  text-align: center;
  color: #94a3b8;
  font-weight: 400;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.footer .copyright strong {
  color: var(--ev-text-primary);
  font-weight: 600;
}

.footer .credits {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ev-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.footer .credits a {
  color: var(--ev-text-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
  padding: 0.125rem 0.375rem;
  border-radius: var(--ev-radius-sm);
}

.footer .credits a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

/* Footer Responsive */
@media (max-width: 768px) {
  .footer {
    padding: 2rem 1rem 1.5rem;
    margin-top: 3rem;
  }

  .footer .copyright {
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
  }

  .footer .credits {
    font-size: 0.6875rem;
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* ══════════════════════════════════════════════════════
   SEARCH INPUTS — Sistema Estandarizado Dark/Light Mode
   ══════════════════════════════════════════════════════ */

/* ── Search Form Container ── */
.search-form {
  display: flex;
  align-items: center;
  margin: 0;
}

/* ── Search Input Group (SIN CONTORNO VISIBLE) ── */
.search-form .input-group {
  position: relative;
  width: 100%;
}

/* Icono de búsqueda - SIN BORDE NI FONDO */
.search-form .input-group-text {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 var(--ev-space-4);
  background: transparent;
  border: none;
  color: var(--ev-search-icon-color);
  pointer-events: none;
}

.search-form .input-group-text i {
  font-size: 1rem;
  opacity: 0.7;
}

/* Input de búsqueda */
.search-form .form-control {
  background-color: var(--ev-search-bg);
  border: 1px solid var(--ev-search-border);
  color: var(--ev-search-text);
  padding-left: 2.75rem;
  padding-right: var(--ev-space-4);
  height: 40px;
  border-radius: var(--ev-radius-md) !important;
  font-size: 0.9rem;
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

/* Override Bootstrap input-group rounded corners */
.search-form .input-group .form-control {
  border-radius: var(--ev-radius-md) !important;
}

.search-form .input-group-text {
  border-radius: var(--ev-radius-md) 0 0 var(--ev-radius-md) !important;
}

.search-form .form-control::placeholder {
  color: var(--ev-search-placeholder);
  opacity: 1;
}

.search-form .form-control:focus {
  background-color: var(--ev-search-bg);
  border-color: var(--ev-search-focus-border);
  color: var(--ev-search-text);
  box-shadow: 0 0 0 0.2rem var(--ev-search-focus-glow);
  outline: none;
}

.search-form .form-control:focus + .input-group-text i,
.search-form .form-control:focus ~ .input-group-text i {
  color: var(--ev-brand-primary);
  opacity: 1;
}

/* ── Search con Botón ── */
.search-with-button .input-group {
  display: flex;
}

.search-with-button .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: var(--ev-space-4);
  flex: 1;
}

.search-with-button .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0 var(--ev-space-4);
  min-width: 48px;
}

/* ── Search con Dropdown de Resultados ── */
.search-dropdown-container {
  position: relative;
  width: 100%;
}

.search-dropdown-container .form-control {
  background-color: var(--ev-search-bg);
  border: 1px solid var(--ev-search-border);
  color: var(--ev-search-text);
  padding: var(--ev-space-3) var(--ev-space-4);
  border-radius: var(--ev-radius-md);
  font-size: 0.9rem;
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

.search-dropdown-container .form-control:focus {
  border-color: var(--ev-search-focus-border);
  box-shadow: 0 0 0 0.2rem var(--ev-search-focus-glow);
  outline: none;
}

.search-dropdown-container .dropdown-menu {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--ev-bg-surface);
  border: 1px solid var(--ev-border-default);
  border-radius: var(--ev-radius-md);
  box-shadow: var(--ev-shadow-lg);
  margin-top: 0.25rem;
}

.search-dropdown-container .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.search-dropdown-container .dropdown-menu::-webkit-scrollbar-track {
  background: var(--ev-bg-raised);
}

.search-dropdown-container .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--ev-border-strong);
  border-radius: var(--ev-radius-sm);
}

.search-dropdown-container .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: var(--ev-brand-primary);
}

.search-dropdown-container .dropdown-item {
  padding: var(--ev-space-3) var(--ev-space-4);
  color: var(--ev-text-primary);
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
  cursor: pointer;
}

.search-dropdown-container .dropdown-item:hover {
  background-color: var(--ev-bg-hover);
  color: var(--ev-brand-primary);
}

.search-dropdown-container .dropdown-item:active {
  background-color: var(--ev-brand-subtle);
}

/* ── Search Input Standalone (sin form wrapper) ── */
input.search-input,
input[id*="search"],
input[id*="Search"] {
  background-color: var(--ev-search-bg);
  border: 1px solid var(--ev-search-border);
  color: var(--ev-search-text);
  padding: var(--ev-space-3) var(--ev-space-4);
  border-radius: var(--ev-radius-md);
  font-size: 0.9rem;
  transition: all var(--ev-duration-fast) var(--ev-ease-default);
}

input.search-input::placeholder,
input[id*="search"]::placeholder,
input[id*="Search"]::placeholder {
  color: var(--ev-search-placeholder);
  opacity: 1;
}

input.search-input:focus,
input[id*="search"]:focus,
input[id*="Search"]:focus {
  background-color: var(--ev-search-bg);
  border-color: var(--ev-search-focus-border);
  box-shadow: 0 0 0 0.2rem var(--ev-search-focus-glow);
  outline: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .search-form .form-control {
    height: 36px;
    font-size: 0.875rem;
    padding-left: 2.5rem;
  }

  .search-form .input-group-text {
    padding-left: var(--ev-space-3);
  }

  .search-form .input-group-text i {
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════════════════════
   FORM LABELS — Color adaptativo para Dark/Light Mode
   ══════════════════════════════════════════════════════ */

/* Override global para form-label con color adaptativo */
.form-label,
label.form-label {
  color: var(--ev-text-primary) !important;
  font-weight: 500;
}