/* ============================================================================
   IDÓNEA · Tema oscuro del aplicativo (admin y postulante)
   ============================================================================
   Se activa cuando <html> lleva data-theme="dark" (lo pone idonea-tema.js).
   Sin ese atributo este archivo NO pinta nada: se puede cargar siempre.

   POR QUÉ FUNCIONA ASÍ
   La plantilla del aplicativo (assets/css/main.css) no reparte colores crudos:
   los saca de variables CSS (--white, --gray-500, --section-bg…) que consumen
   las utilidades (.bg-white, .text-gray-500, .border-gray-100…). Entonces no
   hay que reescribir componentes: se invierte la ESCALA en un solo lugar y con
   eso viaja todo el armazón — barra lateral, encabezado, tarjetas, tablas,
   formularios, menús y etiquetas.

   Lo mismo vale para la familia .ac-* (el patrón de tablas de administración):
   sus 16 vistas declaran las mismas cinco variables --ac-*, así que se
   redefinen aquí una vez.

   ESPECIFICIDAD: los selectores van con html[data-theme="dark"] (0,1,1), que
   le gana a los :root (0,1,0) de las vistas aunque estas se declaren después.
   Por eso no hace falta tocar los <style> de cada vista para lo que use
   variables.

   LO QUE ESTE ARCHIVO NO ALCANZA
   Las vistas tienen ~721 reglas propias con colores fijos (63 vistas). Las más
   repetidas están cubiertas abajo; el resto se va corrigiendo vista por vista,
   que es justo para lo que el interruptor arranca solo con las cuentas de
   prueba. Si encuentras una tarjeta blanca en oscuro, es de esa cola.
   ============================================================================ */

/* ── 1. Los tokens del sistema ─────────────────────────────────────────────
   Vienen del handoff de diseño (ARCHIVOS_EJEMPLO/handoff-tema-oscuro-atlas).
   Su diagnóstico da en el clavo sobre la primera versión de esta hoja:

     1. Una sola superficie. Fondo, tarjeta, campo y modal compartían casi el
        mismo negro, así que no había profundidad.
     2. El rojo lo hacía todo — títulos, bordes, etiquetas. Cuando todo es
        rojo, nada resalta.
     3. Contraste corto en los textos secundarios.

   De ahí las tres decisiones: CUATRO niveles de superficie dan la profundidad,
   el blanco cálido en tres pesos lleva la jerarquía, y el rojo se reserva para
   la ACCIÓN (botón primario, ítem activo, dato clave). Nunca para texto: sobre
   negro el rojo de marca no alcanza AA, por eso el texto de acento usa --rl. */
