/* ═══════════════════════════════════════════════════════════════════════════
   StackFire — Sistema de diseño OSCURO (estilo Vercel)
   ───────────────────────────────────────────────────────────────────────────
   Autoridad final del modo nocturno. Se carga DESPUÉS de styles-portal.css,
   sf-design-system.css y de los <style> embebidos de cada página, así que es el
   único punto donde se gobierna el tema oscuro a nivel global.

   FILOSOFÍA (auditoría UI/UX, referencia vercel.com/dashboard):
   · Una sola escala de color (tokens Zinc + azul Vercel) — fuente única de verdad.
   · Cromo plano negro (#000) con bordes #27272A; superficies elevadas #090909.
   · Contraste WCAG AA garantizado en todo texto (ver ratios por token, sección 1).
   · Estados claros y consistentes: hover, focus-visible, active, selected.
   · Cualquier componente nuevo hereda automáticamente estos tokens: la sección 2
     reconduce las familias --bs-*, --sf-* y --sf-dark-* a los tokens canónicos,
     de modo que no hay que tocar el CSS de cada componente.

   ARQUITECTURA DE TOKENS (importante para no romper el modo CLARO):
   · Los tokens canónicos (sección 1) usan nombres SIN prefijo (--background,
     --surface, …). Se verificó que NINGÚN componente los consume todavía, por lo
     que declararlos en :root es inofensivo para el modo claro.
   · El remapeo de las familias heredadas (--sf-*, --bs-*) — que SÍ tienen valores
     claros — se hace EXCLUSIVAMENTE dentro de [data-bs-theme="dark"], nunca en
     :root, para no pisar el modo claro.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS CANÓNICOS — la escala única (Vercel / Tailwind Zinc + azul #0070F3)
   Nombres sin prefijo: ésta es la API pública del design system. Los ratios son
   contra el fondo negro (#000) salvo que se indique otra cosa.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* — Superficies (negro puro; las tarjetas se definen por su BORDE) -------- */
  --background:      #000000;  /* fondo de la app y del cromo                  */
  --surface:         #000000;  /* tarjetas/menús/modales = negro + borde       */
  --surface-hover:   #171717;  /* hover sutil de superficies y filas           */
  --surface-2:       #0a0a0a;  /* inputs (apenas elevado del negro)            */
  --surface-3:       #161616;  /* flotantes elevados (popover/tooltip)         */
  --surface-selected:#1f1f1f;  /* ítem de menú/fila SELECCIONADO               */

  /* — Bordes (neutros y ligeros, sin tinte azul/morado) ------------------- */
  --border-subtle:   #1c1c1c;  /* divisores internos casi invisibles           */
  --border:          #2a2a2a;  /* borde estándar sutil (neutro)               */
  --border-strong:   #333538;  /* borde de tarjeta (un punto más visible)     */
  --border-hover:    #444444;  /* borde en hover/focus                         */

  /* — Texto: blanco / casi-blanco (mínimo gris) --------------------------- */
  --text-primary:    #fafafa;  /* ≈ blanco — titulares y cuerpo (19.3:1 AAA)  */
  --text-secondary:  #ededed;  /* casi blanco — secundario (antes gris)       */
  --text-muted:      #a1a1aa;  /* gris claro SOLO en caps/timestamps/placeholder */

  /* — "Acento" = BLANCO/NEGRO (sin azul). Solo las gráficas llevan color. -- */
  --accent:          #fafafa;  /* relleno primario = blanco (texto negro)     */
  --accent-hover:    #e4e4e7;  /* hover del primario                          */
  --accent-active:   #d4d4d8;  /* presionado                                  */
  --accent-text:     #fafafa;  /* enlaces/acento como TEXTO = blanco          */
  --accent-subtle:   rgba(255, 255, 255, 0.10); /* realce sutil de activos    */
  --on-accent:       #000000;  /* texto sobre relleno blanco = negro          */

  /* — Semánticos (todos ≥6.9:1 como texto sobre #000) ---------------------- */
  --success:         #3fb950;  /* 8.2:1  */
  --success-subtle:  rgba(63, 185, 80, 0.14);
  --warning:         #f5a623;  /* 10.3:1 */
  --warning-subtle:  rgba(245, 166, 35, 0.14);
  --danger:          #ff5c5c;  /* 6.9:1  */
  --danger-subtle:   rgba(255, 92, 92, 0.13);
  --info:            #ededed;  /* info = neutro/blanco (antes azul)            */
  --info-subtle:     rgba(255, 255, 255, 0.08);

  /* — Foco accesible (WCAG 2.4.7 / 1.4.11) — anillo BLANCO ----------------- */
  --focus-ring:      0 0 0 2px var(--background), 0 0 0 4px rgba(255, 255, 255, 0.55);
  --focus-ring-soft: 0 0 0 3px rgba(255, 255, 255, 0.18);

  /* — Radios / sombras ------------------------------------------------------ */
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.65);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. REMAPEO DE FAMILIAS HEREDADAS  →  escala canónica  (SOLO en modo oscuro)
   Reconduce los tres sistemas de variables a la escala única. Como esta hoja
   carga al final, gana a los <style> de página y a sf-design-system. Resultado:
   TODO componente que ya use --bs-*/--sf-*/--sf-dark-* adopta el tema Vercel sin
   tocar su CSS individual. Va dentro de [data-bs-theme="dark"] para no afectar
   al modo claro (esas variables tienen valores claros propios).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  /* — Familia legacy de dark-theme (--sf-dark-*) -------------------------- */
  --sf-dark-bg:        var(--background);
  --sf-dark-surface:   var(--surface);
  --sf-dark-surface-2: var(--surface-2);
  --sf-dark-border:    var(--border);
  --sf-dark-text:      var(--text-primary);
  --sf-dark-text-soft: var(--text-secondary);

  /* — Familia sf-design-system + <style> de páginas (--sf-*) -------------- */
  --sf-bg:             var(--background);
  --sf-surface:        var(--surface-3);   /* superficie sutil de página (hovers/botones de tickets) */
  --sf-surface-hover:  var(--surface-hover);
  --sf-border:         var(--border);
  --sf-border-subtle:  var(--border-subtle);
  --sf-text-primary:   var(--text-primary);
  --sf-text-secondary: var(--text-secondary);
  --sf-text-tertiary:  var(--text-muted);
  --sf-accent:         var(--accent);
  --sf-accent-hover:   var(--accent-hover);
  --sf-accent-subtle:  var(--accent-subtle);
  --sf-white:          var(--surface);     /* "blanco" semántico → superficie */
  --sf-black:          var(--text-primary);/* "negro" semántico → texto       */
  --sf-success:        var(--success);
  --sf-success-bg:     var(--success-subtle);
  --sf-warning:        var(--warning);
  --sf-warning-bg:     var(--warning-subtle);
  --sf-danger:         var(--danger);
  --sf-danger-bg:      var(--danger-subtle);
  --sf-info:           var(--info);
  --sf-info-bg:        var(--info-subtle);

  /* — Núcleo de Bootstrap (afecta a casi todos los componentes) ----------- */
  --bs-body-bg:                    var(--background);
  --bs-body-bg-rgb:                0, 0, 0;
  --bs-body-color:                 #cccccc;          /* texto de cuerpo en modo oscuro (decisión de marca) */
  --bs-body-color-rgb:             204, 204, 204;
  --bs-emphasis-color:             #ffffff;
  --bs-emphasis-color-rgb:         255, 255, 255;
  --bs-secondary-color:            #cccccc;          /* texto secundario en modo oscuro (decisión de marca) */
  --bs-secondary-bg:               var(--surface-2);
  --bs-secondary-bg-rgb:           24, 24, 27;
  --bs-tertiary-color:             var(--text-muted);
  --bs-tertiary-bg:                var(--surface);
  --bs-tertiary-bg-rgb:            9, 9, 9;
  --bs-border-color:               var(--border);
  --bs-border-color-translucent:   rgba(255, 255, 255, 0.10);
  --bs-heading-color:              #ffffff;
  --bs-link-color:                 var(--accent-text);
  --bs-link-color-rgb:             250, 250, 250;
  --bs-link-hover-color:           #ffffff;
  --bs-link-hover-color-rgb:       255, 255, 255;
  --bs-primary:                    var(--accent);
  --bs-primary-rgb:                250, 250, 250;
  --bs-primary-text-emphasis:      var(--accent-text);
  --bs-primary-bg-subtle:          var(--accent-subtle);
  --bs-primary-border-subtle:      rgba(255, 255, 255, 0.20);
  --bs-success-text-emphasis:      var(--success);
  --bs-success-bg-subtle:          var(--success-subtle);
  --bs-success-border-subtle:      rgba(63, 185, 80, 0.35);
  --bs-warning-text-emphasis:      var(--warning);
  --bs-warning-bg-subtle:          var(--warning-subtle);
  --bs-warning-border-subtle:      rgba(245, 166, 35, 0.35);
  --bs-danger-text-emphasis:       var(--danger);
  --bs-danger-bg-subtle:           var(--danger-subtle);
  --bs-danger-border-subtle:       rgba(255, 92, 92, 0.35);
  --bs-info-text-emphasis:         var(--info);
  --bs-info-bg-subtle:             var(--info-subtle);
  --bs-info-border-subtle:         rgba(255, 255, 255, 0.18);
  --bs-secondary-text-emphasis:    var(--text-secondary);
  --bs-light-bg-subtle:            #1e1e1e;  /* era #465670 (azul-gris) → casi negro */
  --bs-dark-bg-subtle:             var(--surface-2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. BASE — cuerpo, contenedores de layout, scrollbars, selección de texto
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .body-wrapper,
[data-bs-theme="dark"] .page-layout {
  background-color: var(--background) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] ::selection {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
}

/* Scrollbars finas, neutras (Vercel). */
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2a2a2e; border-radius: 4px; border: 2px solid var(--background);
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
[data-bs-theme="dark"] * { scrollbar-width: thin; scrollbar-color: #2a2a2e transparent; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. TIPOGRAFÍA & ENLACES — jerarquía y contraste WCAG
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] { color: var(--text-primary); }

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6,
[data-bs-theme="dark"] .section-title {
  color: #ffffff !important;
  letter-spacing: -0.01em;
}

/* Texto secundario / atenuado: usa SIEMPRE tokens con contraste verificado.
   .text-muted pasa a secundario (8.2:1) en vez del muted real (4.3:1) porque a
   menudo viola AA al usarse en cuerpo pequeño. El muted real queda para
   metadatos no esenciales (.sf-text-tertiary, timestamps). */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] small.text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .form-text,
