/* ============================================================================
   STREAMIFY THEMES — temas dinámicos sobre los tokens del sistema
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de streamify-ui.css y de themes.css.

   Cada tema redefine ÚNICAMENTE los tokens `--sf-*`. Las variables heredadas
   (--primary-color, --bg-card, --text-primary…) ya no se declaran por tema:
   la sección 0 las redirige a los tokens de una vez para todos, así que el
   chrome del panel sigue al tema sin duplicar valores.

   PATRÓN DE SELECTORES — importante:
     [data-theme="x"]:not([data-dark-mode="true"])  → variante clara
     [data-theme="x"][data-dark-mode="true"]        → variante oscura
   Ambos tienen especificidad (0,2,0) y el oscuro va después, así que gana
   cuando el modo oscuro está activo. Sin el `:not(...)` la variante clara
   pisaría los tokens oscuros de streamify-ui.css y el modo oscuro se rompería
   en cuanto hubiera un tema activo.

   QUÉ ES GLOBAL Y QUÉ ES PERSONAL:
     - El TEMA lo fija el administrador en /admin/sistema y lo ve todo el
       mundo: empleados en cualquier dispositivo y clientes en el sitio
       público.
     - El MODO CLARO / OSCURO es de cada persona. Por defecto sigue al sistema
       operativo, igual que cualquier aplicación. Lo resuelve
       partials/apariencia-esquema.blade.php antes del primer pintado.
   ========================================================================== */

/* ==========================================================================
   0. PUENTE DE VARIABLES HEREDADAS  ← la pieza que hace que el tema llegue
      a TODO el panel
   --------------------------------------------------------------------------
   El chrome del panel (sidebar.css, navbar.css, enhanced-table-global.css,
   modal-system.v2.css, styles.css) no conoce los tokens `--sf-*`: lee las
   variables antiguas que definía themes.css (--primary-color, --bg-card,
   --text-primary, --border-color…). Por eso, hasta ahora, cambiar de tema no
   movía ni la barra lateral, ni la superior, ni las tablas, ni los modales.

   En vez de reescribir esos ~2000 renglones de CSS, aquí se REDIRIGEN las
   variables antiguas a los tokens del sistema. Como las custom properties se
   resuelven en el momento de usarse, cada componente heredado pasa a seguir
   automáticamente el tema activo y el modo oscuro, sin tocar su código.

   Lleva `!important` a propósito: themes.css declara varias de estas mismas
   variables con `!important` dentro de su bloque [data-dark-mode="true"], y
   si no ganáramos aquí el panel se quedaría con su gris fijo de siempre en
   lugar de los colores del tema.

   Consecuencia: los tokens `--sf-*` son la ÚNICA fuente de verdad de color.
   ========================================================================== */
:root,
[data-theme],
[data-dark-mode="true"] {
    /* Marca */
    --primary-color:    var(--sf-brand) !important;
    --primary-dark:     var(--sf-brand-strong) !important;
    --primary-light:    var(--sf-brand-soft) !important;
    --primary-gradient: linear-gradient(135deg, var(--sf-brand) 0%, var(--sf-brand-strong) 100%) !important;
    --secondary-color:  var(--sf-ink) !important;
    --secondary-light:  var(--sf-ink-secondary) !important;
    --accent-color:     var(--sf-gold) !important;

    /* Estado */
    --success-color: var(--sf-good) !important;
    --danger-color:  var(--sf-critical) !important;
    --warning-color: var(--sf-warning) !important;
    --info-color:    var(--sf-info) !important;

    /* Superficies */
    --bg-body:       var(--sf-surface-page) !important;
    --bg-card:       var(--sf-surface-card) !important;
    --bg-light:      var(--sf-surface-sunken) !important;
    --bg-overlay:    var(--sf-surface-card) !important;
    --bg-table-odd:  var(--sf-surface-sunken) !important;
    --bg-table-even: var(--sf-surface-card) !important;
    --bg-hover:      var(--sf-brand-soft) !important;

    /* Tinta */
    --text-primary:    var(--sf-ink) !important;
    --text-secondary:  var(--sf-ink-secondary) !important;
    --text-muted:      var(--sf-ink-muted) !important;
    --text-on-primary: var(--sf-brand-contrast) !important;

    /* Bordes y sombras */
    --border-color:   var(--sf-border) !important;
    --border-primary: var(--sf-brand) !important;
    --shadow-sm:      var(--sf-shadow-sm) !important;
    --shadow-md:      var(--sf-shadow) !important;
    --shadow-lg:      var(--sf-shadow-lg) !important;
    --shadow-hover:   var(--sf-shadow) !important;

    /* Bootstrap: themes.css las fija con !important en su bloque oscuro y
       dejaba el panel en un gris que ignoraba el tema. */
    --bs-body-bg:                  var(--sf-surface-page) !important;
    --bs-body-color:               var(--sf-ink) !important;
    --bs-border-color:             var(--sf-border) !important;
    --bs-border-color-translucent: var(--sf-border) !important;
    --bs-secondary-bg:             var(--sf-surface-sunken) !important;
    --bs-tertiary-bg:              var(--sf-surface-sunken) !important;
    --bs-emphasis-color:           var(--sf-ink) !important;
    --bs-link-color:               var(--sf-brand) !important;
    --bs-link-hover-color:         var(--sf-brand-strong) !important;
}

/* ==========================================================================
   1. COBERTURA UNIVERSAL DE MODO OSCURO
   --------------------------------------------------------------------------
   streamify-ui.css ya vuelve oscuros los componentes que usan tokens. Aquí se
   cubren las utilidades de Bootstrap con color incrustado que siguen vivas en
   las vistas legacy — sobre todo en las públicas, que nunca tuvieron modo
   oscuro. Sin esto quedan islas blancas sobre fondo negro.
   ========================================================================== */
