/* ============================================================================
   IDÓNEA · Tema oscuro — decisiones de diseño de las vistas
   ============================================================================
   Esta hoja NO traduce colores: aplica las DECISIONES del handoff
   (ARCHIVOS_EJEMPLO/handoff-tema-oscuro-atlas, «ATLAS · Tema oscuro.html»),
   que son las que la traducción automática no puede inferir.

   Va después de idonea-tema-oscuro-postulante.css, que resuelve la cola larga
   de colores; aquí van las siete reglas que cambian la vista:

     1. El rojo no es color de texto: los títulos van en blanco y el rojo se
        queda en el botón primario, el ítem activo y una palabra del titular.
     2. La profundidad la da la SUPERFICIE, no el borde: al pasar el cursor la
        tarjeta sube de nivel en vez de encenderse un filo de color.
     3. Los bordes son blancos al 7-22%.
     4. Un estado, una pastilla.
     5. Las imágenes NO se apagan: se funden con la tarjeta por degradado, y ese
        degradado sigue a la superficie en el hover.
     6. Un botón primario por pantalla: en las tarjetas el botón va fantasma y
        se llena de rojo solo al pasar el cursor.
     7. El precio es el dato, no el adorno: cifra en blanco monoespaciada, con
        la moneda y el IVA en gris.
   ============================================================================ */

/* ══════ Las utilidades de gris del template, por su ROL ══════════════════
   Un mismo --gray-N alimenta tres cosas distintas: texto, fondo y borde. Al
   apuntarlo a un token hay que elegir uno, y eso deja las otras dos mal: por eso
   varios textos secundarios quedaban casi ilegibles (text-gray-300 caía en t4,
   28%, que el sistema reserva para iconos apagados) y algún fondo se volvía un
   velo blanco. Aquí se separa por utilidad, que es lo único que distingue el rol.
   Va con !important porque las utilidades del template también lo llevan. */
html[data-theme="dark"] .text-gray-100,
html[data-theme="dark"] .text-gray-200,
html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-neutral-300,
html[data-theme="dark"] .text-neutral-400 { color: var(--t3) !important; }
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-neutral-500,
html[data-theme="dark"] .text-neutral-600 { color: var(--t2) !important; }
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-neutral-700,
html[data-theme="dark"] .text-neutral-800,
html[data-theme="dark"] .text-neutral-900,
html[data-theme="dark"] .text-heading,
html[data-theme="dark"] .text-black { color: var(--t1) !important; }

/* El rojo de marca NO es color de texto (regla 1). La utilidad text-main-* se
   usa para titulares, etiquetas y enlaces —los nombres de esquema, «Experiencias
   Registradas»…— y en oscuro todo eso se leía en rojo. Pasa a blanco; el rojo se
   queda donde manda: el botón primario, el ítem activo y el día de hoy. */
html[data-theme="dark"] .text-main-500,
html[data-theme="dark"] .text-main-600,
html[data-theme="dark"] .text-main-700,
html[data-theme="dark"] .text-main-800,
html[data-theme="dark"] .hover-text-main-600:hover { color: var(--t1) !important; }

/* En el menú de la cuenta los iconos venían en azul de la plantilla y pesaban
   más que su propia etiqueta. Van al tono de metadato; el texto, al de cuerpo,
   y al pasar el cursor la fila SUBE de superficie (no se pinta de color). */
html[data-theme="dark"] .dropdown-menu a i,
html[data-theme="dark"] .dropdown-menu .dropdown-item i,
html[data-theme="dark"] .dropdown-menu a .text-primary-600,
html[data-theme="dark"] .dropdown-menu i.text-primary-600 { color: var(--t3) !important; }
html[data-theme="dark"] .dropdown-menu a { color: var(--t2) !important; }
html[data-theme="dark"] .dropdown-menu a:hover,
html[data-theme="dark"] .dropdown-menu a:focus { background-color: var(--s3) !important; color: var(--t1) !important; }
html[data-theme="dark"] .dropdown-menu a:hover i { color: var(--rl) !important; }
html[data-theme="dark"] .dropdown-menu hr,
html[data-theme="dark"] .dropdown-menu .dropdown-divider { border-color: var(--l2) !important; }

html[data-theme="dark"] .bg-white { background-color: var(--s2) !important; }
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-neutral-50 { background-color: var(--s1) !important; }
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-neutral-100 { background-color: var(--s3) !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: var(--s4) !important; }

html[data-theme="dark"] .border-gray-50,
html[data-theme="dark"] .border-neutral-50 { border-color: var(--l1) !important; }
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-neutral-100 { border-color: var(--l2) !important; }
html[data-theme="dark"] .border-gray-200 { border-color: var(--l3) !important; }

/* ══════════════════════ Catálogo de certificaciones ══════════════════════ */

/* Encabezado de página con su filo de acento a la izquierda */
html[data-theme="dark"] .hero-shell {
    position: relative;
    background: var(--s2);
    border: 1px solid var(--l1);
    overflow: hidden;
}
html[data-theme="dark"] .hero-shell::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--r), transparent);
}
html[data-theme="dark"] .hero-total { background: var(--s1); border-color: var(--l1); }

/* Filtros como control segmentado: el activo SUBE a blanco, no se pinta de rojo */
html[data-theme="dark"] .filter-row { background: var(--s2); border-color: var(--l1); }
html[data-theme="dark"] .filter-chip { background: transparent; color: var(--t3); border-color: transparent; }
html[data-theme="dark"] .filter-chip:hover { background: var(--s3); color: var(--t1); }
html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .filter-chip.on { background: var(--t1); color: var(--s0); border-color: transparent; }
html[data-theme="dark"] .sort-select { background: var(--s1); border-color: var(--l2); color: var(--t2); }

/* Regla 5 · la imagen no se apaga: mantiene su saturación arriba y se funde con
   la tarjeta abajo. El degradado termina EN el color de la superficie, y cambia
   con el hover para seguirla. */
html[data-theme="dark"] .card-cert-img img { filter: saturate(1.02); }
html[data-theme="dark"] .card-cert-img::after {
    background: linear-gradient(180deg, rgba(10, 7, 8, .10) 0%, rgba(10, 7, 8, .55) 68%, var(--s2) 100%);
}
html[data-theme="dark"] .card-cert:hover .card-cert-img::after {
    background: linear-gradient(180deg, rgba(10, 7, 8, .10) 0%, rgba(10, 7, 8, .55) 68%, var(--s3) 100%);
}

/* El fondo de la página, uno solo y NEGRO. Va con !important porque las vistas
   fijan su degradado casi blanco con !important, y eso le gana a cualquier
   especificidad: sin esto la página seguía pintándose clara en modo oscuro. */
html[data-theme="dark"] .dashboard-main-wrapper {
    background: var(--s0) !important;
    background-image: none !important;
}

/* La textura de ruido de la vista es una capa fija sobre TODA la pantalla,
   calculada para papel blanco (turbulencia clara al 3%). Sobre negro no da
   textura: levanta un velo gris que aclara el fondo entero — que es justo lo
   que se veía. En oscuro se apaga. */