html[data-theme="dark"] {
    /* Superficies: cuatro niveles, nunca uno solo.
       OJO con la regla contraintuitiva del sistema: un panel anidado dentro de
       una tarjeta (s2) BAJA a s1, no sube. Si subiera a s3 competiría con el
       hover y la jerarquía se invertiría. */
    --s0: #0A0708;   /* fondo de la aplicación */
    --s1: #120E0F;   /* barras, bloques base, encabezados de tarjeta, campos */
    --s2: #1A1416;   /* tarjetas, paneles, modales */
    --s3: #231B1D;   /* hover, filas activas, menús */
    --s4: #2C2326;   /* relleno de control, marco de imagen */
    --s5: #372C30;   /* tooltip, barra de desplazamiento */

    /* Texto: la jerarquía la lleva el blanco. El cuerpo va en peso 300 — el
       blanco puro en 400 sobre negro genera halo. */
    --t1: #FBF8F9;
    --t2: rgba(251, 248, 249, .68);
    /* OJO: el handoff se contradice consigo mismo aquí. src/atlas-dark.css deja
       --t3 al 44% y el README lo marca como PENDIENTE de verificar, mientras la
       galería de átomos documenta 54%. Medido: al 44% da 3.99-4.21 sobre las
       cinco superficies, por debajo de AA. Se toma el 54% de la galería —que es
       lo que se vio en pantalla— y que además cumple de sobra (5.25-5.67).
       La jerarquía queda 100% título · 68% cuerpo · 54% etiqueta. */
    --t3: rgba(251, 248, 249, .54);
    --t4: rgba(251, 248, 249, .28);   /* iconos en reposo y deshabilitado, nunca texto */

    /* Líneas: BLANCAS, no rojas. El borde rojo se reserva para lo que exige
       acción del usuario. */
    --l1: rgba(251, 248, 249, .07);
    --l2: rgba(251, 248, 249, .13);
    --l3: rgba(251, 248, 249, .22);

    /* Acento */
    --r:  #D11933;                  /* rellenos: botón primario, activo */
    --rh: #E82746;
    --rl: #FF6B7F;                  /* texto e iconos de acento sobre negro */
    --rt: rgba(209, 25, 51, .14);
    --rb: rgba(209, 25, 51, .5);

    /* Estados: uno por concepto */
    --ok: #34C77B; --okt: rgba(52, 199, 123, .13); --okb: rgba(52, 199, 123, .34);
    --wa: #F0B429; --wat: rgba(240, 180, 41, .13); --wab: rgba(240, 180, 41, .32);
    --er: #FF5C5C; --ert: rgba(255, 92, 92, .13);  --erb: rgba(255, 92, 92, .32);
    --in: #5AA9FF; --int: rgba(90, 169, 255, .13); --inb: rgba(90, 169, 255, .32);

    /* ── La escala de la plantilla, reescrita SOBRE los tokens ──────────────
       La plantilla del aplicativo reparte sus colores por variables, así que
       apuntándolas a los tokens el armazón entero entra en el sistema. */

    /* Tripletas HSL (la plantilla las usa como hsl(var(--x)) y ahí no cabe un
       token): son los mismos s0/s1/s2 expresados en HSL. */
    --white: 340 13% 9%;          /* = s2, la superficie de las tarjetas */
    --black: 340 30% 95%;         /* = t1, titulares */
    --light: 345 13% 6%;          /* = s1 */
    --section-bg: 340 18% 3%;     /* = s0, el fondo de la aplicación */
    --border-color: 340 10% 14%;

    /* La escala de grises pasa a ser la escala de TEXTO y de superficie */
    --gray-50:  var(--s3);
    --gray-100: var(--l2);
    --gray-200: var(--l3);
    --gray-300: var(--t4);
    --gray-400: var(--t3);
    --gray-500: var(--t2);
    --gray-600: var(--t1);
    --gray-700: var(--t1);
    --gray-800: var(--t1);
    --gray-900: var(--t1);
    --gray-950: #FFFFFF;

    --light-50:  var(--s1);
    --light-100: var(--s2);
    --light-600: var(--int);
    --light-700: var(--t2);
    --light-800: var(--t1);

    /* Los tonos «-50» son fondos suaves de etiquetas y avisos: pasan a los
       tintes de estado del sistema, uno por concepto. */
    --main-50:    var(--rt);
    --main-100:   var(--rt);
    --primary-50: var(--int);
    --primary-100:var(--int);
    --danger-50:  var(--ert);
    --danger-100: var(--ert);
    --success-50: var(--okt);
    --success-100:var(--okt);
    --warning-50: var(--wat);
    --warning-100:var(--wat);
    --info-50:    var(--int);
    --info-100:   var(--int);
    --purple-50:  rgba(168, 85, 247, .13);
    --purple-100: rgba(168, 85, 247, .13);

    /* En oscuro la sombra separa menos que la superficie: se usa la del sistema */
    --box-shadow-custom: 0 12px 28px -18px rgba(0, 0, 0, .8);

    color-scheme: dark;           /* barras de scroll y controles nativos oscuros */
}

/* El fondo de la aplicación: el nivel más bajo */
html[data-theme="dark"] body {
    background-color: var(--s0);
    color: var(--t2);
}

/* ── 2. Armazón: barra lateral y encabezado ────────────────────────────────
   Van en s1 (bloques base), no en s2: las tarjetas tienen que destacarse
   SOBRE ellos. El ítem activo sube de superficie y su icono toma el acento;
   el texto se queda blanco — así la barra deja de parecer una fila de
   botones grises. */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .top-navbar,