/* Igual que en streamify-ui.css: no tocar las que llevan bg-opacity-*, o se
   pierde el modificador de opacidad de Bootstrap. */
[data-dark-mode="true"] .bg-white:not([class*="bg-opacity"]),
[data-dark-mode="true"] .bg-body:not([class*="bg-opacity"]),
[data-dark-mode="true"] .bg-body-tertiary:not([class*="bg-opacity"]) {
    background-color: var(--sf-surface-card) !important;
    color: var(--sf-ink);
}

[data-dark-mode="true"] .bg-light:not([class*="bg-opacity"]) {
    background-color: var(--sf-surface-sunken) !important;
    color: var(--sf-ink);
}

[data-dark-mode="true"] .text-dark,
[data-dark-mode="true"] .text-black,
[data-dark-mode="true"] .text-body {
    color: var(--sf-ink) !important;
}

[data-dark-mode="true"] .text-muted,
[data-dark-mode="true"] .text-secondary {
    color: var(--sf-ink-secondary) !important;
}

[data-dark-mode="true"] .border,
[data-dark-mode="true"] .border-top,
[data-dark-mode="true"] .border-bottom,
[data-dark-mode="true"] .border-start,
[data-dark-mode="true"] .border-end {
    border-color: var(--sf-border) !important;
}

/* Superficies estructurales de ambos layouts */
[data-dark-mode="true"] body,
[data-dark-mode="true"] main,
[data-dark-mode="true"] #layoutSidenav_content,
[data-dark-mode="true"] .masthead {
    background-color: var(--sf-surface-page);
    color: var(--sf-ink);
}

/* Secciones del sitio público: cada contenedor sigue su token, no un color fijo */
[data-dark-mode="true"] .sf-section { background-color: var(--sf-surface-page); }
[data-dark-mode="true"] .sf-section--sunken { background-color: var(--sf-surface-sunken); }
[data-dark-mode="true"] .sf-panel,
[data-dark-mode="true"] .sf-card,
[data-dark-mode="true"] .sf-kpi,
[data-dark-mode="true"] .combo-card,
[data-dark-mode="true"] .social-link,
[data-dark-mode="true"] .media-frame,
[data-dark-mode="true"] .platform-chip,
[data-dark-mode="true"] .hero-figure {
    background-color: var(--sf-surface-card);
    border-color: var(--sf-border);
    color: var(--sf-ink);
}

/* Las variantes de acento deben SEGUIR destacando en oscuro. La regla general
   de arriba las igualaría a una tarjeta normal y perderían su jerarquía. */
[data-dark-mode="true"] .sf-panel--accent,
[data-dark-mode="true"] .sf-kpi--primary {
    background-color: var(--sf-brand-soft);
    border-color: var(--sf-brand);
}

/* El hero usa degradados de acento: en oscuro se atenúan para no vibrar. */
[data-dark-mode="true"] .hero {
    background:
        radial-gradient(60rem 32rem at 82% -10%, var(--sf-brand-soft), transparent 70%),
        radial-gradient(44rem 26rem at 6% 108%, var(--sf-gold-soft), transparent 72%),
        var(--sf-surface-page);
    border-bottom-color: var(--sf-border);
}

/* Imágenes de producto sobre fondo oscuro: se bajan un punto para no deslumbrar. */
[data-dark-mode="true"] .media-frame img,
[data-dark-mode="true"] .combo-card img { filter: brightness(0.92); }

/* Los bloques que YA son oscuros por diseño no deben "oscurecerse" otra vez. */
[data-dark-mode="true"] .sf-section--inverse {
    background-color: #000;
}

/* Barra pública y footer */
[data-dark-mode="true"] #mainNav {
    background-color: var(--sf-surface-card);
    border-bottom-color: var(--sf-border);
}
[data-dark-mode="true"] #pie { background-color: #0d0c10 !important; }

/* Sidebar y navbar del panel */
[data-dark-mode="true"] .sidebar,
[data-dark-mode="true"] #layoutSidenav_nav,
[data-dark-mode="true"] .sb-sidenav {
    background-color: var(--sf-surface-card);
    border-right: 1px solid var(--sf-border);
}

/* Select2 y otros widgets de terceros que quedan blancos */
[data-dark-mode="true"] .select2-container--default .select2-selection--single,
[data-dark-mode="true"] .select2-container--default .select2-selection--multiple,
[data-dark-mode="true"] .select2-dropdown {
    background-color: var(--sf-surface-card) !important;
    border-color: var(--sf-border-strong) !important;
    color: var(--sf-ink) !important;
}

/* ==========================================================================
   1b. CHROME DEL PANEL — barra superior, barra lateral, tablas y modales
   --------------------------------------------------------------------------
   El puente de la sección 0 ya hace que todo lo que lee variables heredadas
   siga al tema. Aquí se rematan los sitios donde navbar.css y sidebar.css
   escribieron colores a pelo (y con `!important`), que por eso se quedaban
   fuera del tema: sobre todo sus propios bloques de modo oscuro.

   Se usa `!important` porque hay que ganarle a un `!important` previo; la
   especificidad es la misma y este archivo se carga después.
   ========================================================================== */

/* --- Barra superior ------------------------------------------------------ */
/* La barra lleva el degradado de marca de fondo pero no fijaba color de texto,
   así que heredaba la tinta oscura del body: texto oscuro sobre color fuerte.
   Todo lo que va dentro usa el color de contraste del tema. */
.sb-topnav,
.sb-topnav .navbar-text,
.sb-topnav .dropdown-toggle {
    color: var(--sf-brand-contrast) !important;
}

[data-dark-mode="true"] .sb-topnav {
    background: linear-gradient(135deg, var(--sf-surface-card) 0%, var(--sf-surface-sunken) 100%) !important;
    border-bottom-color: var(--sf-border) !important;
}
/* En oscuro la barra ya no lleva el color de marca de fondo, sino una
   superficie oscura: el texto vuelve a la tinta normal. */