html[data-theme="dark"] .dashboard-main-wrapper::before { display: none !important; }

/* El panel que envuelve el catálogo es un VELO en tema claro (blanco al 72%),
   no una tarjeta. En oscuro un velo claro no existe: traducido a superficie
   quedaba en s2, el MISMO nivel que las tarjetas, y por eso todo se veía plano.
   Se deja transparente para que se vea el fondo de la aplicación y las tarjetas
   floten sobre él. */
html[data-theme="dark"] .catalog-shell {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Regla 2 · volumen de la tarjeta. En oscuro no lo da la sombra sola: lo dan
   tres cosas juntas — subir de superficie sobre el fondo, un filo de luz arriba
   (el borde interior claro) y una sombra profunda debajo. Al pasar el cursor
   sube otro nivel y la sombra crece. */
/* Sobre un fondo casi negro una SOMBRA NEGRA no se ve — el propio sistema lo
   dice: «en oscuro la sombra no separa». El volumen se consigue con una
   superficie iluminada desde arriba: la cara de la tarjeta va en degradado de
   s3 (arriba, donde daría la luz) a s1 (abajo, en penumbra), con un filo de luz
   en el canto superior y un borde claro alrededor. La sombra se queda como
   apoyo, no como recurso principal. */
html[data-theme="dark"] .card-cert {
    background: linear-gradient(180deg, var(--s3) 0%, var(--s2) 46%, var(--s1) 100%);
    border: 1px solid var(--l2);
    box-shadow: inset 0 1px 0 rgba(251, 248, 249, .09),
                inset 0 -1px 0 rgba(0, 0, 0, .5),
                0 18px 34px -22px #000,
                0 3px 8px -5px rgba(0, 0, 0, .9);
}
/* Al pasar el cursor la cara entera sube un nivel: s4 arriba, s2 abajo */
html[data-theme="dark"] .card-cert:hover {
    background: linear-gradient(180deg, var(--s4) 0%, var(--s3) 46%, var(--s2) 100%);
    border-color: var(--l3);
    box-shadow: inset 0 1px 0 rgba(251, 248, 249, .13),
                inset 0 -1px 0 rgba(0, 0, 0, .5),
                0 30px 54px -26px #000,
                0 6px 14px -8px rgba(0, 0, 0, .95);
}
/* La foto se funde con la CARA de la tarjeta, que arriba es s3 */
html[data-theme="dark"] .card-cert .card-cert-img::after {
    background: linear-gradient(180deg, rgba(10, 7, 8, .10) 0%, rgba(10, 7, 8, .50) 66%, var(--s3) 100%);
}
html[data-theme="dark"] .card-cert:hover .card-cert-img::after {
    background: linear-gradient(180deg, rgba(10, 7, 8, .10) 0%, rgba(10, 7, 8, .50) 66%, var(--s4) 100%);
}
html[data-theme="dark"] .card-cert::before { background: var(--r); }

/* La rejilla no pinta fondo: solo coloca */
html[data-theme="dark"] .catalog-grid { background: transparent; }

/* Distintivos sobre la foto: pastilla oscura translúcida, no clara */
html[data-theme="dark"] .validity-badge,
html[data-theme="dark"] .code-badge {
    background: rgba(10, 7, 8, .66);
    color: var(--t1);
    border: 1px solid var(--l2);
    backdrop-filter: blur(6px);
}
html[data-theme="dark"] .validity-badge svg,
html[data-theme="dark"] .code-badge svg { color: var(--rl); }

html[data-theme="dark"] .card-category { color: var(--t3); }
html[data-theme="dark"] .card-cert-title { color: var(--t1); }

/* Regla 7 · el precio es el dato */
html[data-theme="dark"] .card-price-row {
    border-top: 1px solid var(--l1);
    padding-top: 12px;
}
html[data-theme="dark"] .price-amount {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--t1);
    letter-spacing: -.02em;
}
html[data-theme="dark"] .price-currency,
html[data-theme="dark"] .price-unit { color: var(--t3); }