html[data-theme="dark"] .sidebar-menu-area {
    background-color: var(--s1);
    border-color: var(--l1);
}
html[data-theme="dark"] .dashboard-main-wrapper { background-color: transparent; }
html[data-theme="dark"] .sidebar-menu a { color: var(--t2); }
html[data-theme="dark"] .sidebar-menu a:hover { color: var(--t1); background-color: var(--s3); }
html[data-theme="dark"] .sidebar-menu li.active-page > a { color: var(--t1); background-color: var(--s3); }
html[data-theme="dark"] .sidebar-menu li.active-page > a i,
html[data-theme="dark"] .sidebar-menu li.active-page > a svg { color: var(--rl); }
html[data-theme="dark"] .sidebar-submenu { background-color: var(--s1); }

/* ── 3. Componentes de Bootstrap y de la plantilla ────────────────────────
   Tarjetas y modales en s2. Los flotantes (modal, menú, toast) suben de
   superficie Y añaden borde claro: en oscuro una sombra no separa. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .list-group-item {
    background-color: var(--s2);
    border-color: var(--l1);
    color: var(--t2);
}
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .toast {
    background-color: var(--s2);
    border: 1px solid var(--l3);
    color: var(--t2);
}
html[data-theme="dark"] .modal-backdrop.show { background-color: #000; opacity: .78; }
/* Los encabezados de tarjeta y de modal bajan a s1, como manda el sistema */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .card-header { background-color: var(--s1); border-color: var(--l1); }
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card-footer { border-color: var(--l1); }
html[data-theme="dark"] .dropdown-item { color: var(--t2); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: var(--s3); color: var(--t1); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* Tablas: cabecera en s1, fila en hover a s3 (y el texto sube a blanco) */
html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--t2);
    --bs-table-border-color: var(--l1);
    --bs-table-striped-bg: var(--s1);
    --bs-table-striped-color: var(--t2);
    --bs-table-hover-bg: var(--s3);
    --bs-table-hover-color: var(--t1);
    color: var(--t2);
}
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; }
html[data-theme="dark"] .table thead th {
    background-color: var(--s1);
    color: var(--t3);
    border-bottom-color: var(--l2);
}

/* Formularios */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="search"] {
    background-color: var(--s1);       /* el campo va HUNDIDO sobre la tarjeta */
    border-color: var(--l2);
    color: var(--t1);
}
/* El texto de sugerencia: varias vistas muestran datos reales dentro del
   placeholder (el perfil, por ejemplo), así que no puede quedar en t4. */
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--t3); opacity: 1; }
/* Foco: borde de acento con halo tenue, como en el sistema */
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    background-color: var(--s2);
    color: var(--t1);
    border-color: var(--rl);
    box-shadow: 0 0 0 3px var(--rt);
}
/* La plantilla fija el color de los select y las fechas con !important
   (select, input[type="date"] { color: var(--gray-300) !important }), que en
   oscuro queda demasiado apagado: medido 3.56, por debajo de AA. Se responde
   con la misma fuerza y solo aquí. */
html[data-theme="dark"] select,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"] { color: var(--t1) !important; }
html[data-theme="dark"] select option { background: var(--s2); color: var(--t1); }
/* El iconito del calendario lo dibuja el navegador, y arriba ya se declaró
   «color-scheme: dark»: con eso Chrome lo pinta CLARO por su cuenta. El
   filter:invert(1) que había aquí lo volvía a poner negro — invertido dos veces.
   Se deja solo la opacidad, para que no grite más que el propio campo. */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator { filter: opacity(.85); }

/* Pestañas: la activa SUBE de superficie, sin píldora de color */
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-pills { border-color: var(--l1); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--t3); }
html[data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--t2); background-color: var(--s3); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--s2);
    border-color: var(--l1) var(--l1) transparent;
    color: var(--t1);
}