[data-dark-mode="true"] .sb-topnav,
[data-dark-mode="true"] .navbar-brand,
[data-dark-mode="true"] .sb-topnav .nav-link,
[data-dark-mode="true"] .sb-topnav .navbar-text,
[data-dark-mode="true"] .sb-topnav .dropdown-toggle {
    color: var(--sf-ink) !important;
}

/* Botones de la barra superior: seguían un azul grisáceo fijo en oscuro. */
[data-dark-mode="true"] .navbar-icon-btn,
[data-dark-mode="true"] .navbar-user-btn,
[data-dark-mode="true"] .navbar-user-pill,
[data-dark-mode="true"] #sidebarToggle,
[data-dark-mode="true"] .btn-navbar-menu {
    background-color: var(--sf-surface-sunken) !important;
    border-color: var(--sf-border) !important;
    color: var(--sf-ink) !important;
}
[data-dark-mode="true"] .navbar-icon-btn:hover,
[data-dark-mode="true"] .navbar-user-btn:hover,
[data-dark-mode="true"] .navbar-user-pill:hover,
[data-dark-mode="true"] #sidebarToggle:hover,
[data-dark-mode="true"] .btn-navbar-menu:hover {
    background-color: var(--sf-brand-soft) !important;
    border-color: var(--sf-brand) !important;
    color: var(--sf-brand) !important;
}
[data-dark-mode="true"] .navbar-mobile-menu,
[data-dark-mode="true"] .navbar .dropdown-menu {
    background-color: var(--sf-surface-card) !important;
    border-color: var(--sf-border) !important;
}
[data-dark-mode="true"] .navbar .dropdown-item {
    color: var(--sf-ink) !important;
}
[data-dark-mode="true"] .navbar .dropdown-item:hover,
[data-dark-mode="true"] .navbar-mobile-menu .dropdown-item:hover {
    background-color: var(--sf-brand-soft) !important;
    color: var(--sf-brand) !important;
}
[data-dark-mode="true"] .navbar .dropdown-divider {
    border-color: var(--sf-border-soft) !important;
}

/* --- Barra lateral ------------------------------------------------------- */
/* Los encabezados de sección y los enlaces anidados llevaban gris fijo. */
.sb-sidenav-menu-heading,
.white-sidebar .sb-sidenav-menu-heading {
    color: var(--sf-ink-muted) !important;
}
.sb-sidenav-menu-nested .nav-link,
.white-sidebar .nav-link {
    color: var(--sf-ink-secondary) !important;
}
.sb-sidenav-menu-nested .nav-link:hover,
.white-sidebar .nav-link:hover {
    color: var(--sf-brand) !important;
    background: var(--sf-brand-soft) !important;
}
.white-sidebar {
    background: var(--sf-surface-card) !important;
}
.white-sidebar .nav-link.active {
    background: var(--sf-brand) !important;
    color: var(--sf-brand-contrast) !important;
}
.white-sidebar .sb-nav-link-icon {
    color: var(--sf-brand) !important;
}
.sb-sidenav-collapse-arrow,
.white-sidebar .sb-sidenav-collapse-arrow {
    color: var(--sf-ink-muted) !important;
}

[data-dark-mode="true"] .sidebar,
[data-dark-mode="true"] .sb-sidenav,
[data-dark-mode="true"] #layoutSidenav_nav {
    background-color: var(--sf-surface-card) !important;
    border-right-color: var(--sf-border) !important;
}
[data-dark-mode="true"] .sb-sidenav-footer {
    background-color: var(--sf-surface-sunken) !important;
    color: var(--sf-ink-secondary) !important;
    border-top-color: var(--sf-border) !important;
}

/* sidebar.css fija en su bloque oscuro una paleta azul pizarra completa
   (#5a6a7e, #94a3b8, #4b6584, degradado #1e40af…) con !important y
   especificidad (0,2,0). Hay que igualarla selector por selector, o la barra
   lateral se queda en ese azul sin importar el tema elegido. */
[data-dark-mode="true"] .sb-sidenav-menu-heading {
    color: var(--sf-ink-muted) !important;
}
[data-dark-mode="true"] .sidebar .nav-link,
[data-dark-mode="true"] .sb-sidenav .nav-link,
[data-dark-mode="true"] .sb-sidenav-menu-nested .nav-link {
    color: var(--sf-ink-secondary) !important;
}
[data-dark-mode="true"] .sidebar .nav-link:hover,
[data-dark-mode="true"] .sb-sidenav .nav-link:hover {
    background: var(--sf-brand-soft) !important;
    color: var(--sf-brand) !important;
    border-left-color: var(--sf-brand) !important;
}
[data-dark-mode="true"] .sidebar .nav-link.active,
[data-dark-mode="true"] .sb-sidenav .nav-link.active {
    background: var(--sf-brand) !important;
    color: var(--sf-brand-contrast) !important;
    border-left-color: var(--sf-brand-strong) !important;
    box-shadow: none !important;
}
[data-dark-mode="true"] .sb-nav-link-icon,
[data-dark-mode="true"] .sb-sidenav-collapse-arrow {
    color: var(--sf-ink-muted) !important;
}
[data-dark-mode="true"] .sb-sidenav .nav-link:hover .sb-nav-link-icon {
    color: var(--sf-brand) !important;
}
[data-dark-mode="true"] .sb-sidenav .nav-link.active .sb-nav-link-icon {
    color: var(--sf-brand-contrast) !important;
}
/* Las variantes de barra lateral heredadas (white/blue/dark/orange/…) también
   se fijaban a #0f1318 en oscuro. */