/* Progreso: riel en relleno de control, barra del rojo al rojo claro */
html[data-theme="dark"] .progress-track { background: var(--s4); }
html[data-theme="dark"] .progress-fill { background: linear-gradient(90deg, var(--r), var(--rl)); }
html[data-theme="dark"] .progress-label { color: var(--t3); }
html[data-theme="dark"] .progress-label strong { color: var(--t2); }
html[data-theme="dark"] .progress-pct {
    color: var(--t1);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Regla 6 · un botón primario por pantalla: en la tarjeta va fantasma */
html[data-theme="dark"] .btn-detail,
html[data-theme="dark"] .btn-outline-detail {
    background: transparent;
    border: 1px solid var(--l3);
    color: var(--t1);
}
html[data-theme="dark"] .card-cert:hover .btn-detail,
html[data-theme="dark"] .card-cert:hover .btn-outline-detail,
html[data-theme="dark"] .btn-detail:hover,
html[data-theme="dark"] .btn-outline-detail:hover {
    background: var(--r);
    border-color: var(--r);
    color: #fff;
}

/* Paginación: el activo en blanco, no en rojo */
html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .page-arrow { background: transparent; color: var(--t3); border-color: var(--l2); }
html[data-theme="dark"] .page-btn:hover,
html[data-theme="dark"] .page-arrow:hover { background: var(--s2); color: var(--t1); }
html[data-theme="dark"] .page-btn.active,
html[data-theme="dark"] .page-btn.on { background: var(--t1); color: var(--s0); border-color: transparent; }

/* Regla 4 · un estado, una pastilla */
html[data-theme="dark"] .card-estado-acreditado { background: var(--okt); color: var(--ok); }
html[data-theme="dark"] .card-estado-otro { background: var(--wat); color: var(--wa); }
html[data-theme="dark"] .card-estado-inline--acred { color: var(--ok); }
html[data-theme="dark"] .card-estado-inline--otro { color: var(--wa); }

html[data-theme="dark"] .empty-state { background: var(--s2); border: 1px solid var(--l1); color: var(--t2); }

/* ══════════════════════ Detalle de la certificación ══════════════════════ */

html[data-theme="dark"] .detail-main-card,
html[data-theme="dark"] .detail-side-card,
html[data-theme="dark"] .detail-purchase-card {
    background: var(--s2);
    border: 1px solid var(--l1);
}
/* Los bloques anidados BAJAN a s1 (si subieran competirían con el hover) */
html[data-theme="dark"] .detail-section,
html[data-theme="dark"] .instructor-box,
html[data-theme="dark"] .detail-price-wrap {
    background: var(--s1);
    border: 1px solid var(--l1);
    background-image: none;
}
/* El número de cada sección: cuadro de acento tenue con la cifra en rojo claro */
html[data-theme="dark"] .detail-section-num,
html[data-theme="dark"] .idno-step__n,
html[data-theme="dark"] .idno-action__icon {
    background: var(--rt);
    color: var(--rl);
    border-color: transparent;
}
html[data-theme="dark"] .detail-section-title,
html[data-theme="dark"] .idno-step__title,
html[data-theme="dark"] .idno-action__title,
html[data-theme="dark"] .idno-action__row-title,
html[data-theme="dark"] .idno-flow__banner-title { color: var(--t1); }
html[data-theme="dark"] #nombreProducto { color: var(--t1); }
html[data-theme="dark"] .detail-code-badge {
    background: var(--s1);
    border-color: var(--l2);
    color: var(--t2);
    background-image: none;
}
/* La lista de documentos requeridos.
   El chulo del documento APROBADO viene con la utilidad text-main-600, o sea el
   rojo de marca: en el sistema el aprobado es VERDE y el rojo se reserva para la
   acción. Se cambia solo en la fila aprobada, no en toda la utilidad. */
html[data-theme="dark"] .course-list__item.active .circle i,
html[data-theme="dark"] .course-list__item.active .circle .ph-check-circle,
html[data-theme="dark"] .course-list__item .ph-check-circle.text-main-600 { color: var(--ok) !important; }
/* El círculo vacío de los pendientes tiene que VERSE: con la línea al 13% se
   perdía. Va al tono de etiqueta. */
html[data-theme="dark"] .course-list__item .circle { color: var(--t3) !important; }
/* La fila aprobada se queda en superficie hundida: el estado lo dice el chulo,
   no un fondo teñido (un estado, una señal). */
html[data-theme="dark"] .detail-side-card .course-list__item {
    background: var(--s1) !important;
    background-image: none !important;
    border-color: var(--l1) !important;
}
html[data-theme="dark"] .detail-side-card .course-list__item:hover {
    background: var(--s3) !important;
    border-color: var(--l2) !important;
    box-shadow: none;
}
html[data-theme="dark"] .detail-side-card .course-list__item.active { border-color: var(--okb) !important; }
/* El nombre del documento es contenido, no metadato */
html[data-theme="dark"] .course-list__item a,
html[data-theme="dark"] .course-list__item .text-line-2 { color: var(--t2) !important; }
html[data-theme="dark"] .course-list__item.active a { color: var(--t1) !important; }

/* El encabezado del panel y su contador */
html[data-theme="dark"] .course-item__button .h5,
html[data-theme="dark"] .course-item__button h5 { color: var(--t1) !important; }
/* La flecha es un adorno de navegación, no un acento: va en gris. Se iguala la
   especificidad de la regla traducida (.detail-side-card .course-item__arrow),
   que la resolvía como color de marca. */
html[data-theme="dark"] .detail-side-card .course-item__arrow,
html[data-theme="dark"] .course-item__arrow { color: var(--t3) !important; }

/* El precio es el dato: blanco monoespaciado, moneda e IVA en gris */
html[data-theme="dark"] .detail-price-wrap .text-30,
html[data-theme="dark"] .detail-price-wrap b,
html[data-theme="dark"] .detail-price-wrap strong {
    color: var(--t1) !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -.02em;
}
html[data-theme="dark"] .detail-price-wrap .text-15,
html[data-theme="dark"] .detail-price-wrap small { color: var(--t3) !important; }

/* Los pasos pendientes son PENDIENTES, no errores: ámbar, no rojo */
html[data-theme="dark"] .idno-action__row-title { color: var(--t1) !important; }
html[data-theme="dark"] .idno-action__row-desc { color: var(--t3) !important; }
html[data-theme="dark"] .idno-action__status,
html[data-theme="dark"] .idno-pill { background: var(--wat) !important; color: var(--wa) !important; border-color: var(--wab) !important; }
html[data-theme="dark"] .idno-action__status--ok,
html[data-theme="dark"] .idno-pill--ok { background: var(--okt) !important; color: var(--ok) !important; border-color: var(--okb) !important; }
html[data-theme="dark"] .idno-action__icon .ph-x-circle,
html[data-theme="dark"] .idno-action__row .ph-x-circle { color: var(--wa) !important; }
html[data-theme="dark"] .idno-action__row .ph-check-circle { color: var(--ok) !important; }

/* La miga de pan: el tramo actual no va en rojo */
html[data-theme="dark"] .detail-breadcrumb a { color: var(--t3) !important; }
html[data-theme="dark"] .detail-breadcrumb .active,
html[data-theme="dark"] .detail-breadcrumb span:last-child { color: var(--t2) !important; }
/* «Acción requerida» es un aviso pendiente, no un error */
html[data-theme="dark"] .detail-alert-action,
html[data-theme="dark"] .idno-action__head { background: var(--wat); border: 1px solid var(--wab); color: var(--t1); background-image: none; }

/* ══════════════════════ Gestión de la solicitud ══════════════════════════ */

html[data-theme="dark"] .step-header,
html[data-theme="dark"] .solicitud-accordion,
html[data-theme="dark"] .experiencia-block { background: var(--s2); border-color: var(--l1); background-image: none; }
html[data-theme="dark"] .schemes-panel,
html[data-theme="dark"] .document-card,
html[data-theme="dark"] .modality-card,
html[data-theme="dark"] .experiencia-row { background: var(--s1); border-color: var(--l1); background-image: none; }

/* Zona de carga: guiones sobre superficie hundida */
html[data-theme="dark"] .upload-dropzone {
    background: var(--s1);
    border: 1.5px dashed var(--l2);
    color: var(--t3);
}
html[data-theme="dark"] .upload-dropzone:hover { border-color: var(--rb); background: var(--s3); color: var(--t2); }
/* Cargado = aprobado: verde. Pendiente de firma = acción: acento. */
html[data-theme="dark"] .uploaded-state-box {
    background: var(--okt);
    border: 1px solid var(--okb);
    color: var(--t1);
    background-image: none;
}
html[data-theme="dark"] .firma-signature-card {
    background: var(--rt);
    border: 1px solid var(--rb);
    color: var(--t1);
    background-image: none;
}
/* El esquema elegido sube de superficie y marca su filo con acento */
html[data-theme="dark"] .scheme-item.is-selected,
html[data-theme="dark"] .scheme-card.selected,
html[data-theme="dark"] .modality-radio-option.active {
    background: var(--rt);
    border-color: var(--rb);
}
html[data-theme="dark"] .modality-card__title { color: var(--t1); }
html[data-theme="dark"] .modality-card__subtitle { color: var(--t3); }
html[data-theme="dark"] .modality-card__icon { background: var(--s3); color: var(--rl); background-image: none; }

/* El paso a paso de la firma */
html[data-theme="dark"] .firma-step-item { color: var(--t3); }
html[data-theme="dark"] .firma-step-item.is-done { color: var(--ok); }
html[data-theme="dark"] .firma-step-item.is-active { color: var(--t1); }
html[data-theme="dark"] .firma-step-label { color: inherit; }
html[data-theme="dark"] .step-indicator { background: var(--r); color: #fff; }
html[data-theme="dark"] .solicitud-breadcrumb { background: transparent; color: var(--t3); }

/* ══════════════════════ Agendar pruebas · calendarios ════════════════════ */

/* El mini calendario venía escrito en rojo entero: mes, flechas, días de la
   semana y fechas. En oscuro eso pesa demasiado y además cuesta leerlo. Pasa a
   la escala de texto; el rojo se queda SOLO en el día de hoy, que es el dato. */
html[data-theme="dark"] .mini-display { color: var(--t1) !important; }
html[data-theme="dark"] .mini-calendar__header { background: var(--s1) !important; background-image: none !important; border-color: var(--l1) !important; }
html[data-theme="dark"] .mini-calendar__arrow {
    color: var(--t2) !important;
    border-color: var(--l2) !important;
    background: transparent !important;
    background-image: none !important;
}
html[data-theme="dark"] .mini-calendar__arrow:hover {
    background: var(--s3) !important;
    background-image: none !important;
    border-color: var(--l3) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .mini-week,
html[data-theme="dark"] .mini-week div,
html[data-theme="dark"] .mini-weekdays,
html[data-theme="dark"] .mini-weekdays div { color: var(--t3) !important; border-color: var(--l1) !important; }
html[data-theme="dark"] .mini-days div { color: var(--t2) !important; }
html[data-theme="dark"] .mini-days div:hover { background: var(--s3) !important; color: var(--t1) !important; }
html[data-theme="dark"] .mini-days .mini-otro-mes,
html[data-theme="dark"] .mini-days div.muted { color: var(--t4) !important; }
/* Hoy: relleno de acento, que es su papel. La regla va con la MISMA
   especificidad que la de las fechas (.mini-days div), o el tono de cuerpo le
   gana al blanco y el número queda en 2.97 de contraste sobre el rojo. */
html[data-theme="dark"] .mini-days .mini-current-date,
html[data-theme="dark"] .mini-days div.mini-current-date {
    background-color: var(--r) !important;
    color: #fff !important;
}
html[data-theme="dark"] .mini-has-event::after { background-color: var(--rl) !important; }
html[data-theme="dark"] .mini-no-events,
html[data-theme="dark"] .mini-event-empty { color: var(--t3) !important; }

/* «Ver inducción» es un botón secundario: contorno claro y texto blanco */
html[data-theme="dark"] .schedule-induction-btn,
html[data-theme="dark"] .assignments-induction-btn,
html[data-theme="dark"] .btn-outline-main {
    color: var(--t1) !important;
    border-color: var(--l3) !important;
    background: transparent !important;
    background-image: none !important;
}
html[data-theme="dark"] .schedule-induction-btn:hover,
html[data-theme="dark"] .assignments-induction-btn:hover,
html[data-theme="dark"] .btn-outline-main:hover {
    background: var(--s3) !important;
    background-image: none !important;
    border-color: var(--t4) !important;
    color: var(--t1) !important;
}

/* El calendario grande: rejilla en líneas claras y números legibles */
html[data-theme="dark"] .fc { --fc-border-color: var(--l1); --fc-page-bg-color: transparent; --fc-neutral-bg-color: var(--s1); }
html[data-theme="dark"] .fc .fc-col-header-cell-cushion { color: var(--t3) !important; }
html[data-theme="dark"] .fc .fc-daygrid-day-number { color: var(--t2) !important; }
/* Igual que en flatpickr: los dias del mes vecino se pueden pulsar —desde el
   calendario de aulas se crea evento en ellos—, asi que son contenido activo y
   van al 54 %. Al 28 % median 2,39. */
html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number { color: var(--t3) !important; }
html[data-theme="dark"] .fc .fc-toolbar-title { color: var(--t1) !important; }
html[data-theme="dark"] .fc .fc-day-today { background: var(--s1) !important; }

/* ══════════════════════ Vistas de administración ═════════════════════════ */

/* Los DATOS y los titulares van en blanco. La variable de tinta del patrón
   (--au-ink / --ac-ink) es el peso de CUERPO, así que un nombre de usuario o una
   cifra de KPI se quedaban en 68% cuando son justamente lo que se viene a leer. */
html[data-theme="dark"] .au-title,
html[data-theme="dark"] .ac-title,
html[data-theme="dark"] .au-user-name,
html[data-theme="dark"] .au-kpi-n,
html[data-theme="dark"] .ac-kpi-n { color: var(--t1) !important; }
html[data-theme="dark"] .au-subtitle,
html[data-theme="dark"] .ac-subtitle,
html[data-theme="dark"] .au-kpi-l,
html[data-theme="dark"] .ac-kpi-l,
html[data-theme="dark"] .au-user-doc { color: var(--t3) !important; }

/* Tablas: cabecera hundida en s1, y el hover SUBE a s3.
   La traducción automática mandaba el hover a s1 —más oscuro que la tarjeta—,
   que es la dirección contraria: al pasar el cursor la fila tiene que aclararse. */
html[data-theme="dark"] .au-table thead th,
html[data-theme="dark"] .ac-table thead th {
    background: var(--s1) !important;
    color: var(--t3) !important;
    border-bottom-color: var(--l2) !important;
}
html[data-theme="dark"] .au-table tbody td,
html[data-theme="dark"] .ac-table tbody td {
    color: var(--t2) !important;
    border-bottom-color: var(--l1) !important;
}
html[data-theme="dark"] .au-table tbody tr:hover,
html[data-theme="dark"] .ac-table tbody tr:hover { background: var(--s3) !important; }
html[data-theme="dark"] .au-table tbody tr:hover td,
html[data-theme="dark"] .ac-table tbody tr:hover td { color: var(--t1) !important; }
html[data-theme="dark"] .au-table tbody td b,
html[data-theme="dark"] .ac-table tbody td b,
html[data-theme="dark"] .au-table tbody td strong { color: var(--t1) !important; }

/* Buscador y filtros: son CAMPOS, así que van hundidos sobre la tarjeta */
html[data-theme="dark"] .au-search,
html[data-theme="dark"] .ac-search,
html[data-theme="dark"] .au-filter,
html[data-theme="dark"] .ac-filter {
    background: var(--s1) !important;
    border-color: var(--l2) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .au-search input,
html[data-theme="dark"] .ac-search input { color: var(--t1) !important; background: transparent !important; }
html[data-theme="dark"] .au-search input::placeholder,
html[data-theme="dark"] .ac-search input::placeholder { color: var(--t3) !important; }
html[data-theme="dark"] .au-search i,
html[data-theme="dark"] .ac-search i { color: var(--t3) !important; }
html[data-theme="dark"] .au-search:focus-within,
html[data-theme="dark"] .au-filter:focus { border-color: var(--rl) !important; box-shadow: 0 0 0 3px var(--rt) !important; }

/* Tarjetas de KPI: superficie de tarjeta; el hover sube y el seleccionado se
   marca con acento tenue, no con un borde rojo suelto. */
html[data-theme="dark"] .au-kpi,
html[data-theme="dark"] .ac-kpi { background: var(--s2) !important; border-color: var(--l1) !important; }
html[data-theme="dark"] .au-kpi:hover,
html[data-theme="dark"] .ac-kpi:hover {
    background: var(--s3) !important;
    border-color: var(--l3) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .au-kpi.is-active,
html[data-theme="dark"] .ac-kpi.is-active { background: var(--rt) !important; border-color: var(--rb) !important; }
html[data-theme="dark"] .au-kpi--static { background: var(--s1) !important; }

/* DataTables: el paginador deja de ser una fila de enlaces rojos */
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-theme="dark"] .idt-table-card .dataTables_info,
html[data-theme="dark"] .idt-table-card .dt-info { color: var(--t3) !important; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .idt-table-card .dataTables_filter input,
html[data-theme="dark"] .idt-table-card .dataTables_length select {
    background: var(--s1) !important;
    border-color: var(--l2) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .dt-paging .page-link,
html[data-theme="dark"] .idt-table-card .dt-paging .page-link,
html[data-theme="dark"] .dataTables_paginate .paginate_button {
    background: transparent !important;
    border-color: var(--l2) !important;
    color: var(--t3) !important;
}
html[data-theme="dark"] .dt-paging .page-link:hover,
html[data-theme="dark"] .idt-table-card .dt-paging .page-link:hover,
html[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
    background: var(--s3) !important;
    border-color: var(--l3) !important;
    color: var(--t1) !important;
}
/* La página actual: relleno de acento, que es lo activo */
html[data-theme="dark"] .dt-paging .page-item.active .page-link,
html[data-theme="dark"] .idt-table-card .dt-paging .page-item.active .page-link,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current {
    background: var(--r) !important;
    border-color: var(--r) !important;
    color: #fff !important;
}
html[data-theme="dark"] .dt-paging .page-item.disabled .page-link,
html[data-theme="dark"] .dataTables_paginate .paginate_button.disabled { color: var(--t4) !important; background: transparent !important; }


/* ============================================================================
   Tablero ejecutivo · /admin/dashboard-admin
   ============================================================================
   El tablero define sus propios colores en una sola variable por rol (--dax-*),
   y la vista ya los apunta a los tokens. El problema es que la hoja generada
   traduce ADEMAS la regla del fondo de la pagina, y la manda al mismo nivel que
   las tarjetas: todo queda plano. Aqui se devuelve la decision a la variable de
   la vista, que es la unica fuente.

   La escalera queda: pagina s1 (hundida) < tarjetas y barra de filtros s2 <
   globo de datos s4 (flota). En oscuro lo que separa es el escalon de
   superficie, no el borde ni la sombra. */
html[data-theme="dark"] .admin-dashboard-modern.dax-root,
html[data-theme="dark"] .dax-root { background: var(--dax-bg) !important; }

/* El escalon de superficie entre la pagina y la tarjeta es de un solo peldano
   (razon 1,06): se nota, pero no dibuja el canto. El borde lo remata, y tiene
   que ser el de 13 % — con el de 7 % el canto queda en 1,26 contra la pagina,
   que a tamano real no se ve. */
html[data-theme="dark"] .dax-card,
html[data-theme="dark"] .dax-kpi,
html[data-theme="dark"] .dax-toolbar { border-color: var(--l2) !important; }

/* Un KPI se levanta al pasar el raton; no cambia de color, sube de superficie. */
html[data-theme="dark"] .dax-kpi:hover { background: var(--s3) !important; }

/* Las filas de tabla del tablero: la que se senala SUBE, no se oscurece. */
html[data-theme="dark"] .dax-tbl tbody tr:hover,
html[data-theme="dark"] .dax-conv__tabla tbody tr:hover { background: var(--s3) !important; }
html[data-theme="dark"] .dax-tbl thead th,
html[data-theme="dark"] .dax-conv__tabla thead th { background: var(--s1) !important; color: var(--t3) !important; }

/* La pestana activa se marca con el rojo legible y su subrayado con el de relleno. */
html[data-theme="dark"] .dax-tab.is-active { border-bottom-color: var(--r) !important; }


/* ============================================================================
   Ventanas flotantes de terceros: select2, flatpickr y SweetAlert2
   ============================================================================
   Estas tres librerías se cargan desde CDN y pintan sus paneles en blanco. No hay
   hoja por vista que las alcance: el desplegable de select2 y el calendario de
   flatpickr se cuelgan del <body>, fuera del árbol de la vista, y el aviso de
   SweetAlert2 también. Sin este bloque, en oscuro salen tres planchas blancas —y
   son 7 vistas con select2, 2 con flatpickr y 42 con SweetAlert2.

   Criterio: un panel que FLOTA sube de superficie (s3, y el aviso a s4, que se
   despega más), mientras un campo dentro de él se HUNDE (s1). Lo seleccionado se
   marca con el tinte de acento; solo lo que está bajo el cursor se lleva el
   relleno macizo, que es donde el blanco de su texto se justifica. */

/* ── select2 ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--s1) !important;
    border-color: var(--l2) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered { color: var(--t1) !important; }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-theme="dark"] .select2-selection__placeholder { color: var(--t3) !important; }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--t3) !important; }

/* El desplegable flota: sube a s3 y se cierra con la línea del 22 %, que es la
   única que se ve contra el fondo de página. */
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--s3) !important;
    border-color: var(--l3) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--s1) !important;
    border-color: var(--l2) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .select2-results__option { color: var(--t2) !important; background-color: transparent !important; }
html[data-theme="dark"] .select2-results__option[aria-selected="true"],
html[data-theme="dark"] .select2-results__option--selected {
    background-color: var(--rt) !important;
    color: var(--t1) !important;
}
/* Solo lo que está bajo el cursor lleva relleno macizo. */
html[data-theme="dark"] .select2-results__option--highlighted,
html[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--r) !important;
    color: #fff !important;
}
html[data-theme="dark"] .select2-results__option--highlighted small,
html[data-theme="dark"] .select2-results__option--highlighted .text-muted { color: rgba(255,255,255,.82) !important; }
html[data-theme="dark"] .select2-results__message { color: var(--t3) !important; }
/* Las etiquetas de la versión múltiple: tinte de acento, no relleno. */
html[data-theme="dark"] .select2-selection__choice {
    background-color: var(--rt) !important;
    border-color: var(--rb) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .select2-selection__choice__remove { color: var(--rl) !important; }
html[data-theme="dark"] .select2-container--disabled .select2-selection { background-color: var(--s0) !important; color: var(--t4) !important; }

/* ── flatpickr ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .flatpickr-calendar {
    background: var(--s3) !important;
    border: 1px solid var(--l3) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
    color: var(--t1) !important;
}
/* El picuito que apunta al campo tiene que ser del color del panel, no blanco. */
html[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:before { border-bottom-color: var(--l3) !important; border-top-color: var(--l3) !important; }
html[data-theme="dark"] .flatpickr-calendar.arrowTop:after,
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-bottom-color: var(--s3) !important; border-top-color: var(--s3) !important; }
html[data-theme="dark"] .flatpickr-months,
html[data-theme="dark"] .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month,
html[data-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--t1) !important; fill: var(--t1) !important; background: transparent !important; }
html[data-theme="dark"] .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-monthDropdown-month { background: var(--s3) !important; color: var(--t1) !important; }
html[data-theme="dark"] .flatpickr-prev-month svg,
html[data-theme="dark"] .flatpickr-next-month svg { fill: var(--t2) !important; }
html[data-theme="dark"] .flatpickr-prev-month:hover svg,
html[data-theme="dark"] .flatpickr-next-month:hover svg { fill: var(--rl) !important; }
html[data-theme="dark"] .flatpickr-weekdays { background: transparent !important; }
html[data-theme="dark"] span.flatpickr-weekday { color: var(--t3) !important; background: transparent !important; }
html[data-theme="dark"] .flatpickr-days,
html[data-theme="dark"] .dayContainer { background: transparent !important; }
html[data-theme="dark"] .flatpickr-day { color: var(--t1) !important; background: transparent !important; border-color: transparent !important; }
html[data-theme="dark"] .flatpickr-day:hover { background: var(--s4) !important; border-color: var(--s4) !important; }
/* Los días del mes vecino se atenúan, no desaparecen. Van al 54 % y no al 28 %:
   en flatpickr esos días SE PUEDEN pulsar (cambian de mes), así que son contenido
   activo y tienen que llegar a AA — al 28 % medían 2,46. */
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--t3) !important; }
html[data-theme="dark"] .flatpickr-day.today { border-color: var(--rb) !important; color: var(--rl) !important; }
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover { color: var(--t4) !important; background: transparent !important; }
html[data-theme="dark"] .flatpickr-time input,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm,
html[data-theme="dark"] .flatpickr-time .flatpickr-time-separator { color: var(--t1) !important; background: transparent !important; }
html[data-theme="dark"] .flatpickr-time input:hover,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover { background: var(--s4) !important; }
html[data-theme="dark"] .numInputWrapper span { border-color: var(--l2) !important; }
html[data-theme="dark"] .numInputWrapper span:after { border-bottom-color: var(--t2) !important; border-top-color: var(--t2) !important; }
html[data-theme="dark"] .flatpickr-innerContainer,
html[data-theme="dark"] .flatpickr-rContainer,
html[data-theme="dark"] .flatpickr-time { border-color: var(--l2) !important; }

/* ── SweetAlert2 ─────────────────────────────────────────────────────────── */
/* El aviso interrumpe: sube a s4, un peldaño por encima de cualquier panel. */
html[data-theme="dark"] .swal2-popup {
    background: var(--s4) !important;
    border: 1px solid var(--l2) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .swal2-title { color: var(--t1) !important; }
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content { color: var(--t2) !important; }
html[data-theme="dark"] .swal2-footer { color: var(--t3) !important; border-top-color: var(--l2) !important; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select,
html[data-theme="dark"] .swal2-file {
    background: var(--s1) !important;
    border-color: var(--l2) !important;
    color: var(--t1) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .swal2-input::placeholder,
html[data-theme="dark"] .swal2-textarea::placeholder { color: var(--t3) !important; }
html[data-theme="dark"] .swal2-validation-message { background: var(--ert) !important; color: var(--er) !important; }
/* Un botón principal por aviso: el de confirmar, con el rojo de marca. Sin esto se
   queda con el violeta que trae la librería (#7066e0), que no es de ninguna paleta
   de ATLAS y encima solo da 4,50 con su texto blanco. El de cancelar es superficie. */
html[data-theme="dark"] .swal2-styled.swal2-confirm {
    background-color: var(--r) !important;
    border: 1px solid var(--r) !important;
    color: #fff !important;
}
html[data-theme="dark"] .swal2-styled.swal2-cancel,
html[data-theme="dark"] .swal2-styled.swal2-deny {
    background-color: var(--s2) !important;
    border: 1px solid var(--l2) !important;
    color: var(--t1) !important;
}
html[data-theme="dark"] .swal2-close { color: var(--t3) !important; }
html[data-theme="dark"] .swal2-close:hover { color: var(--t1) !important; }
html[data-theme="dark"] .swal2-timer-progress-bar { background: var(--rb) !important; }
html[data-theme="dark"] .swal2-container.swal2-backdrop-show { background: rgba(0,0,0,.72) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAS VARIABLES CENTRALES DE BOOTSTRAP
   ═══════════════════════════════════════════════════════════════════════════
   Bootstrap 5.3 construye TODOS sus componentes sobre un puñado de variables:
   --bs-card-bg es var(--bs-body-bg), --bs-accordion-bg también, y lo mismo el
   modal, el desplegable, el list-group, el form-control y la paginación.

   El tema solo definía las de tabla y tooltip, así que cualquier componente de
   Bootstrap que una vista usara TAL CUAL salía blanco por mucho que la vista
   estuviera convertida: el color no está en el CSS de la vista, está en Bootstrap.
   De aquí venían el acordeón blanco de Formación, el botón «Cancelar» gris claro de
   los modales, la paginación clara fuera de las tablas del panel y el cuerpo blanco
   del editor de contenido legal.

   Se traduce el juego completo a los tokens del sistema. Bootstrap trae su propio
   [data-bs-theme="dark"], pero el aplicativo conmuta con data-theme, así que las
   mismas variables se declaran aquí.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    /* Cuerpo y texto */
    --bs-body-bg: var(--s0);
    --bs-body-bg-rgb: 10, 7, 8;
    --bs-body-color: var(--t2);
    --bs-body-color-rgb: 251, 248, 249;
    --bs-emphasis-color: var(--t1);
    --bs-emphasis-color-rgb: 251, 248, 249;
    --bs-secondary-color: var(--t3);
    --bs-tertiary-color: var(--t4);
    --bs-heading-color: var(--t1);

    /* Superficies de apoyo: las usan los estados «disabled», los rellenos suaves
       y varios componentes como fondo alterno. */
    --bs-secondary-bg: var(--s2);
    --bs-secondary-bg-rgb: 26, 20, 22;
    --bs-tertiary-bg: var(--s1);
    --bs-tertiary-bg-rgb: 18, 14, 15;

    /* Líneas */
    --bs-border-color: var(--l2);
    --bs-border-color-translucent: var(--l1);

    /* Enlaces y código */
    --bs-link-color: var(--rl);
    --bs-link-color-rgb: 255, 107, 127;
    --bs-link-hover-color: var(--t1);
    --bs-code-color: var(--rl);
    --bs-highlight-bg: var(--wat);
}

/* Los componentes cuyo fondo NO deriva del cuerpo: se les da la superficie de
   tarjeta, que es la que les corresponde por jerarquía (flotan sobre la página). */
html[data-theme="dark"] .card,
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .toast {
    --bs-card-bg: var(--s2);
    --bs-accordion-bg: var(--s2);
    --bs-modal-bg: var(--s2);
    --bs-dropdown-bg: var(--s2);
    --bs-list-group-bg: var(--s2);
    --bs-offcanvas-bg: var(--s2);
    --bs-toast-bg: var(--s2);
}

/* El acordeón: el fondo del botón abierto y —lo que más se nota— la flechita, que
   Bootstrap incrusta como un SVG oscuro en una data URI. En oscuro hay que darle
   una clara o desaparece. */
html[data-theme="dark"] .accordion {
    --bs-accordion-btn-color: var(--t2);
    --bs-accordion-btn-bg: var(--s2);
    --bs-accordion-active-color: var(--t1);
    --bs-accordion-active-bg: var(--s3);
    --bs-accordion-border-color: var(--l2);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FBF8F9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF6B7F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* El botón secundario y su versión de contorno: son el «Cancelar» de casi todos
   los modales y en oscuro se quedaban gris claro, gritando más que el primario. */
html[data-theme="dark"] .btn-secondary {
    --bs-btn-bg: var(--s3);
    --bs-btn-border-color: var(--l2);
    --bs-btn-color: var(--t1);
    --bs-btn-hover-bg: var(--s4, #2C2326);
    --bs-btn-hover-border-color: var(--l2);
    --bs-btn-hover-color: var(--t1);
    --bs-btn-active-bg: var(--s4, #2C2326);
    --bs-btn-active-border-color: var(--l2);
    --bs-btn-active-color: var(--t1);
    --bs-btn-disabled-bg: var(--s2);
    --bs-btn-disabled-border-color: var(--l1);
    --bs-btn-disabled-color: var(--t4);
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-light {
    --bs-btn-color: var(--t2);
    --bs-btn-border-color: var(--l2);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--s3);
    --bs-btn-hover-border-color: var(--l2);
    --bs-btn-hover-color: var(--t1);
    --bs-btn-active-bg: var(--s3);
    --bs-btn-active-color: var(--t1);
    --bs-btn-disabled-color: var(--t4);
    --bs-btn-disabled-border-color: var(--l1);
}

/* La paginación de Bootstrap FUERA de las tablas del panel (las de dentro ya las
   resuelve .idt-table-card más arriba). */
html[data-theme="dark"] .pagination {
    --bs-pagination-bg: var(--s2);
    --bs-pagination-color: var(--t2);
    --bs-pagination-border-color: var(--l2);
    --bs-pagination-hover-bg: var(--s3);
    --bs-pagination-hover-color: var(--t1);
    --bs-pagination-hover-border-color: var(--l2);
    --bs-pagination-focus-bg: var(--s3);
    --bs-pagination-focus-color: var(--t1);
    --bs-pagination-active-bg: var(--r);
    --bs-pagination-active-border-color: var(--r);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: var(--s1);
    --bs-pagination-disabled-color: var(--t4);
    --bs-pagination-disabled-border-color: var(--l1);
}
/* La página ACTIVA va en blanco sobre el rojo de marca. Hace falta !important porque
   una vista del postulante estiliza «.page-link» sin acotar y de ahí sale una regla
   generada con color:var(--rl) !important: sobre el relleno rojo del activo eso da
   1,97 de contraste — rojo sobre rojo. */
html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .active > .page-link,
html[data-theme="dark"] .page-link.active { color: #fff !important; }

/* Los avisos CLAROS de Bootstrap: .alert-light y .alert-secondary se quedaban casi
   blancos —su color sale de la variante «light» del tema— mientras el texto de dentro,
   escrito con las utilidades text-gray-*, sí subía a claro. Claro sobre claro: el
   cuadro «Aún no hay actas registradas para este usuario» del seguimiento se leía
   solo al seleccionarlo con el ratón. */
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-white {
    --bs-alert-bg: var(--s1);
    --bs-alert-color: var(--t2);
    --bs-alert-border-color: var(--l2);
    --bs-alert-link-color: var(--rl);
}
/* El mismo cuadro trae border-gray-200 y text-gray-600 de la plantilla: se dejan
   coherentes con la superficie que ahora tienen debajo. */
html[data-theme="dark"] .alert-light.border-gray-200,
html[data-theme="dark"] .alert-secondary.border-gray-200 { border-color: var(--l2) !important; }

/* Migas de pan: solo color, pero son 69 vistas. */
html[data-theme="dark"] .breadcrumb {
    --bs-breadcrumb-divider-color: var(--t4);
    --bs-breadcrumb-item-active-color: var(--t2);
}

/* Tablas rayadas y con borde: el fondo de la raya lo pone Bootstrap con un negro
   translúcido que sobre oscuro no se ve, así que se sube a la superficie de hover. */
html[data-theme="dark"] .table {
    --bs-table-striped-bg: var(--s1);
    --bs-table-striped-color: var(--t2);
    --bs-table-hover-bg: var(--s3);
    --bs-table-hover-color: var(--t1);
    --bs-table-border-color: var(--l2);
}

/* ── Tooltip de Bootstrap ────────────────────────────────────────────────────
   Lo usan once vistas del panel y no tenía ni una regla. En claro funciona por
   accidente: el tooltip de Bootstrap es negro con texto blanco, así que se lee.
   En oscuro ese negro cae sobre --s0 (#0A0708) y el globo pierde su silueta: se
   lee el texto pero no se ve DÓNDE empieza ni a qué apunta.

   El sistema ya tenía reservado el token para esto —«--s5: tooltip, barra de
   desplazamiento»— y nadie lo había conectado. Se usa ese, con línea y sombra
   para que el globo tenga borde propio contra el fondo. */
html[data-theme="dark"] .tooltip {
    --bs-tooltip-bg: var(--s5);
    --bs-tooltip-color: var(--t1);
    --bs-tooltip-opacity: 1;
}
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--s5) !important;
    color: var(--t1) !important;
    border: 1px solid var(--l2);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}
/* La flecha se pinta con border-color, no con background: hay que darle el tono
   por su lado, y cada posición usa un borde distinto. */
html[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--s5) !important;
}
html[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--s5) !important;
}
html[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--s5) !important;
}
html[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--s5) !important;
}

/* La barra de desplazamiento, del mismo token: en oscuro la del navegador se
   queda clara y parte en dos cada tabla larga y cada cajón lateral. */
html[data-theme="dark"] * { scrollbar-color: var(--s5) transparent; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--s5);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4A3B40; background-clip: padding-box; }

/* ============================================================================
   main.css — LA HOJA DE LA PLANTILLA COMPRADA
   ----------------------------------------------------------------------------
   Es la última hoja de terceros que carga el layout, tiene 2182 reglas y usa
   !important a mano llena. Ninguno de los dos generadores del tema la miraba,
   así que todo lo que ella fija con !important pasaba por encima del tema. Un
   barrido de sus 97 declaraciones !important de color, resolviendo cada valor
   contra los tokens de oscuro en el navegador, dejó estas nueve de verdad.
   Se responde con la misma fuerza y solo donde hace falta.
   ============================================================================ */

/* 1 · TODOS LOS MODALES SALÍAN EN NEGRO
   main.css:291 → .modal-content { color: black !important }
   Es lo que el usuario vio como «en todos los modales de todas las vistas esos
   textos están muy negros»: medido, 1,16 de contraste. Y no es solo el modal:
   /admin/reports y /admin/evaluate-nc son paneles a pantalla completa montados
   sobre .modal-content, de ahí que «Fecha informe», «Resultado total NC» y
   compañía salieran negras sobre fondo oscuro. */
html[data-theme="dark"] .modal-content { color: var(--t2) !important; }

/* 2 · EL RÓTULO DE LOS BOTONES
   main.css:291 → .btn { color: hsl(var(--white)) !important }
   Y en oscuro --white ES la superficie de las tarjetas (así se apaga .bg-white,
   que se usa 120 veces): el rótulo quedaba del mismo color que el fondo. Eso era
   el «Cerrar» de Evaluar NC y el «Restaurar Originales» del modal de colores.
   Se devuelve al casi-blanco, que es lo que hsl(var(--white)) daba en claro. */
html[data-theme="dark"] .btn { color: var(--t1) !important; }
/* Los de contorno llevan su propio color en main.css y hay que respetarlo:
   el de marca en rojo legible, el gris en texto secundario. */
html[data-theme="dark"] .btn-outline-main,
html[data-theme="dark"] .btn-outline-main:focus { color: var(--rl) !important; }
html[data-theme="dark"] .btn-outline-gray,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-light { color: var(--t2) !important; }
html[data-theme="dark"] .btn-outline-main:hover,
html[data-theme="dark"] .btn-outline-gray:hover { color: #fff !important; }

/* 3 · EL CALENDARIO DE AULAS, BLANCO DE ARRIBA A ABAJO
   main.css → #calendar { background-color: white !important }
   Y FullCalendar v6 no crea un hijo: le pone SUS clases .fc al propio #calendar.
   Así que ese blanco es el lienzo del calendario. Las celdas de día son
   transparentes, y solo las pasadas llevaban fondo propio (.fc-day-past), de ahí
   que la última semana —29, 30, 31 y los días de septiembre— se viera flotando
   sobre blanco con los números ilegibles. */
html[data-theme="dark"] #calendar { background-color: var(--s2) !important; }
/* El juego completo de variables de FullCalendar v6. Las declara ÉL en :root
   desde el JavaScript, así que se redeclaran aquí en .fc, que es más específico
   y además hereda a toda la rejilla. */
html[data-theme="dark"] .fc {
    --fc-page-bg-color: var(--s2);
    --fc-border-color: var(--l2);
    --fc-neutral-bg-color: var(--s1);
    --fc-neutral-text-color: var(--t3);
    --fc-today-bg-color: rgba(209, 25, 51, .10);
    --fc-highlight-color: rgba(209, 25, 51, .14);
    --fc-non-business-color: var(--s1);
    --fc-list-event-hover-bg-color: var(--s3);
    --fc-more-link-bg-color: var(--s3);
    --fc-more-link-text-color: var(--t2);
}
/* Y la base de las celdas, para que ninguna dependa de lo que haya detrás. */
html[data-theme="dark"] .fc .fc-daygrid-day,
html[data-theme="dark"] .fc .fc-timegrid-col { background-color: var(--s2); }
html[data-theme="dark"] .fc .fc-day-other { background-color: var(--s1); }
html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number { color: var(--t3); }
html[data-theme="dark"] .fc .fc-scrollgrid,
html[data-theme="dark"] .fc .fc-scroller { background-color: transparent; }
html[data-theme="dark"] .fc .fc-toolbar-title { color: var(--t1); }

/* 4 · LAS UTILIDADES DE TEXTO DE LA PLANTILLA
   No se remapean las variables --gray-200 / --gray-300 porque main.css las usa
   TAMBIÉN como color de borde en nueve sitios: subirlas a texto legible convierte
   esos bordes en las «líneas tan blancas que marean». Se corrigen las utilidades,
   que es donde se usan como texto (172 usos en 60 vistas). */
html[data-theme="dark"] .text-gray-200,
html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .hover-text-gray-200:hover,
html[data-theme="dark"] .hover-text-gray-300:hover { color: var(--t3) !important; }
/* El rojo de marca NO es color de texto en oscuro: 265 usos entre .text-main-600
   y su hover, y en oscuro daba 0,116 de luminancia — el «iconos muy negros». */
html[data-theme="dark"] .text-main,
html[data-theme="dark"] .text-main-600,
html[data-theme="dark"] .text-main-700,
html[data-theme="dark"] .hover-text-main:hover,
html[data-theme="dark"] .hover-text-main-600:hover { color: var(--rl) !important; }
/* Las utilidades de Bootstrap que fuerzan texto oscuro. */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--t1) !important; }