/* ── 4. La familia .ac-* y las pastillas de estado ─────────────────────────
   Se reescriben sobre los tokens: la tarjeta en s2, el campo y la cabecera en
   s1, el hover en s3, los bordes BLANCOS (l1/l2) y no rojos. Antes esta parte
   tiraba de rojos propios y era justo lo que el diagnóstico señalaba: cuando
   todo es rojo, nada resalta. */
html[data-theme="dark"] {
    --ac-ink:     var(--t1);
    --ac-ink-50:  var(--t3);
    --ac-ink-30:  var(--t4);
    --ac-border:  var(--l2);
    --ac-surface: var(--s1);
}
html[data-theme="dark"] .ac-shell,
html[data-theme="dark"] .au-shell {
    background: var(--s2);
    color: var(--t2);
    border-color: var(--l1);
    box-shadow: var(--sh1, 0 12px 28px -18px rgba(0, 0, 0, .8));
}
/* Los controles van hundidos sobre la tarjeta (s1), como los campos */
html[data-theme="dark"] .ac-action-btn,
html[data-theme="dark"] .ac-btn--outline,
html[data-theme="dark"] .ac-field input,
html[data-theme="dark"] .ac-field select,
html[data-theme="dark"] .ac-field textarea {
    background: var(--s1);
    color: var(--t1);
    border-color: var(--l2);
}
html[data-theme="dark"] .ac-table tbody td { border-bottom-color: var(--l1); color: var(--t2); }
html[data-theme="dark"] .ac-table tbody td b,
html[data-theme="dark"] .ac-table tbody td strong { color: var(--t1); }
html[data-theme="dark"] .ac-table tbody tr:hover { background: var(--s3); }
html[data-theme="dark"] .ac-table tbody tr:hover td { color: var(--t1); }
html[data-theme="dark"] .ac-table thead th { background: var(--s1); color: var(--t3); border-bottom-color: var(--l2); }
html[data-theme="dark"] .ac-title,
html[data-theme="dark"] .ac-header h1,
html[data-theme="dark"] .ac-header h2 { color: var(--t1); }
html[data-theme="dark"] .ac-subtitle { color: var(--t3); }
html[data-theme="dark"] .ac-nota { background: var(--s1); color: var(--t3); border-color: var(--l1); }
html[data-theme="dark"] .ac-action-btn:hover { background: var(--s3); color: var(--t1); border-color: var(--l3); }

/* ── Pastillas de estado: UNA por concepto ─────────────────────────────────
   Están calculadas para fondo blanco (un tinte al 8-12% del color y el mismo
   color saturado como texto), así que sobre negro el tinte desaparece y el
   texto se queda sin contraste: medido, 1:1. Aquí pasan a los cuatro estados
   del sistema — aprobado, pendiente, rechazado e informativo — cada uno con su
   tinte al 13% y su color de texto. */
html[data-theme="dark"] .ac-pill--green,
html[data-theme="dark"] .ac-chip--green,
html[data-theme="dark"] .au-pill--success,
html[data-theme="dark"] .doc-chip--ok,
html[data-theme="dark"] .trk-chip--done,
html[data-theme="dark"] .st--ok,
html[data-theme="dark"] .st--resolved { background: var(--okt) !important; color: var(--ok) !important; }

html[data-theme="dark"] .ac-pill--orange,
html[data-theme="dark"] .ac-pill--amber,
html[data-theme="dark"] .ac-chip--orange,
html[data-theme="dark"] .au-pill--warning,
html[data-theme="dark"] .doc-chip--warn,
html[data-theme="dark"] .trk-chip--active,
html[data-theme="dark"] .st--pending,
html[data-theme="dark"] .st--warn { background: var(--wat) !important; color: var(--wa) !important; }

html[data-theme="dark"] .ac-pill--red,
html[data-theme="dark"] .ac-chip--red,
html[data-theme="dark"] .au-pill--danger,
html[data-theme="dark"] .doc-chip--bad,
html[data-theme="dark"] .st--bad { background: var(--ert) !important; color: var(--er) !important; }