[data-dark-mode="true"] .white-sidebar,
[data-dark-mode="true"] .blue-sidebar,
[data-dark-mode="true"] .dark-sidebar,
[data-dark-mode="true"] .orange-sidebar,
[data-dark-mode="true"] .yellow-sidebar,
[data-dark-mode="true"] .green-sidebar,
[data-dark-mode="true"] .purple-sidebar,
[data-dark-mode="true"] .inverted-blue-sidebar {
    background-color: var(--sf-surface-card) !important;
}

/* Enlace activo de la barra lateral: el degradado del tema, en ambos modos. */
.sidebar .nav-link.active,
.sb-sidenav .nav-link.active,
[data-dark-mode="true"] .sb-sidenav .nav-link.active {
    background: var(--sf-brand) !important;
    color: var(--sf-brand-contrast) !important;
    border-left-color: var(--sf-brand-strong) !important;
}
.sb-sidenav .nav-link.active .sb-nav-link-icon,
[data-dark-mode="true"] .sb-sidenav .nav-link.active .sb-nav-link-icon {
    color: var(--sf-brand-contrast) !important;
}

/* --- Tablas mejoradas y modales ----------------------------------------- */
[data-dark-mode="true"] .enhanced-table-wrapper,
[data-dark-mode="true"] .enhanced-table-controls,
[data-dark-mode="true"] .modal-content,
[data-dark-mode="true"] .modal-header,
[data-dark-mode="true"] .modal-footer {
    background-color: var(--sf-surface-card) !important;
    border-color: var(--sf-border) !important;
    color: var(--sf-ink) !important;
}
[data-dark-mode="true"] .table > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--sf-surface-sunken) !important;
    color: var(--sf-ink) !important;
}
[data-dark-mode="true"] .table > tbody > tr:hover > * {
    background-color: var(--sf-brand-soft) !important;
}

/* --- Utilidades de estado en modo oscuro --------------------------------
   themes.css fija en oscuro un ámbar propio (#3a2f12 / #d6a83f) para
   .bg-warning, .badge.bg-warning, .alert-warning, .text-warning y
   .btn-warning, con !important y especificidad (0,2,0). Se redirige a los
   tokens para que no haya dos amarillos distintos conviviendo.
   ------------------------------------------------------------------------ */
[data-dark-mode="true"] .bg-warning,
[data-dark-mode="true"] .badge.bg-warning,
[data-dark-mode="true"] .alert-warning {
    background-color: var(--sf-warning-soft) !important;
    color: var(--sf-warning) !important;
    border-color: var(--sf-warning) !important;
}
[data-dark-mode="true"] .text-warning,
[data-dark-mode="true"] .border-warning {
    color: var(--sf-warning) !important;
    border-color: var(--sf-warning) !important;
}
[data-dark-mode="true"] .btn-warning {
    background-color: var(--sf-warning) !important;
    border-color: var(--sf-warning) !important;
    color: var(--sf-gold-contrast) !important;
}
[data-dark-mode="true"] .text-success { color: var(--sf-good) !important; }
[data-dark-mode="true"] .text-danger  { color: var(--sf-critical) !important; }
[data-dark-mode="true"] .text-info    { color: var(--sf-info) !important; }
[data-dark-mode="true"] .text-primary { color: var(--sf-brand) !important; }

/* --- Tarjetas KPI en modo oscuro ----------------------------------------
   themes.css declara `[data-dark-mode="true"] .card { background/color …
   !important }` con especificidad (0,2,0). Como las tarjetas KPI llevan
   también la clase .card, esa regla les borraba el fondo y el color de
   acento y las dejaba a todas iguales, grises. Hay que igualar la
   especificidad para devolverles su tinte.
   ------------------------------------------------------------------------ */
[data-dark-mode="true"] .kpi-green,
[data-dark-mode="true"] .kpi-red,
[data-dark-mode="true"] .kpi-orange,
[data-dark-mode="true"] .kpi-yellow,
[data-dark-mode="true"] .kpi-blue,
[data-dark-mode="true"] .kpi-teal,
[data-dark-mode="true"] .kpi-indigo,
[data-dark-mode="true"] .kpi-purple,
[data-dark-mode="true"] .kpi-amber {
    background: var(--sf-kpi-bg) !important;
    color: var(--sf-kpi-ink) !important;
    border-color: transparent !important;
}
[data-dark-mode="true"] .kpi-green .kpi-icon,
[data-dark-mode="true"] .kpi-red .kpi-icon,
[data-dark-mode="true"] .kpi-orange .kpi-icon,
[data-dark-mode="true"] .kpi-yellow .kpi-icon,
[data-dark-mode="true"] .kpi-blue .kpi-icon,
[data-dark-mode="true"] .kpi-teal .kpi-icon,
[data-dark-mode="true"] .kpi-indigo .kpi-icon,
[data-dark-mode="true"] .kpi-purple .kpi-icon,
[data-dark-mode="true"] .kpi-amber .kpi-icon {
    background: var(--sf-kpi-chip) !important;
    color: var(--sf-kpi-ink) !important;
}
/* El valor y la etiqueta heredan el acento, no la tinta genérica. */
[data-dark-mode="true"] [class*="kpi-"] .kpi-value,
[data-dark-mode="true"] [class*="kpi-"] .kpi-label,
[data-dark-mode="true"] [class*="kpi-"] .kpi-val,
[data-dark-mode="true"] [class*="kpi-"] .kpi-sub {
    color: inherit !important;
}

/* --- Contenedores de las plantillas static / table ---------------------- */
[data-dark-mode="true"] .breadcrumb,
[data-dark-mode="true"] .card-header,
[data-dark-mode="true"] .card-footer,
[data-dark-mode="true"] .list-group-item,
[data-dark-mode="true"] .accordion-item,
[data-dark-mode="true"] .offcanvas,
[data-dark-mode="true"] .toast,
[data-dark-mode="true"] .popover,
[data-dark-mode="true"] .tooltip-inner {
    background-color: var(--sf-surface-card) !important;
    border-color: var(--sf-border) !important;
    color: var(--sf-ink) !important;
}
[data-dark-mode="true"] .form-control,
[data-dark-mode="true"] .form-select,
[data-dark-mode="true"] .input-group-text {
    background-color: var(--sf-surface-page) !important;
    border-color: var(--sf-border-strong) !important;
    color: var(--sf-ink) !important;
}

