/* ═══════════════════════════════════════════════════════════════════════════
   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:      #151515;  /* fondo general del sitio                      */
  --surface:         #111111;  /* menús, sidebar, tarjetas y modales           */
  --surface-hover:   #1c1c1c;  /* hover sutil de superficies y filas           */
  --surface-card:    #1A1A19;  /* tarjetas y paneles: por encima del fondo     */
  --surface-2:       #20201F;  /* fondos de edición: inputs y área de escritura*/
  --surface-3:       #1c1c1b;  /* flotantes elevados (popover/tooltip)         */
  --surface-editor:  #20201F;  /* cromo del editor: mismo tono que la edición  */
  --surface-selected:#242423;  /* ítem de menú/fila SELECCIONADO               */

  /* — Bordes (neutros y ligeros, sin tinte azul/morado) ------------------- */
  --border-subtle:   #1f1f1e;  /* divisores internos casi invisibles           */
  --border:          #262624;  /* borde estándar, apenas perceptible          */
  --border-strong:   #2e2e2c;  /* borde de tarjeta (sin el tinte azul previo) */
  --border-hover:    #3a3a38;  /* borde en hover/focus                         */
  /* Orilla de los campos de formulario: una línea clara y fina (blanco a baja
     opacidad) en vez de un gris oscuro. Sobre #20201F se lee como un filo
     tenue y no como un marco: es lo que pidió el dueño, "casi blanca y fina".
     Se separa de --border a propósito, porque ese sigue sirviendo para la
     estructura (tarjetas, divisores), donde una línea clara sí pesaría. */
  --border-input:    rgba(255, 255, 255, 0.14);
  --border-input-hover: rgba(255, 255, 255, 0.24);

  /* — 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:       #3a3a38;  /* texto sobre relleno claro = gris, no 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 las familias --bs-, --sf- o --sf-dark- adopta el
   tema sin tocar su CSS individual. Va dentro de [data-bs-theme="dark"] para no
   afectar al modo claro (esas variables tienen valores claros propios).

   OJO: no escribir aquí un comodín pegado a una barra ("--bs-" + "*" + "/").
   Esa secuencia CIERRA el comentario, y el bloque de remapeo que sigue se
   parsea como basura y se descarta ENTERO. Fue así desde 1cffa6d1 (junio):
   el navegador cargaba la hoja, pero ni --sf-black ni --sf-white existían, así
   que cada <style> de página conservaba su paleta negra.
   ═══════════════════════════════════════════════════════════════════════════ */
[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: #2e2e2c; 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: 400;
}
[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: 400;
  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: 400;
}

/* 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: 400;
  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): usa el tono de superficie del
   sistema, no negro puro. Antes heredaba el azul legacy de _dark-enhancements
   y después se fijó a #000; ahora sigue el token como el resto de los menús. */
[data-bs-theme="dark"] .content-dd,
[data-bs-theme="dark"] .content-dd .profile-dropdown {
  background-color: var(--surface) !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-card);
  --bs-card-color: var(--text-primary);
  --bs-card-cap-bg: transparent;
  --bs-card-border-color: var(--border-strong);
  background-color: var(--surface-card) !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"] {
  /* Los fondos siguen la escala neutra de la sección 1, no negro puro: el negro
     absoluto endurecía la interfaz y hacía que cualquier borde se viera duro. */
  --bs-body-bg: var(--background) !important;
  --bs-secondary-bg: var(--surface-2) !important;
  --bs-tertiary-bg: var(--surface) !important;
  /* Bordes en gris neutro en lugar de blanco translúcido. Un rgba(255,255,255,.2)
     sobre el fondo equivale a ~#414141: demasiado contraste, y es lo que hacía
     que los contornos se vieran toscos. Los valores de la sección 1 son mucho
     más sutiles y no se re-declaran aquí para no volver a pisarlos. */
  --bs-border-color: var(--border) !important;
  --bs-border-color-translucent: var(--border) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. BOTONES — acento, contorno, claro, oscuro, semánticos + estados
   ═══════════════════════════════════════════════════════════════════════════ */