/* 5 · LAS UTILIDADES DE FONDO CLARO
   .bg-white ya se apaga sola por el remapeo de --white; estas no. */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] .bg-gray-500,
html[data-theme="dark"] .hover-bg-gray-200:hover,
html[data-theme="dark"] .hover-bg-gray-300:hover { background-color: var(--s1) !important; }
html[data-theme="dark"] .bg-secondary { background-color: var(--s3) !important; }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td {
    --bs-table-bg: var(--s3);
    --bs-table-color: var(--t2);
    background-color: var(--s3) !important;
    color: var(--t2) !important;
}

/* 6 · LA FLECHITA DE LOS SELECT CON ICONO
   main.css → .select-has-icon::before { color: hsl(var(--black)) !important }
   --black no se remapea (es un negro de verdad en claro), así que el chevron
   quedaba negro sobre el campo oscuro. */
html[data-theme="dark"] .select-has-icon::before { color: var(--t3) !important; }

/* 7 · LA PAGINACIÓN DE DATATABLES DE LA PLANTILLA
   main.css la pinta con var(--gray-200), que en oscuro es una línea al 22 %:
   los números de página casi no estaban. */
html[data-theme="dark"] .dt-paging-button,
html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button { color: var(--t2) !important; }
html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button:hover { color: var(--t1) !important; }