/* ==========================================================================
   2. TEMAS
   ========================================================================== */

/* --- default: la marca Streamify. Los tokens base ya son este tema, así que
       solo se declara la variante oscura para dejar constancia. ------------ */

/* --- Medianoche: oscuro permanente, sobrio ------------------------------- */
[data-theme="midnight"]:not([data-dark-mode="true"]),
[data-theme="midnight"][data-dark-mode="true"] {
    --sf-brand: #8ba3f0;
    --sf-brand-strong: #a8bbf5;
    --sf-brand-soft: #1e2440;
    --sf-brand-contrast: #0d1020;
    --sf-gold: #f0c435;
    --sf-gold-strong: #f7d668;
    --sf-gold-soft: #38300f;
    --sf-gold-contrast: #16150e;
    --sf-red: #f07276;
    --sf-red-soft: #3a191b;

    --sf-surface-page: #101018;
    --sf-surface-card: #191924;
    --sf-surface-sunken: #21212e;
    --sf-surface-inverse: #08080d;

    --sf-ink: #eceaf3;
    --sf-ink-secondary: #b3b0c2;
    --sf-ink-muted: #83809a;
    --sf-ink-inverse: #eceaf3;

    --sf-border: #2e2e3d;
    --sf-border-soft: #262633;
    --sf-border-strong: #414055;

    --sf-good-soft: #10301e;
    --sf-warning-soft: #33290f;
    --sf-critical-soft: #381819;
    --sf-info-soft: #132738;

}

/* --- Neón: violeta y cian eléctrico -------------------------------------- */
[data-theme="neon"]:not([data-dark-mode="true"]) {
    --sf-brand: #7c3aed;
    --sf-brand-strong: #6425d0;
    --sf-brand-soft: #f1e9fe;
    --sf-gold: #06b6d4;
    --sf-gold-strong: #0891b2;
    --sf-gold-soft: #e0f7fb;
    --sf-gold-contrast: #06222a;
    --sf-red: #f43f7e;
    --sf-red-strong: #d61f61;
    --sf-red-soft: #fde8f0;

    --sf-surface-page: #fbfaff;
    --sf-surface-card: #ffffff;
    --sf-surface-sunken: #f4f1fd;
    --sf-surface-inverse: #1a0f2e;

    --sf-ink: #1a1030;
    --sf-ink-secondary: #574a6e;
    --sf-ink-muted: #8b7fa5;

    --sf-border: #e6dff7;
    --sf-border-soft: #efeafb;
    --sf-border-strong: #d3c6ef;

}
[data-theme="neon"][data-dark-mode="true"] {
    --sf-brand: #b794f6;
    --sf-brand-strong: #cbb2fa;
    --sf-brand-soft: #2b1b4d;
    --sf-brand-contrast: #14092b;
    --sf-gold: #22d3ee;
    --sf-gold-strong: #67e8f9;
    --sf-gold-soft: #0d3944;
    --sf-gold-contrast: #04181d;
    --sf-red: #fb7bab;
    --sf-red-soft: #3d1229;

    --sf-surface-page: #140d24;
    --sf-surface-card: #1f1636;
    --sf-surface-sunken: #281c44;
    --sf-surface-inverse: #0a0514;

    --sf-ink: #f0eafc;
    --sf-ink-secondary: #bcaddb;
    --sf-ink-muted: #8b7cb0;

    --sf-border: #372a56;
    --sf-border-soft: #2e2348;
    --sf-border-strong: #4c3b74;

}

/* --- Océano: azules profundos y turquesa --------------------------------- */
[data-theme="oceano"]:not([data-dark-mode="true"]) {
    --sf-brand: #0369a1;
    --sf-brand-strong: #025582;
    --sf-brand-soft: #e2f2fb;
    --sf-gold: #0d9488;
    --sf-gold-strong: #0b7c72;
    --sf-gold-soft: #dff5f2;
    --sf-gold-contrast: #ffffff;

    --sf-surface-page: #f8fbfd;
    --sf-surface-card: #ffffff;
    --sf-surface-sunken: #eef6fa;
    --sf-surface-inverse: #062b3f;

    --sf-ink: #0b2432;
    --sf-ink-secondary: #4a6472;
    --sf-ink-muted: #7d95a1;

    --sf-border: #d8e7ef;
    --sf-border-soft: #e6f0f6;
    --sf-border-strong: #bcd4e1;

}
[data-theme="oceano"][data-dark-mode="true"] {
    --sf-brand: #5eb8e8;
    --sf-brand-strong: #86ccf0;
    --sf-brand-soft: #10344a;
    --sf-brand-contrast: #041a27;
    --sf-gold: #2dd4bf;
    --sf-gold-strong: #5eead4;
    --sf-gold-soft: #0b3b37;
    --sf-gold-contrast: #04211e;

    --sf-surface-page: #0a1a24;
    --sf-surface-card: #122734;
    --sf-surface-sunken: #183241;
    --sf-surface-inverse: #04121a;

    --sf-ink: #e4f1f7;
    --sf-ink-secondary: #a9c3d0;
    --sf-ink-muted: #7893a3;

    --sf-border: #23404f;
    --sf-border-soft: #1c3441;
    --sf-border-strong: #345666;

}