html[data-theme="dark"] .ac-pill--blue,
html[data-theme="dark"] .ac-chip--blue,
html[data-theme="dark"] .au-pill--info,
html[data-theme="dark"] .st--info,
html[data-theme="dark"] .st--progress { background: var(--int) !important; color: var(--in) !important; }

/* El acento se reserva para la marca; el resto de matices se reparte entre los
   cuatro estados para no multiplicar colores sin concepto. */
html[data-theme="dark"] .au-pill--main { background: var(--rt) !important; color: var(--rl) !important; }
html[data-theme="dark"] .ac-pill--teal,
html[data-theme="dark"] .au-pill--teal { background: var(--okt); color: var(--ok); }
html[data-theme="dark"] .ac-pill--purple,
html[data-theme="dark"] .ac-pill--indigo,
html[data-theme="dark"] .ac-chip--purple,
html[data-theme="dark"] .st--expert { background: rgba(168, 85, 247, .13) !important; color: #C99BFF !important; }
html[data-theme="dark"] .ac-pill--gray,
html[data-theme="dark"] .ac-chip--gray,
html[data-theme="dark"] .au-pill--secondary,
html[data-theme="dark"] .trk-chip--pending { background: var(--s3) !important; color: var(--t2) !important; }
html[data-theme="dark"] .ac-action-btn--warn:hover,
html[data-theme="dark"] .ac-action-btn--danger:hover { background: #2E0D0B; color: #FCA5A5; border-color: #5A1C28; }
html[data-theme="dark"] .ac-action-btn--ok:hover { background: #052E1E; color: #86EFAC; border-color: #14532D; }

/* ── 5. Otros contenedores propios que se repiten en las vistas ───────────── */
html[data-theme="dark"] .tx-summary-card,
html[data-theme="dark"] .tx-filter-select,
html[data-theme="dark"] .tx-filter-input,
html[data-theme="dark"] .tx-preset-btn,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .inner-chart-card,
html[data-theme="dark"] .admin-filter-form,
html[data-theme="dark"] .admin-filter-input,
html[data-theme="dark"] .admin-filter-range,
html[data-theme="dark"] .admin-dashboard-breadcrumb,
html[data-theme="dark"] .rc-form input,
html[data-theme="dark"] .rc-form select,
html[data-theme="dark"] .rc-form textarea {
    background: #160E11 !important;
    color: var(--gray-600) !important;
    border-color: #2B1F23 !important;
}

/* Las actas y constancias se imprimen: se dejan SIEMPRE en claro, tanto en
   pantalla como en papel. Un acta con fondo negro no es un documento. */
html[data-theme="dark"] .acta-sheet,
html[data-theme="dark"] .admin-inhabilidad-docx,
html[data-theme="dark"] .doc-hoja {
    background: #fff;
    color: #1f2937;
}

/* ── 6. Librerías de terceros ─────────────────────────────────────────────── */
/* DataTables */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter { color: var(--gray-400); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--gray-50) !important;
    border-color: var(--gray-100) !important;
    color: var(--gray-500) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--gray-300) !important; }

/* SweetAlert2 */
html[data-theme="dark"] .swal2-popup {
    background: #1A1115;
    color: var(--gray-600);
}
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container { color: var(--gray-600); }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
    background: #221619;
    color: var(--gray-600);
    border-color: #2B1F23;
}

/* Editor Quill */
html[data-theme="dark"] .ql-toolbar,
html[data-theme="dark"] .ql-container {
    background: var(--gray-50);
    border-color: var(--gray-100);
    color: var(--gray-600);
}
html[data-theme="dark"] .ql-toolbar .ql-stroke { stroke: var(--gray-400); }
html[data-theme="dark"] .ql-toolbar .ql-fill { fill: var(--gray-400); }
html[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--gray-300); }