[data-bs-theme="dark"] .text-body-secondary {
  color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .link-dark,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .blockquote-footer,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .text-black-50 {
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .sf-text-tertiary,
[data-bs-theme="dark"] .text-body-tertiary {
  color: var(--text-muted) !important;
}

/* Enlaces de texto: azul aclarado (6.6:1) para legibilidad sobre negro. */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-link):not(.list-group-item) {
  color: var(--accent-text);
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.sidebar-link):not(.list-group-item):hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Utilidades de color: primary/info = neutro (blanco). Verde/ámbar/rojo se
   conservan SOLO donde aportan significado (estados, finanzas, alertas). */
[data-bs-theme="dark"] .text-primary { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .text-info    { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .text-success { color: var(--success) !important; }
[data-bs-theme="dark"] .text-danger  { color: var(--danger) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--warning) !important; }
[data-bs-theme="dark"] .text-info    { color: var(--info) !important; }
[data-bs-theme="dark"] .text-white   { color: #ffffff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   5. CROMO — SIDEBAR (navegación, caps, submenús, estados, perfil)
   Cromo plano negro con borde derecho sutil (Vercel). Selected = superficie
   tenue + texto blanco + indicador de acento, NO relleno azul saturado.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .left-sidebar,
[data-bs-theme="dark"] .sidebar-nav,
[data-bs-theme="dark"] .brand-logo {
  background-color: var(--background) !important;
}
[data-bs-theme="dark"] .left-sidebar {
  border-right: 1px solid var(--border) !important;
}

/* Ítems de navegación */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md);
  font-weight: 500;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link .ti,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link i {
  color: var(--text-muted) !important;
}

/* Hover */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover .ti,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover i {
  color: var(--text-primary) !important;
}

/* Selected / active (nivel 1) — superficie tenue + indicador de acento a la izq. */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active {
  background: var(--surface-selected) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  position: relative;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link::before,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 2px;
  background: var(--accent);
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link .ti,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active .ti,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link i,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active i {
  color: var(--text-primary) !important;
}
/* Flecha del desplegable (has-arrow) */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link.has-arrow::after {
  border-color: var(--text-muted) !important;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover.has-arrow::after,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item.selected .sidebar-link.has-arrow::after,
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link.active.has-arrow::after {
  border-color: var(--text-primary) !important;
}

/* Submenú (first-level): el tema heredado lo pinta de blanco (#f7f9fc) → corregir. */
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link {
  color: var(--text-muted) !important;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link:hover {
  background: transparent !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link.active {
  background-color: var(--surface-selected) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* Caps de sección (HOME, CRM, …): mayúsculas grises (no azul heredado). */
[data-bs-theme="dark"] .nav-small-cap,
[data-bs-theme="dark"] .nav-small-cap .hide-menu {
  color: var(--text-muted) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Tarjeta de perfil inferior */
[data-bs-theme="dark"] .sf-sidebar-profile,
[data-bs-theme="dark"] .fixed-profile {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
[data-bs-theme="dark"] .sf-sidebar-profile h6 { color: var(--text-primary) !important; }

/* Selector de tema en la barra lateral — variante oscura (estilo Vercel).
   Hereda la maquetación de styles-portal.css (.sf-sidebar-theme) y solo recolorea. */
[data-bs-theme="dark"] .sf-theme-seg.sf-sidebar-theme {
  background: var(--surface-2);
  border-color: var(--border);
}
[data-bs-theme="dark"] .sf-sidebar-theme .sf-theme-seg__ico { color: var(--text-muted); }
[data-bs-theme="dark"] .sf-sidebar-theme .sf-theme-seg__opt:hover .sf-theme-seg__ico { color: var(--text-secondary); }
[data-bs-theme="dark"] .sf-sidebar-theme .sf-theme-seg__opt input:checked + .sf-theme-seg__ico {
  background: var(--surface-selected);
  color: var(--text-primary);
  box-shadow: none;
}

/* "User Profile" del header (.content-dd): fondo NEGRO en modo oscuro.
   Antes heredaba el azul legacy #0f172a de _dark-enhancements. */
[data-bs-theme="dark"] .content-dd,
[data-bs-theme="dark"] .content-dd .profile-dropdown {
  background-color: #000000 !important;
  border-color: var(--border) !important;
}

/* Badges de estado de tickets — paleta legible en oscuro (la versión clara vive
   en styles-portal.css). Convención UX: rojo=abierto, ámbar=en progreso,
   azul=contestado, morado=en espera, verde=cerrado/resuelto, gris=desconocido. */
[data-bs-theme="dark"] .sf-st--open     { background: rgba(255, 92, 92, 0.16) !important;  color: #ff8a8a !important; }
[data-bs-theme="dark"] .sf-st--progress { background: rgba(245, 166, 35, 0.16) !important; color: #f5c87a !important; }
[data-bs-theme="dark"] .sf-st--answered { background: rgba(96, 165, 250, 0.18) !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .sf-st--hold     { background: rgba(167, 139, 250, 0.18) !important; color: #c4b5fd !important; }
[data-bs-theme="dark"] .sf-st--closed   { background: rgba(63, 185, 80, 0.18) !important;  color: #5fd877 !important; }
[data-bs-theme="dark"] .sf-st--muted    { background: rgba(161, 161, 170, 0.18) !important; color: #d4d4d8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. CROMO — TOPBAR / HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .sf-navbar {
  background-color: var(--background) !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-bs-theme="dark"] .topbar .navbar .nav-item .nav-link {
  color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .topbar .navbar .nav-item .nav-link:hover {
  color: var(--text-primary) !important;
}
/* Botón redondo de icono del header (buscar, notif., perfil) */
[data-bs-theme="dark"] .nav-icon-hover-bg:hover,
[data-bs-theme="dark"] .topbar .nav-item.nav-icon-hover-bg:hover {
  background: var(--surface-hover) !important;
}
/* Selector "Empresa: Todas" (btn-dark personalizado) */
[data-bs-theme="dark"] .btn-company {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
}
[data-bs-theme="dark"] .btn-company:hover,
[data-bs-theme="dark"] .btn-company:focus,
[data-bs-theme="dark"] .btn-company[aria-expanded="true"] {
  background: var(--surface-hover) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .btn-company span { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .btn-company #topCompanyText { color: var(--text-primary) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. TARJETAS (CARDS)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .sf-card {
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text-primary);
  --bs-card-cap-bg: transparent;
  --bs-card-border-color: var(--border-strong);
  background-color: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 14px !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  background-color: transparent !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .card-title { color: #ffffff !important; }
[data-bs-theme="dark"] .card-subtitle { color: var(--text-secondary) !important; }

/* Bootstrap usa .bg-white/.bg-light como superficie en muchas zonas. */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-body-tertiary,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPERFICIES NEGRAS + CONTORNO CLARO (a petición)
   Los rellenos gris/azulados heredados no contrastan en oscuro: van en NEGRO y
   se definen por su CONTORNO claro, de forma consistente en todos los módulos.
   Se re-afirman las variables con !important para vencer los valores azul-gris
   de styles-portal.css (--bs-body-bg:#202936, --bs-secondary-bg:#343a40) que se
   colaban en algunas páginas.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  --bs-body-bg: #000000 !important;
  --bs-secondary-bg: #0d0d0d !important;
  --bs-tertiary-bg: #000000 !important;
  --bs-border-color: rgba(255, 255, 255, 0.20) !important;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.20) !important;
  /* Tokens del design system → contorno de tarjeta/panel más visible. */
  --border: rgba(255, 255, 255, 0.20);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-hover: rgba(255, 255, 255, 0.45);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. BOTONES — acento, contorno, claro, oscuro, semánticos + estados
   ═══════════════════════════════════════════════════════════════════════════ */
/* Primario / acento: relleno azul Vercel, texto blanco (4.6:1 AA). */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--on-accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-hover-color: var(--on-accent);
  --bs-btn-active-bg: var(--accent-active);
  --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-active-color: var(--on-accent);
  --bs-btn-disabled-bg: var(--surface-selected);
  --bs-btn-disabled-border-color: var(--border);
  --bs-btn-disabled-color: var(--text-muted);
}
/* Contorno: borde neutro, se aclara en hover (Vercel). */
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-hover);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-border-color: var(--border-hover);
  --bs-btn-active-color: var(--text-primary);
}
/* Claro → superficie elevada en oscuro. */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-light {
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: var(--border);
  --bs-btn-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-hover);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-color: var(--text-primary);
}
/* btn-dark / outline-dark: pensados para fondo claro → invertir a claro. */
[data-bs-theme="dark"] .btn-dark {
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: var(--border);
  --bs-btn-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-hover);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-color: #ffffff;
}
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--border-hover);
  --bs-btn-hover-color: #0b0b0c;
  --bs-btn-hover-bg: var(--text-primary);
  --bs-btn-hover-border-color: var(--text-primary);
  --bs-btn-active-color: #0b0b0c;
  --bs-btn-active-bg: var(--text-primary);
  --bs-btn-active-border-color: var(--text-primary);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--border);
}
/* Semánticos: relleno con texto adecuado al contraste. */
[data-bs-theme="dark"] .btn-success {
  --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
  --bs-btn-color: #04140a; --bs-btn-hover-bg: #4cc85e; --bs-btn-hover-border-color: #4cc85e;
  --bs-btn-hover-color: #04140a; --bs-btn-active-bg: #36a447; --bs-btn-active-color: #04140a;
}
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-color: #1a0405; --bs-btn-hover-bg: #ff7373; --bs-btn-hover-border-color: #ff7373;
  --bs-btn-hover-color: #1a0405; --bs-btn-active-bg: #e84a4a; --bs-btn-active-color: #1a0405;
}
[data-bs-theme="dark"] .btn-warning {
  --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning);
  --bs-btn-color: #1a1203; --bs-btn-hover-bg: #ffb53d; --bs-btn-hover-border-color: #ffb53d;
  --bs-btn-hover-color: #1a1203; --bs-btn-active-bg: #db9419; --bs-btn-active-color: #1a1203;
}
[data-bs-theme="dark"] .btn-info {
  --bs-btn-bg: var(--info); --bs-btn-border-color: var(--info);
  --bs-btn-color: #000000; --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff;
  --bs-btn-hover-color: #000000; --bs-btn-active-bg: var(--accent-active); --bs-btn-active-color: #000000;
}
/* Botón fantasma / sin relleno */
[data-bs-theme="dark"] .btn-link {
  --bs-btn-color: var(--accent-text);
  --bs-btn-hover-color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. FORMULARIOS — inputs, selects, textarea, switches, focus ring
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }
[data-bs-theme="dark"] .form-control:hover,
[data-bs-theme="dark"] .form-select:hover { border-color: var(--border-hover) !important; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--surface-2) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--focus-ring-soft) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .input-group-text { color: var(--text-secondary) !important; }

/* Checkboxes / radios / switches */
[data-bs-theme="dark"] .form-check-input {
  background-color: var(--surface-2) !important;
  border-color: var(--border-hover) !important;
}
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-bs-theme="dark"] .form-check-input:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--focus-ring-soft) !important;
}
/* En B&W el estado "on" es BLANCO, así que el check/punto/perilla van en NEGRO
   (si no, quedarían blanco-sobre-blanco e invisibles). */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e") !important;
}
[data-bs-theme="dark"] .form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a1a1aa'/%3e%3c/svg%3e") !important;
}
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e") !important;
}