/* --- Fiestas Patrias (Ecuador) ------------------------------------------- */
[data-theme="patrias"]:not([data-dark-mode="true"]) {
    --sf-brand: #0033a0;
    --sf-brand-strong: #002678;
    --sf-brand-soft: #e5ebf7;
    --sf-gold: #ffd100;
    --sf-gold-strong: #d9b100;
    --sf-gold-soft: #fff8db;
    --sf-gold-contrast: #1d1d1b;
    --sf-red: #ef3340;
    --sf-red-strong: #cb1f2b;
    --sf-red-soft: #fdeaeb;

    --sf-surface-page: #fffdf5;
    --sf-surface-card: #ffffff;
    --sf-surface-sunken: #fff8e3;
    --sf-surface-inverse: #14213d;

    --sf-ink: #1a1a1a;
    --sf-ink-secondary: #55565a;
    --sf-ink-muted: #8a8b90;

    --sf-border: #ebe4cd;
    --sf-border-soft: #f3eddc;
    --sf-border-strong: #d8cfae;

}
[data-theme="patrias"][data-dark-mode="true"] {
    --sf-brand: #7d9ceb;
    --sf-brand-strong: #9db4f1;
    --sf-brand-soft: #1a2745;
    --sf-brand-contrast: #0b1226;
    --sf-gold: #ffd94d;
    --sf-gold-strong: #ffe57a;
    --sf-gold-soft: #3d3208;
    --sf-gold-contrast: #17150a;
    --sf-red: #f4737d;
    --sf-red-soft: #3d1a1d;

    --sf-surface-page: #14151c;
    --sf-surface-card: #1e2029;
    --sf-surface-sunken: #262934;
    --sf-surface-inverse: #0b0d14;

    --sf-ink: #eeecea;
    --sf-ink-secondary: #b5b3af;
    --sf-ink-muted: #888681;

    --sf-border: #33353f;
    --sf-border-soft: #2b2d36;
    --sf-border-strong: #464956;

}

/* --- Halloween ----------------------------------------------------------- */
[data-theme="halloween"]:not([data-dark-mode="true"]) {
    --sf-brand: #6a0dad;
    --sf-brand-strong: #540a8a;
    --sf-brand-soft: #f0e6f9;
    --sf-gold: #ff7518;
    --sf-gold-strong: #dd5f0c;
    --sf-gold-soft: #fff0e4;
    --sf-gold-contrast: #1d1207;

    --sf-surface-page: #fdfaf6;
    --sf-surface-card: #ffffff;
    --sf-surface-sunken: #f7f0e8;
    --sf-surface-inverse: #140c1c;

    --sf-ink: #1f1526;
    --sf-ink-secondary: #5a4a63;
    --sf-ink-muted: #8d7f95;

    --sf-border: #ebe0d5;
    --sf-border-soft: #f3ebe2;
    --sf-border-strong: #d5c6b7;

}
[data-theme="halloween"][data-dark-mode="true"] {
    --sf-brand: #c084fc;
    --sf-brand-strong: #d5aafd;
    --sf-brand-soft: #2c1642;
    --sf-brand-contrast: #150a20;
    --sf-gold: #ff9040;
    --sf-gold-strong: #ffab6b;
    --sf-gold-soft: #40230c;
    --sf-gold-contrast: #1a0e04;

    --sf-surface-page: #120c18;
    --sf-surface-card: #1c1426;
    --sf-surface-sunken: #251a31;
    --sf-surface-inverse: #08050c;

    --sf-ink: #f0e9f5;
    --sf-ink-secondary: #b8a9c4;
    --sf-ink-muted: #8a7a97;

    --sf-border: #342644;
    --sf-border-soft: #2b1f39;
    --sf-border-strong: #4a3860;

}

/* --- Black Friday: alto contraste, negro y dorado ------------------------ */
[data-theme="blackfriday"]:not([data-dark-mode="true"]) {
    --sf-brand: #111111;
    --sf-brand-strong: #000000;
    --sf-brand-soft: #f0f0f0;
    --sf-brand-contrast: #f5c518;
    --sf-gold: #f5c518;
    --sf-gold-strong: #d6a904;
    --sf-gold-soft: #fdf6d9;
    --sf-gold-contrast: #111111;

    --sf-surface-page: #fafafa;
    --sf-surface-card: #ffffff;
    --sf-surface-sunken: #f0f0f0;
    --sf-surface-inverse: #000000;

    --sf-ink: #111111;
    --sf-ink-secondary: #4d4d4d;
    --sf-ink-muted: #808080;

    --sf-border: #e0e0e0;
    --sf-border-soft: #ededed;
    --sf-border-strong: #c4c4c4;

}
[data-theme="blackfriday"][data-dark-mode="true"] {
    --sf-brand: #f5c518;
    --sf-brand-strong: #ffd944;
    --sf-brand-soft: #332a06;
    --sf-brand-contrast: #111111;
    --sf-gold: #f5c518;
    --sf-gold-strong: #ffd944;
    --sf-gold-soft: #332a06;
    --sf-gold-contrast: #111111;

    --sf-surface-page: #0a0a0a;
    --sf-surface-card: #161616;
    --sf-surface-sunken: #1f1f1f;
    --sf-surface-inverse: #000000;

    --sf-ink: #f5f5f5;
    --sf-ink-secondary: #b0b0b0;
    --sf-ink-muted: #7d7d7d;

    --sf-border: #2b2b2b;
    --sf-border-soft: #232323;
    --sf-border-strong: #3d3d3d;

}

/* ==========================================================================
   3. TEMAS DE TEMPORADA YA EXISTENTES
   --------------------------------------------------------------------------
   themes.css ya define sus variables heredadas (--primary-color, --bg-*).
   Aquí solo se mapean a los tokens `--sf-*` para que los componentes nuevos
   y el puente Bootstrap sigan el mismo tema, más su variante oscura.
   ========================================================================== */