/* 8 · LAS UTILIDADES DE COLOR DE ESTADO DE BOOTSTRAP
   .text-danger y .text-success salen de --bs-danger-rgb / --bs-success-rgb, que NO
   se pueden remapear sin llevarse por delante .bg-danger y .bg-success (comparten la
   variable). Medidas sobre superficie oscura daban 4,01 — por debajo de AA. Se
   corrigen las utilidades de TEXTO y se dejan las de relleno en paz. */
html[data-theme="dark"] .text-danger { color: var(--er) !important; }
html[data-theme="dark"] .text-success { color: var(--ok) !important; }
html[data-theme="dark"] .text-warning { color: var(--wa) !important; }
html[data-theme="dark"] .text-info { color: var(--in) !important; }
html[data-theme="dark"] .text-primary { color: var(--in) !important; }
/* Dentro de un relleno de color el texto sigue siendo blanco: ahí manda el fondo. */
html[data-theme="dark"] [class*="bg-danger"] .text-danger,
html[data-theme="dark"] [class*="bg-success"] .text-success,
html[data-theme="dark"] [class*="bg-warning"] .text-warning,
html[data-theme="dark"] [class*="bg-info"] .text-info { color: inherit !important; }

/* 9 · LOS DÍAS DE OTRO MES DEL CALENDARIO
   La vista pinta .fc-day-past con !important, así que la regla generada del tema
   también lo lleva; sin !important aquí, los días de septiembre en la rejilla de
   agosto se quedaban del mismo tono que el mes en curso y se perdía la distinción
   que sí existe en claro. */
html[data-theme="dark"] .fc .fc-day-other { background-color: var(--s1) !important; }
html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number { color: var(--t3) !important; }