/* Separadores y bordes utilitarios */
[data-bs-theme="dark"] hr { border-color: var(--border) !important; opacity: 1; }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-white,
[data-bs-theme="dark"] .border-light,
[data-bs-theme="dark"] .border-secondary {
  border-color: var(--border) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. TABLAS — fondo transparente (hereda la tarjeta), texto blanco, semánticos
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-hover-bg: var(--surface-hover);
  --bs-table-hover-color: var(--text-primary);
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
}
[data-bs-theme="dark"] .table > thead > tr > th,
[data-bs-theme="dark"] .table thead th {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border) !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: var(--surface-hover) !important;
}
/* Conserva señales semánticas en celdas (saldos, estados). */
[data-bs-theme="dark"] .table .text-danger  { color: var(--danger) !important; }
[data-bs-theme="dark"] .table .text-success { color: var(--success) !important; }
[data-bs-theme="dark"] .table .text-warning { color: var(--warning) !important; }
[data-bs-theme="dark"] .table .text-info    { color: var(--info) !important; }
[data-bs-theme="dark"] .table .text-primary { color: var(--accent-text) !important; }

/* Fix #cfdi-table: el striping heredado mete un box-shadow azul-gris. */
[data-bs-theme="dark"] #cfdi-table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  box-shadow: none !important;
}
[data-bs-theme="dark"] #cfdi-table { --bs-table-border-color: var(--border) !important; }
[data-bs-theme="dark"] #cfdi-table > thead > tr > * { color: var(--text-secondary) !important; }