/* --- Navidad ------------------------------------------------------------- */
[data-theme="christmas"]:not([data-dark-mode="true"]) {
    --sf-brand: #c92a2a; --sf-brand-strong: #a61e1e; --sf-brand-soft: #fdeaea;
    --sf-gold: #2f9e44; --sf-gold-strong: #268038; --sf-gold-soft: #e6f5ea; --sf-gold-contrast: #ffffff;
    --sf-surface-page: #fffafa; --sf-surface-card: #ffffff; --sf-surface-sunken: #fdf0f0;
    --sf-surface-inverse: #16261a;
    --sf-ink: #2d2d2d; --sf-ink-secondary: #5c5c5c; --sf-ink-muted: #8a8a8a;
    --sf-border: #f0dcdc; --sf-border-soft: #f7ebeb; --sf-border-strong: #e0c0c0;
}
[data-theme="christmas"][data-dark-mode="true"] {
    --sf-brand: #ff8787; --sf-brand-strong: #ffa8a8; --sf-brand-soft: #3d1a1a; --sf-brand-contrast: #1a0a0a;
    --sf-gold: #69db7c; --sf-gold-strong: #8ce99a; --sf-gold-soft: #12331b; --sf-gold-contrast: #08170c;
    --sf-surface-page: #14100f; --sf-surface-card: #1e1817; --sf-surface-sunken: #271f1e;
    --sf-surface-inverse: #0a0807;
    --sf-ink: #f2eae9; --sf-ink-secondary: #b8adab; --sf-ink-muted: #8a807e;
    --sf-border: #362c2b; --sf-border-soft: #2c2423; --sf-border-strong: #4a3d3b;
}

/* --- Año Nuevo ----------------------------------------------------------- */
[data-theme="newyear"]:not([data-dark-mode="true"]) {
    --sf-brand: #1a1a2e; --sf-brand-strong: #0f0f1f; --sf-brand-soft: #e8e8f0;
    --sf-gold: #d4af37; --sf-gold-strong: #b8952c; --sf-gold-soft: #faf3dd; --sf-gold-contrast: #1a1a2e;
    --sf-surface-page: #fcfbf7; --sf-surface-card: #ffffff; --sf-surface-sunken: #f5f2e8;
    --sf-surface-inverse: #10101f;
    --sf-ink: #1a1a2e; --sf-ink-secondary: #54546b; --sf-ink-muted: #8a8a9c;
    --sf-border: #e8e3d2; --sf-border-soft: #f2eee2; --sf-border-strong: #d0c8ae;
}
[data-theme="newyear"][data-dark-mode="true"] {
    --sf-brand: #9fa8f0; --sf-brand-strong: #bcc2f5; --sf-brand-soft: #1e2043; --sf-brand-contrast: #0d0e22;
    --sf-gold: #e9c75a; --sf-gold-strong: #f2d982; --sf-gold-soft: #3a2f10; --sf-gold-contrast: #17130a;
    --sf-surface-page: #0f0f1c; --sf-surface-card: #191927; --sf-surface-sunken: #212134;
    --sf-surface-inverse: #07070f;
    --sf-ink: #eeeef5; --sf-ink-secondary: #b2b2c4; --sf-ink-muted: #82829a;
    --sf-border: #2e2e42; --sf-border-soft: #262637; --sf-border-strong: #414159;
}

/* --- San Valentín -------------------------------------------------------- */
[data-theme="valentine"]:not([data-dark-mode="true"]) {
    --sf-brand: #c2185b; --sf-brand-strong: #a01449; --sf-brand-soft: #fce4ec;
    --sf-gold: #e91e63; --sf-gold-strong: #c2185b; --sf-gold-soft: #fdeaf1; --sf-gold-contrast: #ffffff;
    --sf-surface-page: #fffafb; --sf-surface-card: #ffffff; --sf-surface-sunken: #fdeff3;
    --sf-surface-inverse: #2a0f1b;
    --sf-ink: #3a2129; --sf-ink-secondary: #6b5058; --sf-ink-muted: #9a838b;
    --sf-border: #f5dbe3; --sf-border-soft: #faeaef; --sf-border-strong: #e8bdcb;
}
[data-theme="valentine"][data-dark-mode="true"] {
    --sf-brand: #f48fb1; --sf-brand-strong: #f8b4cb; --sf-brand-soft: #3d1526; --sf-brand-contrast: #1e0912;
    --sf-gold: #ff6f9c; --sf-gold-strong: #ff94b6; --sf-gold-soft: #3d1526; --sf-gold-contrast: #1e0912;
    --sf-surface-page: #170f13; --sf-surface-card: #21171c; --sf-surface-sunken: #2b1f25;
    --sf-surface-inverse: #0c0709;
    --sf-ink: #f5e9ed; --sf-ink-secondary: #bfacb3; --sf-ink-muted: #8f7f86;
    --sf-border: #3a2b32; --sf-border-soft: #2f232a; --sf-border-strong: #503c45;
}

/* --- Primavera ----------------------------------------------------------- */
[data-theme="spring"]:not([data-dark-mode="true"]) {
    --sf-brand: #43a047; --sf-brand-strong: #357d38; --sf-brand-soft: #e8f5e9;
    --sf-gold: #f48fb1; --sf-gold-strong: #e06f97; --sf-gold-soft: #fdeaf1; --sf-gold-contrast: #3a2129;
    --sf-surface-page: #fbfdf9; --sf-surface-card: #ffffff; --sf-surface-sunken: #f0f7ef;
    --sf-surface-inverse: #14261a;
    --sf-ink: #1e2b20; --sf-ink-secondary: #4f5f52; --sf-ink-muted: #849184;
    --sf-border: #dfeade; --sf-border-soft: #ebf3ea; --sf-border-strong: #c2d6c1;
}
[data-theme="spring"][data-dark-mode="true"] {
    --sf-brand: #81c784; --sf-brand-strong: #a5d6a7; --sf-brand-soft: #17331a; --sf-brand-contrast: #0a1a0c;
    --sf-gold: #f8a8c4; --sf-gold-strong: #fbc4d7; --sf-gold-soft: #3a1d28; --sf-gold-contrast: #1c0c12;
    --sf-surface-page: #0f1610; --sf-surface-card: #182018; --sf-surface-sunken: #202a20;
    --sf-surface-inverse: #070c08;
    --sf-ink: #eaf2e9; --sf-ink-secondary: #b0bdaf; --sf-ink-muted: #808d80;
    --sf-border: #2b352b; --sf-border-soft: #232c23; --sf-border-strong: #3d4a3d;
}