/* Primario / acento: relleno azul Vercel, texto blanco (4.6:1 AA). */
/* .btn-primary en oscuro = relleno blanco + texto negro (igual que en las páginas que
   cargan sf-design-system.css). Dos cosas necesarias:
   1) FALLBACK concreto en cada var() por si --accent/--on-accent no se resuelven en algún
      contexto (evita heredar el primario CLARO: #1d1d1f de fondo, texto #fff en hover).
   2) El segundo selector IGUALA la especificidad (0,4,0) de las reglas por tema de
      styles-portal.css ([data-bs-theme=dark][data-color-theme=X]:root .btn-primary, que
      fijan --bs-btn-bg:#1d1d1f / --bs-btn-hover-bg:#444444). El primer selector (0,2,0)
      no les ganaba aunque dark-theme.css cargue al final; con (0,4,0) empata y gana por
      orden de carga, sin !important y para cualquier data-color-theme. */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"][data-color-theme]:root .btn-primary {
  --bs-btn-bg: var(--accent, #fafafa);
  --bs-btn-border-color: var(--accent, #fafafa);
  --bs-btn-color: var(--on-accent, #3a3a38);
  --bs-btn-hover-bg: var(--accent-hover, #e4e4e7);
  --bs-btn-hover-border-color: var(--accent-hover, #e4e4e7);
  --bs-btn-hover-color: var(--on-accent, #3a3a38);
  --bs-btn-active-bg: var(--accent-active, #d4d4d8);
  --bs-btn-active-border-color: var(--accent-active, #d4d4d8);
  --bs-btn-active-color: var(--on-accent, #3a3a38);
  --bs-btn-disabled-bg: var(--surface-selected, #1f1f1f);
  --bs-btn-disabled-border-color: var(--border, #2a2a2a);
  --bs-btn-disabled-color: var(--text-muted, #a1a1aa);
}
/* 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: #3a3a38; --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff;
  --bs-btn-hover-color: #3a3a38; --bs-btn-active-bg: var(--accent-active); --bs-btn-active-color: #3a3a38;
}
/* 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-input) !important;
  border-width: 1px !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-input-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: 400;
}
[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: 400; 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-card);
  --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-card);
  --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": su <style> de página fija background:var(--sf-black)
   + color:#fff, y en oscuro --sf-black es el "negro" SEMÁNTICO (casi blanco),
   así que salía BLANCO SOBRE BLANCO. Se reconduce al mismo par de colores que
   .btn-gmail, el otro botón primario, para que ambos se vean igual. */
[data-bs-theme="dark"] .sf-btn-new-ticket {
  background: #f5f5f7 !important;
  color: #3a3a38 !important;
}
[data-bs-theme="dark"] .sf-btn-new-ticket:hover,
[data-bs-theme="dark"] .sf-btn-new-ticket:focus {
  background: #e5e5e7 !important;
  color: #2e2e2c !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-card) !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-card) !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-card) !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-card) !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
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   Editor de texto enriquecido (TinyMCE)
   ───────────────────────────────────────────────────────────────────────────
   styles-portal.css pinta el editor con el azul pizarra del tema oscuro de
   Modernize (#202936, línea 409). Aquí se reconduce a la misma escala de grises
   neutros del resto del modo oscuro, para que el editor no sea el único
   elemento azulado de la pantalla.

   Va en este archivo porque se carga DESPUÉS de styles-portal.css; desde
   styles.css perdería la cascada.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] .tox-tinymce,
[data-bs-theme="dark"] .tox .tox-toolbar,
[data-bs-theme="dark"] .tox .tox-toolbar__primary,
[data-bs-theme="dark"] .tox .tox-toolbar__overflow,
[data-bs-theme="dark"] .tox .tox-toolbar-overlord,
[data-bs-theme="dark"] .tox .tox-menubar,
[data-bs-theme="dark"] .tox:not(.tox-tinymce-inline) .tox-editor-header,
[data-bs-theme="dark"] .tox .tox-statusbar {
  background-color: var(--surface-editor) !important;
  border-color: var(--border) !important;
}

[data-bs-theme="dark"] .tox .tox-edit-area__iframe {
  background-color: var(--surface-2) !important;
}

/* El editor es, visualmente, un campo más: misma orilla clara y fina. */
[data-bs-theme="dark"] .tox-tinymce {
  border-color: var(--border-input) !important;
  border-width: 1px !important;
}

/* Menús flotantes (selector de formato, color, tabla). */
[data-bs-theme="dark"] .tox .tox-menu,
[data-bs-theme="dark"] .tox .tox-collection__item {
  background-color: var(--surface-3) !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .tox .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
  background-color: var(--surface-selected) !important;
  color: var(--text-primary) !important;
}

/* Botones de la barra: sin fondo propio, para que no dibujen cuadros sobre el
   cromo. El texto hereda el color del tema en lugar del gris azulado. */
[data-bs-theme="dark"] .tox .tox-tbtn {
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

[data-bs-theme="dark"] .tox .tox-tbtn:hover {
  background-color: var(--surface-hover) !important;
}

[data-bs-theme="dark"] .tox .tox-tbtn svg {
  fill: var(--text-primary) !important;
}