/* Reportes de Tickets (#ticketsTable) y demás DataTables: el tema heredado
   pinta el striping y los bordes en azul-gris #465670, que se ve tosco y grueso.
   Lo pasamos a casi-negro (#1e1e1e) con líneas finas neutras (look Vercel). */
[data-bs-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  box-shadow: inset 0 0 0 9999px #1e1e1e !important;
}
[data-bs-theme="dark"] table.dataTable.table-bordered,
[data-bs-theme="dark"] .table-bordered > :not(caption) > *,
[data-bs-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: var(--border-subtle) !important;
}
[data-bs-theme="dark"] table.dataTable > tbody > tr:hover > * {
  background-color: var(--surface-hover) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. BADGES & PÍLDORAS DE ESTADO
   Píldoras suaves (fondo translúcido + texto de color) — patrón Vercel, legible.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .badge { font-weight: 600; letter-spacing: 0; }

[data-bs-theme="dark"] .badge.bg-success-subtle,
[data-bs-theme="dark"] .bg-success-subtle.text-success {
  background-color: var(--success-subtle) !important;
  color: var(--success) !important;
  border: 1px solid rgba(63, 185, 80, 0.30) !important;
}
[data-bs-theme="dark"] .badge.bg-danger-subtle,
[data-bs-theme="dark"] .bg-danger-subtle.text-danger {
  background-color: var(--danger-subtle) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(255, 92, 92, 0.30) !important;
}
[data-bs-theme="dark"] .badge.bg-warning-subtle,
[data-bs-theme="dark"] .bg-warning-subtle.text-warning {
  background-color: var(--warning-subtle) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(245, 166, 35, 0.30) !important;
}
[data-bs-theme="dark"] .badge.bg-primary-subtle,
[data-bs-theme="dark"] .bg-primary-subtle.text-primary,
[data-bs-theme="dark"] .badge.bg-info-subtle,
[data-bs-theme="dark"] .bg-info-subtle.text-info {
  background-color: var(--info-subtle) !important;
  color: var(--info) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-secondary-subtle {
  background-color: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
/* Badges sólidos: texto oscuro sobre color brillante (contraste) salvo el acento. */
[data-bs-theme="dark"] .badge.bg-primary { background-color: var(--surface-selected) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
[data-bs-theme="dark"] .badge.bg-success { background-color: var(--success) !important; color: #04140a !important; }
[data-bs-theme="dark"] .badge.bg-danger  { background-color: var(--danger) !important; color: #1a0405 !important; }
[data-bs-theme="dark"] .badge.bg-warning { background-color: var(--warning) !important; color: #1a1203 !important; }
[data-bs-theme="dark"] .badge.bg-info    { background-color: var(--surface-selected) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   12. DROPDOWNS & MENÚS
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
}
[data-bs-theme="dark"] .dropdown-item {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .dropdown-item.active,
[data-bs-theme="dark"] .dropdown-item:active {
  background-color: var(--accent-subtle) !important;
  color: #ffffff !important;
}
[data-bs-theme="dark"] .dropdown-item.text-danger { color: var(--danger) !important; }
[data-bs-theme="dark"] .dropdown-item.text-danger:hover,
[data-bs-theme="dark"] .dropdown-item.text-danger:focus {
  background-color: var(--danger-subtle) !important;
  color: #ff7d7d !important;
}
[data-bs-theme="dark"] .dropdown-item.disabled,
[data-bs-theme="dark"] .dropdown-item:disabled { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--border-subtle) !important; }
[data-bs-theme="dark"] .dropdown-header { color: var(--text-muted) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   13. MODALES & OFFCANVAS
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .offcanvas-header { border-bottom-color: var(--border-subtle) !important; }
[data-bs-theme="dark"] .modal-footer { border-top-color: var(--border-subtle) !important; }
[data-bs-theme="dark"] .modal-title { color: #ffffff !important; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: 0.65 !important; }
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(1.6);
  opacity: 0.55;
}
[data-bs-theme="dark"] .btn-close:hover { opacity: 0.9; }


/* ═══════════════════════════════════════════════════════════════════════════
   14. NAV TABS / PILLS, PAGINACIÓN, BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--border) !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  border: none !important;
  background: transparent !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background: transparent !important;
  border-bottom: 2px solid var(--accent) !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .nav-pills .nav-link:hover { color: var(--text-primary) !important; background: var(--surface-hover) !important; }
[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background: var(--surface-selected) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .page-link {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .page-link:hover {
  background-color: var(--surface-hover) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--surface-selected) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item a { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .breadcrumb-item.active { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   15. ALERTAS, TOASTS, PROGRESS, TOOLTIPS, POPOVERS, LIST-GROUP, ACORDEÓN
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .alert-success { background: var(--success-subtle) !important; border-color: rgba(63,185,80,0.30) !important; color: var(--success) !important; }
[data-bs-theme="dark"] .alert-danger  { background: var(--danger-subtle) !important; border-color: rgba(255,92,92,0.30) !important; color: var(--danger) !important; }
[data-bs-theme="dark"] .alert-warning { background: var(--warning-subtle) !important; border-color: rgba(245,166,35,0.30) !important; color: var(--warning) !important; }
[data-bs-theme="dark"] .alert-info,
[data-bs-theme="dark"] .alert-primary { background: var(--info-subtle) !important; border-color: rgba(50,145,255,0.30) !important; color: var(--info) !important; }

[data-bs-theme="dark"] .toast {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .toast-header { background: transparent !important; color: var(--text-secondary) !important; border-bottom-color: var(--border-subtle) !important; }

[data-bs-theme="dark"] .progress { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .progress-bar { background-color: var(--accent) !important; }

[data-bs-theme="dark"] .tooltip-inner {
  background: #1f1f23 !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
[data-bs-theme="dark"] .popover {
  background-color: var(--surface-3) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .popover-header { background: transparent !important; color: #fff !important; border-bottom-color: var(--border-subtle) !important; }
[data-bs-theme="dark"] .popover-body { color: var(--text-secondary) !important; }

[data-bs-theme="dark"] .list-group {
  --bs-list-group-bg: var(--surface);
  --bs-list-group-color: var(--text-primary);
  --bs-list-group-border-color: var(--border-subtle);
  --bs-list-group-action-hover-bg: var(--surface-hover);
  --bs-list-group-action-hover-color: var(--text-primary);
  --bs-list-group-active-bg: var(--surface-selected);
  --bs-list-group-active-border-color: var(--border-hover);
}
[data-bs-theme="dark"] .accordion {
  --bs-accordion-bg: var(--surface);
  --bs-accordion-color: var(--text-primary);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-color: var(--text-primary);
  --bs-accordion-active-bg: var(--surface-hover);
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-btn-focus-box-shadow: var(--focus-ring-soft);
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. SELECT2 (vendor) — alinear con inputs
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .select2-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .select2-results__option { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent) !important;
  box-shadow: var(--focus-ring-soft) !important;
}
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. TICKETS — lista, ítem seleccionado, panel de detalle
   El <style> de la página usa --sf-* (ya remapeados). Aquí solo reforzamos el
   estado "seleccionado" para que sea visible (superficie + barra de acento).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .chat-application { border-color: var(--border) !important; }
[data-bs-theme="dark"] .sf-ticket-item:hover,
[data-bs-theme="dark"] .ticket-link:hover,
[data-bs-theme="dark"] .ticket-item:hover { background: var(--surface-hover) !important; }
[data-bs-theme="dark"] .sf-ticket-item.selected-ticket {
  background: var(--surface-selected) !important;
}
[data-bs-theme="dark"] .sf-ticket-item.selected-ticket::before {
  background: var(--accent) !important;  /* barra izquierda = acento (era blanca) */
}

/* Botón "Nuevo ticket": usaba background:var(--sf-black)+color:#fff → en oscuro
   quedaba BLANCO sobre BLANCO (invisible). Se invierte a botón claro con texto
   negro (primario estilo Vercel), de alto contraste sobre el fondo negro. */
[data-bs-theme="dark"] .sf-btn-new-ticket {
  background: var(--text-primary) !important;
  color: #000000 !important;
}
[data-bs-theme="dark"] .sf-btn-new-ticket:hover,
[data-bs-theme="dark"] .sf-btn-new-ticket:focus {
  background: #d4d4d8 !important;
  color: #000000 !important;
}

/* ─── 17·a. Burbujas de mensaje (#ticketsTable .ticket-card) ──────────────────
   El cuerpo usaba --bs-gray-800 (#343a40, casi negro) sobre un fondo claro
   heredado → texto invisible sobre el recuadro. Se neutraliza la superficie
   (sin tinte índigo) y el texto sube a la escala B&N. */
[data-bs-theme="dark"] .ticket-card {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] .ticket-card--reply {
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
}
[data-bs-theme="dark"] .ticket-card__label { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .ticket-card__meta  { color: var(--text-muted) !important; }
/* El cuerpo del mensaje/respuesta de cloud.ejs y backup-tickets.ejs es HTML
   CRUDO del correo (<%- ticket.message %>), con estilos inline pensados para
   fondo CLARO: color oscuro (#1f2937…) y, a veces, fondo blanco/colorido. Sobre
   negro el texto "se pierde". Forzamos color claro y neutralizamos los fondos y
   bordes inline en TODOS los descendientes; los enlaces conservan el acento.
   (En all-tickets el mensaje ya es texto plano, así que esto no le afecta.) */
[data-bs-theme="dark"] .ticket-card__text,
[data-bs-theme="dark"] .ticket-card__text *,
[data-bs-theme="dark"] .ticket-message,
[data-bs-theme="dark"] .ticket-message *,
[data-bs-theme="dark"] .ticket-detail-rich-text,
[data-bs-theme="dark"] .ticket-detail-rich-text * {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .ticket-card__text a,
[data-bs-theme="dark"] .ticket-card__text a *,
[data-bs-theme="dark"] .ticket-message a,
[data-bs-theme="dark"] .ticket-message a *,
[data-bs-theme="dark"] .ticket-detail-rich-text a {
  color: var(--accent-text) !important;
}
/* backup-tickets.ejs: bloque meta con fondo claro inline (#f8f9fc) → superficie
   oscura. El inline no lleva !important en background, así que esta regla gana. */
[data-bs-theme="dark"] .chat-box .row.g-3.mb-2 {
  background: var(--surface-2) !important;
  border-radius: 10px;
}

/* ─── 17·b. Lista "Tickets por Proyecto" (#tpList) ────────────────────────────
   Encabezado en #000 (invisible) y nombres/horas en #6b7280 (muy tenue); los
   bordes #eef2f6 se veían como líneas casi blancas entre renglones. */
[data-bs-theme="dark"] .textp { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .tp-name .first,
[data-bs-theme="dark"] .tp-name .last,
[data-bs-theme="dark"] .tp-hours { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .tp-card .tp-subhead,
[data-bs-theme="dark"] .tp-muted { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .tp-item { border-color: var(--border) !important; }

/* ─── 17·c. Gráficas (ApexCharts) — texto legible sobre negro ─────────────────
   ApexCharts pinta leyenda y ejes con su gris por defecto (#373d3f), invisible
   sobre el fondo negro. NO se tocan los colores de las SERIES (las gráficas
   conservan color); solo el TEXTO, las rejillas y el tooltip pasan a B&N. */
[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-text tspan,
[data-bs-theme="dark"] .apexcharts-xaxis-label,
[data-bs-theme="dark"] .apexcharts-yaxis-label { fill: var(--text-muted) !important; }
[data-bs-theme="dark"] .apexcharts-legend-text { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .apexcharts-gridline { stroke: var(--border-subtle) !important; }
[data-bs-theme="dark"] .apexcharts-xaxis line,
[data-bs-theme="dark"] .apexcharts-yaxis line,
[data-bs-theme="dark"] .apexcharts-xaxis-tick { stroke: var(--border) !important; }
/* Tooltip: por defecto es claro (blanco) → destella sobre el dashboard negro. */
[data-bs-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55) !important;
}
[data-bs-theme="dark"] .apexcharts-tooltip-title {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom::before { border-bottom-color: var(--border) !important; }
[data-bs-theme="dark"] .apexcharts-xaxistooltip-bottom::after  { border-bottom-color: var(--surface-3) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   18. KANBAN — columnas y tarjetas
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .kanban-board,
[data-bs-theme="dark"] .kanban-column,
[data-bs-theme="dark"] [class*="kanban-col"] {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .kanban-item,
[data-bs-theme="dark"] .kanban-card,
[data-bs-theme="dark"] [class*="kanban"] .card {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .kanban-item:hover,
[data-bs-theme="dark"] .kanban-card:hover { border-color: var(--border-hover) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   19. PÍLDORAS DE ESTADO POR PÁGINA (clases globales con color codificado)
   Estas páginas definen <style> con colores claros y SIN variante oscura, así
   que se quedaban ilegibles. Se corrigen aquí de forma centralizada.
   ═══════════════════════════════════════════════════════════════════════════ */
/* email-settings.ejs */
[data-bs-theme="dark"] .status-created    { background: var(--success-subtle) !important; color: var(--success) !important; }
[data-bs-theme="dark"] .status-threaded   { background: var(--info-subtle) !important;    color: var(--info) !important; }
[data-bs-theme="dark"] .status-processing { background: var(--warning-subtle) !important; color: var(--warning) !important; }
[data-bs-theme="dark"] .status-error      { background: var(--danger-subtle) !important;  color: var(--danger) !important; }
[data-bs-theme="dark"] .status-duplicate,
[data-bs-theme="dark"] .status-oversize   { background: var(--surface-2) !important;      color: var(--text-secondary) !important; }

/* quote.ejs / quote-detail.ejs */
[data-bs-theme="dark"] .quote-status-pill.draft    { background: var(--warning-subtle) !important; color: var(--warning) !important; }
[data-bs-theme="dark"] .quote-status-pill.sent     { background: var(--info-subtle) !important;    color: var(--info) !important; }
[data-bs-theme="dark"] .quote-status-pill.expired,
[data-bs-theme="dark"] .quote-status-pill.rejected { background: var(--danger-subtle) !important;  color: var(--danger) !important; }
[data-bs-theme="dark"] .quote-status-pill.accepted { background: var(--success-subtle) !important; color: var(--success) !important; }
[data-bs-theme="dark"] .quote-table th { background: var(--surface-2) !important; color: var(--text-primary) !important; }

/* security-hub.ejs */
[data-bs-theme="dark"] .bg-cvss { background: var(--danger-subtle) !important;  color: var(--danger) !important; }
[data-bs-theme="dark"] .bg-epss { background: var(--success-subtle) !important; color: var(--success) !important; }

/* documents.ejs — dropzone y sidebar */
[data-bs-theme="dark"] .doc-dropzone { background: var(--surface) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .doc-dropzone.dragover { background: var(--accent-subtle) !important; border-color: var(--accent) !important; }
[data-bs-theme="dark"] .doc-sidebar .list-group-item.active { background: var(--surface-hover) !important; color: var(--text-primary) !important; border-color: var(--accent) !important; }
[data-bs-theme="dark"] .doc-icon-folder { background: var(--info-subtle) !important; color: var(--info) !important; }
[data-bs-theme="dark"] .doc-icon-file { background: var(--surface-2) !important; color: var(--text-secondary) !important; }

/* contacts.ejs — avatares y etiquetas */
[data-bs-theme="dark"] .contact-avatar { background: var(--info-subtle) !important; color: var(--info) !important; }
[data-bs-theme="dark"] .contact-details-empty,
[data-bs-theme="dark"] .contact-detail-label,
[data-bs-theme="dark"] .contact-detail-value-muted { color: var(--text-secondary) !important; }

/* notifications.ejs */
[data-bs-theme="dark"] .notification-title { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .notification-subtext { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .notification-dot { background: var(--text-muted) !important; }
[data-bs-theme="dark"] .notification-dot.is-unread { background: var(--accent) !important; }
[data-bs-theme="dark"] .notification-type { background: var(--surface-2) !important; color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .notification-pill { background: var(--info-subtle) !important; color: var(--info) !important; }

/* diagram.ejs */
[data-bs-theme="dark"] .diagram-info { background: var(--surface-2) !important; color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .diagram-empty .icon { background: var(--info-subtle) !important; color: var(--info) !important; }
[data-bs-theme="dark"] .diagram-name-link { color: var(--accent-text) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   20. ACCESIBILIDAD — anillo de foco global visible (WCAG 2.4.7 / 1.4.11)
   Solo en navegación por teclado (:focus-visible), sin molestar al ratón.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] a:focus-visible,
[data-bs-theme="dark"] button:focus-visible,
[data-bs-theme="dark"] .btn:focus-visible,
[data-bs-theme="dark"] .nav-link:focus-visible,
[data-bs-theme="dark"] .sidebar-link:focus-visible,
[data-bs-theme="dark"] .dropdown-item:focus-visible,
[data-bs-theme="dark"] .page-link:focus-visible,
[data-bs-theme="dark"] [tabindex]:focus-visible,
[data-bs-theme="dark"] .form-check-input:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm);
}
[data-bs-theme="dark"] :focus:not(:focus-visible) { outline: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   21. FIXES DE PÁGINAS PÚBLICAS (preservados) — landing, blog, cybersecurity
   Usan clases propias (no .card de Bootstrap), por lo que el remapeo global no
   las alcanza. Lenguaje Vercel: negro con marco blanco suave que aclara en hover.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Landing — tarjetas de features (.card-animated) */
[data-bs-theme="dark"] .card-animated {
  background-color: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  --bs-card-title-color: #ffffff;
}
[data-bs-theme="dark"] .card-animated h5,
[data-bs-theme="dark"] .card-animated h6 { color: #ffffff !important; }
[data-bs-theme="dark"] .card-animated p { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .card-animated:hover,
[data-bs-theme="dark"] .card-animated-link:hover .card-animated,
[data-bs-theme="dark"] .card-animated-link:focus-visible .card-animated {
  border-color: var(--border-hover) !important;
}

/* Landing — tarjetas de servicio estilo Vercel (.sf-feat-*): tarjeta negra
   definida por su borde; el inset de la ilustración ya es oscuro en ambos temas. */
[data-bs-theme="dark"] .sf-features-kicker { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .sf-features-title { color: #fafafa !important; }
[data-bs-theme="dark"] .sf-feat-card {
  background: linear-gradient(180deg, #0a0a0a, #000) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}
[data-bs-theme="dark"] .sf-feat-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .6) !important;
}
[data-bs-theme="dark"] .sf-feat-media {
  --ill-panel: #0c0d10; --ill-border: #2a2e36; --ill-line: #1c1f25;
  --ill-ink: #c9d1d9; --ill-muted: #5b6472; --ill-fill: #2a2e36;
  --syn-key: #ff7b9c; --syn-str: #7ee787; --syn-var: #79c0ff;
  background: radial-gradient(130% 120% at 50% -10%, rgba(59, 130, 246, .18), transparent 58%), #050608 !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .sf-feat-eyebrow { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .sf-feat-title { color: #fafafa !important; }
[data-bs-theme="dark"] .sf-feat-desc { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .sf-feat-desc code { background: var(--surface-3) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .sf-feat-link { color: #60a5fa !important; }
[data-bs-theme="dark"] .sf-feat-link:hover { color: #93c5fd !important; }
[data-bs-theme="dark"] .sf-cloud-chip { background: #ffffff !important; border-color: #e7ecf2 !important; }

/* Showcase de seguridad: encabezado en oscuro (el dashboard se mantiene claro,
   como captura de producto; el panel "Defensas en capas" ya es negro). */
[data-bs-theme="dark"] .sf-sec-title { color: #fafafa !important; }
[data-bs-theme="dark"] .sf-sec-lead { color: var(--text-secondary) !important; }

/* CTA final en oscuro */
[data-bs-theme="dark"] .sf-cta-inner { background: #0b0b0d !important; border-color: #1f2024 !important; }
[data-bs-theme="dark"] .sf-cta-inner::before,
[data-bs-theme="dark"] .sf-cta-inner::after { background-image: repeating-linear-gradient(to bottom, #24262b 0 7px, transparent 7px 14px) !important; }
[data-bs-theme="dark"] .sf-cta-title { color: #fafafa !important; }
[data-bs-theme="dark"] .sf-cta-btn--primary { background: #fafafa !important; color: #0b0b0d !important; }
[data-bs-theme="dark"] .sf-cta-btn--primary:hover { background: #fff !important; }
[data-bs-theme="dark"] .sf-cta-btn--ghost { background: transparent !important; color: #ededed !important; border-color: #2a2a2a !important; }
[data-bs-theme="dark"] .sf-cta-btn--ghost:hover { border-color: #555 !important; }

/* Blog — listado (/blog) */
[data-bs-theme="dark"] .blog-page { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .blog-kicker { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .blog-headline { color: #ffffff !important; }
[data-bs-theme="dark"] .blog-subtitle { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .grid-module::before,
[data-bs-theme="dark"] .grid-module::after {
  background:
    linear-gradient(rgba(255, 255, 255, 0.14) 0 0) center/1px 100% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 0) center/100% 1px no-repeat !important;
}
[data-bs-theme="dark"] .blog-filter-bar { border-bottom-color: var(--border) !important; }
[data-bs-theme="dark"] .filter-pill {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .filter-pill.is-active,
[data-bs-theme="dark"] .filter-pill:hover {
  background: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  color: var(--background) !important;
}
[data-bs-theme="dark"] .blog-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .blog-card:hover {
  background: var(--surface-hover) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-lg) !important;
}
[data-bs-theme="dark"] .blog-card-media,
[data-bs-theme="dark"] .neutral-placeholder {
  background: linear-gradient(145deg, #141416, #0e0e10) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .media-icon { background: var(--surface-2) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .blog-card-title a,
[data-bs-theme="dark"] .post-author { color: #ffffff !important; }
[data-bs-theme="dark"] .blog-card-summary { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .post-date,
[data-bs-theme="dark"] .blog-card-meta { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .post-tag {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .post-tag-product {
  background: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  color: var(--background) !important;
}
[data-bs-theme="dark"] .read-link { color: #ffffff !important; }
[data-bs-theme="dark"] .blog-empty { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .blog-empty i { color: var(--text-primary) !important; }

/* Blog estilo Vercel (modo oscuro) */
[data-bs-theme="dark"] .vblog .filter-pill { background: transparent !important; border: 0 !important; color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .vblog .filter-pill:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; }
[data-bs-theme="dark"] .vblog .filter-pill.is-active { background: #fafafa !important; color: #0b0b0d !important; }
[data-bs-theme="dark"] .vblog-search { background: var(--surface) !important; border-color: var(--border) !important; }
[data-bs-theme="dark"] .vblog-search input { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .vblog-grid { border-top-color: var(--border) !important; border-left-color: var(--border) !important; }
[data-bs-theme="dark"] .vblog .vblog-card { background: transparent !important; border-right-color: var(--border) !important; border-bottom-color: var(--border) !important; box-shadow: none !important; }
[data-bs-theme="dark"] .vblog .vblog-card:hover { background: var(--surface) !important; box-shadow: none !important; }
[data-bs-theme="dark"] .vblog-ico, [data-bs-theme="dark"] .vblog-title, [data-bs-theme="dark"] .vblog-author { color: #fafafa !important; }
[data-bs-theme="dark"] .vblog-desc { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .vblog-date, [data-bs-theme="dark"] .vblog-read { color: var(--text-muted) !important; }
[data-bs-theme="dark"] .vblog-avatar { background: #fafafa !important; color: #0b0b0d !important; }

/* Cybersecurity (/static-pages/cybersecurity) */
[data-bs-theme="dark"] .cybersecurity-subheading,
[data-bs-theme="dark"] .cybersecurity-metric-caption,
[data-bs-theme="dark"] .cybersecurity-pillar-card p,
[data-bs-theme="dark"] .cybersecurity-ops-card p { color: var(--text-secondary) !important; }
[data-bs-theme="dark"] .cybersecurity-pillar-card li,
[data-bs-theme="dark"] .cybersecurity-ops-card li,
[data-bs-theme="dark"] .cybersecurity-insight p,
[data-bs-theme="dark"] .cybersecurity-metric,
[data-bs-theme="dark"] .cybersecurity-metric strong,
[data-bs-theme="dark"] .cybersecurity-metric i,
[data-bs-theme="dark"] .cybersecurity-hero-card { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .cybersecurity-hero-card,
[data-bs-theme="dark"] .cybersecurity-pillar-card,
[data-bs-theme="dark"] .cybersecurity-ops-card,
[data-bs-theme="dark"] .cybersecurity-badge {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .cybersecurity-metric { background: var(--surface-2) !important; }
[data-bs-theme="dark"] .cybersecurity-insight {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(59, 130, 246, 0.10)) !important;
  border-color: var(--border) !important;
}
[data-bs-theme="dark"] .cybersecurity-pillar-card li i { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .cybersecurity-badge i { color: var(--text-primary) !important; }
[data-bs-theme="dark"] .cybersecurity-chip,
[data-bs-theme="dark"] .cybersecurity-insight .cybersecurity-chip {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .cybersecurity-hero-actions .btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fin del sistema de diseño oscuro de StackFire
   ═══════════════════════════════════════════════════════════════════════════ */