/* --- Verano -------------------------------------------------------------- */
[data-theme="summer"]:not([data-dark-mode="true"]) {
    --sf-brand: #0097a7; --sf-brand-strong: #007b8a; --sf-brand-soft: #e0f7fa;
    --sf-gold: #ff9800; --sf-gold-strong: #e07f00; --sf-gold-soft: #fff4e0; --sf-gold-contrast: #24170a;
    --sf-surface-page: #fffdf8; --sf-surface-card: #ffffff; --sf-surface-sunken: #fef6e9;
    --sf-surface-inverse: #10333a;
    --sf-ink: #23241f; --sf-ink-secondary: #575a52; --sf-ink-muted: #8b8e85;
    --sf-border: #eee5d4; --sf-border-soft: #f6efe3; --sf-border-strong: #d8cbb2;
}
[data-theme="summer"][data-dark-mode="true"] {
    --sf-brand: #4dd0e1; --sf-brand-strong: #80deea; --sf-brand-soft: #0d3339; --sf-brand-contrast: #04191d;
    --sf-gold: #ffb74d; --sf-gold-strong: #ffcc80; --sf-gold-soft: #3d2c0d; --sf-gold-contrast: #1a1206;
    --sf-surface-page: #131410; --sf-surface-card: #1d1e19; --sf-surface-sunken: #262822;
    --sf-surface-inverse: #080906;
    --sf-ink: #f0f0e9; --sf-ink-secondary: #b5b6ac; --sf-ink-muted: #868880;
    --sf-border: #33352d; --sf-border-soft: #2a2c25; --sf-border-strong: #474a3f;
}

/* --- Otoño --------------------------------------------------------------- */
[data-theme="autumn"]:not([data-dark-mode="true"]) {
    --sf-brand: #8b4513; --sf-brand-strong: #6f370f; --sf-brand-soft: #f6ece2;
    --sf-gold: #d2691e; --sf-gold-strong: #b25617; --sf-gold-soft: #fbeee2; --sf-gold-contrast: #ffffff;
    --sf-surface-page: #fdfaf5; --sf-surface-card: #ffffff; --sf-surface-sunken: #f7efe4;
    --sf-surface-inverse: #2a1a0d;
    --sf-ink: #2b1f14; --sf-ink-secondary: #5e4d3d; --sf-ink-muted: #93826f;
    --sf-border: #ece0cf; --sf-border-soft: #f4ebde; --sf-border-strong: #d6c3aa;
}
[data-theme="autumn"][data-dark-mode="true"] {
    --sf-brand: #d9a066; --sf-brand-strong: #e6bb8c; --sf-brand-soft: #3a2716; --sf-brand-contrast: #1c1209;
    --sf-gold: #e8874a; --sf-gold-strong: #f0a475; --sf-gold-soft: #3d2312; --sf-gold-contrast: #1a0f07;
    --sf-surface-page: #16120d; --sf-surface-card: #201a14; --sf-surface-sunken: #2a221a;
    --sf-surface-inverse: #0b0806;
    --sf-ink: #f2ebe1; --sf-ink-secondary: #bcaf9f; --sf-ink-muted: #8c8172;
    --sf-border: #382e23; --sf-border-soft: #2e261c; --sf-border-strong: #4d4132;
}

/* --- Mundial 2026 -------------------------------------------------------- */
[data-theme="mundial2026"]:not([data-dark-mode="true"]) {
    --sf-brand: #0b6e4f; --sf-brand-strong: #08573e; --sf-brand-soft: #e3f3ed;
    --sf-gold: #e4b100; --sf-gold-strong: #c69a00; --sf-gold-soft: #fdf5db; --sf-gold-contrast: #1d1d1b;
    --sf-surface-page: #fafdfb; --sf-surface-card: #ffffff; --sf-surface-sunken: #eef7f2;
    --sf-surface-inverse: #06301f;
    --sf-ink: #10211a; --sf-ink-secondary: #47594f; --sf-ink-muted: #7d8f84;
    --sf-border: #dcebe3; --sf-border-soft: #e9f3ee; --sf-border-strong: #bcd6c8;
}
[data-theme="mundial2026"][data-dark-mode="true"] {
    --sf-brand: #4ec49a; --sf-brand-strong: #7ad6b6; --sf-brand-soft: #0d3527; --sf-brand-contrast: #041a11;
    --sf-gold: #f0c435; --sf-gold-strong: #f7d668; --sf-gold-soft: #3a2f10; --sf-gold-contrast: #17160f;
    --sf-surface-page: #0c1611; --sf-surface-card: #14211a; --sf-surface-sunken: #1c2b23;
    --sf-surface-inverse: #060d09;
    --sf-ink: #e8f2ec; --sf-ink-secondary: #adbdb4; --sf-ink-muted: #7e8f85;
    --sf-border: #26362d; --sf-border-soft: #1f2c25; --sf-border-strong: #384d40;
}

/* ==========================================================================
   4. INDICADOR DE TEMA GLOBAL
   --------------------------------------------------------------------------
   El selector de temas ya no es una preferencia personal: cambia la
   apariencia de toda la plataforma. La interfaz debe decirlo.
   ========================================================================== */
.sf-alcance-global {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sf-text-xs);
    font-weight: 600;
    color: var(--sf-brand);
    background: var(--sf-brand-soft);
    border-radius: var(--sf-radius-pill);
    padding: 4px 10px;
}