/* Calendario */
html[data-theme="dark"] .fc { --fc-page-bg-color: transparent; --fc-neutral-bg-color: #1E1419; --fc-border-color: #2B1F23; }
html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-daygrid-day-number,
html[data-theme="dark"] .fc .fc-toolbar-title { color: var(--gray-600); }

/* ── 7. El interruptor del encabezado ─────────────────────────────────────── */
.idn-tema-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--main-50);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.idn-tema-btn:hover { background: var(--main-100); transform: translateY(-1px); }
.idn-tema-btn:focus-visible { outline: 2px solid var(--main-500); outline-offset: 2px; }
/* Un icono por tema: se muestra el del tema al que se va a cambiar. */
.idn-tema-btn .idn-tema-luna { display: inline-flex; }
.idn-tema-btn .idn-tema-sol { display: none; }
html[data-theme="dark"] .idn-tema-btn .idn-tema-luna { display: none; }
html[data-theme="dark"] .idn-tema-btn .idn-tema-sol { display: inline-flex; }

/* Aviso de que la función está en pruebas (solo lo ven las cuentas de prueba) */
.idn-tema-btn[data-en-pruebas="1"]::after {
    content: "";
    position: absolute;
    transform: translate(14px, -13px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning-500, #EAB308);
    box-shadow: 0 0 0 2px hsl(var(--white));
}
.idn-tema-btn { position: relative; }

/* Impresión: siempre en claro, pase lo que pase en pantalla. */
@media print {
    html[data-theme="dark"] { color-scheme: light; }
    html[data-theme="dark"] body { background: #fff !important; color: #1f2937 !important; }
    html[data-theme="dark"] .ac-shell,
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .modal-content { background: #fff !important; color: #1f2937 !important; }
    .idn-tema-btn { display: none !important; }
}

/* ── 8. El loader, en oscuro ───────────────────────────────────────────────
   El overlay de carga nace con fondo BLANCO (así está pensado para el tema
   claro), y como se muestra en cada navegación y en cada acción, en oscuro
   producía un fogonazo blanco a pantalla completa. Sus tres variables pasan a
   los tokens: el fondo al de la aplicación, para que el overlay no se distinga
   de la página que hay debajo y el cambio se sienta continuo. */
html[data-theme="dark"] .loader-container {
    --idn-loader-bg:  var(--s0);
    --idn-loader-fg:  var(--t1);
    --idn-loader-sub: var(--t3);
}
/* Los anillos decorativos estaban calculados sobre blanco (vinotinto al 13%):
   sobre negro no se ven. Pasan a línea clara, muy tenue. */
html[data-theme="dark"] .loader-container::before,
html[data-theme="dark"] .loader-container::after { border-color: rgba(251, 248, 249, .05); }

/* Un logo por tema: el de la empresa lleva tinta oscura y sobre negro
   desaparecería. La regla base (esconder el blanco) está en StyleLoader.css,
   que se carga siempre que hay loader. */
html[data-theme="dark"] .loader-container .idn-logo--claro { display: none; }
html[data-theme="dark"] .loader-container .idn-logo--oscuro { display: block; }

/* Logo por tema en las cabeceras del aplicativo. La regla base (esconder el de
   fondo oscuro) va SIN el selector del tema porque esta hoja se carga en los dos
   temas: así en claro nunca se ven los dos apilados. */
.idn-logo-oscuro { display: none; }
html[data-theme="dark"] .idn-logo-claro { display: none; }
html[data-theme="dark"] .idn-logo-oscuro { display: inline-block; }

/* ── El logo de la barra lateral ────────────────────────────────────────────
   Ese bloque está COPIADO en 61 vistas de admin, cada una con su propio
   <img src="/logo/principal">. En vez de editar 61 archivos, se sustituye la
   imagen desde aquí: content: url() reemplaza el recurso de un elemento <img>
   conservando su tamaño y su sitio. El JS del tema hace lo mismo cambiando el
   src, por si algún navegador no soporta la sustitución por CSS.
   La franja del logo baja a s1 para no quedar más clara que la propia barra. */
html[data-theme="dark"] .sidebar__logo { background-color: var(--s1) !important; }
html[data-theme="dark"] .sidebar__logo img { content: url("/logo/oscuro"); }
