/* =====================================================
   Akcadmia — sitio.css
   Variables de los dos temas (paleta propia y remapeo de Bootstrap), reset,
   base del documento (tipografía, tarjetas, botones, scrollbar) y utilidades.
   ===================================================== */

/* === Variables del tema ===
   Paleta CLARA "índigo": el azul de antes era el de un panel de administración y el
   público de la plataforma son alumnos de academia. El índigo es el color con el que
   ya conviven a diario en las aplicaciones que usan, y aguanta igual de bien el lado
   del profesor, donde se gestiona dinero.

   Las superficies no son grises neutros sino grises con tinte índigo, de la familia
   del color de marca: el gris frío dejaba la pantalla plana y las tablas se leían
   como una hoja en blanco.

   Los tonos de tabla —cabecera, fila alterna y fila señalada— y el remapeo del
   primario de Bootstrap viven en akcadmia.css, no aquí: son de componentes, no del
   tema. */
:root {
    --edu-primario: #4F46E5;
    --edu-secundario: #2ECC71;
    /* El acento es el color de ACCIÓN: comprar monedas, empezar ahora. Lima, para
       que salte sobre el índigo sin competir con él. Va aparte de --edu-advertencia,
       que sigue siendo el naranja de "cuidado con esto": son dos cosas distintas
       que antes compartían valor. */
    --edu-acento: #84CC16;
    /* Sobre blanco, el lima no da contraste suficiente para texto: los textos e
       iconos usan esta versión oscurecida, y los rellenos el de arriba. */
    --edu-acento-texto: #4D7C0F;
    /* Texto que va ENCIMA del relleno lima. Negro apagado, no blanco: el blanco
       sobre lima no se lee. */
    --edu-acento-contraste: #1A2E05;
    /* DORADO = DINERO. Es la tercera familia de la paleta, junto al índigo de
       marca y al lima de acción, y significa una sola cosa: monedas Akcadmia.
       Está en variables y no suelto en cada regla porque el mismo oro lo usan la
       píldora del saldo, el bloque de la billetera, la cabecera de su tarjeta,
       el badge del saldo y la animación de monedas, en tres archivos distintos.
       Con los valores repetidos, cada retoque del tono se quedaba a medias.

       Cada token dice PARA QUÉ sirve, no qué tono es, y el bloque de tema oscuro
       de este archivo los voltea: así ninguna regla de monedas necesita ya su
       contraparte oscura. */
    --edu-moneda-relleno: #FACC15;
    --edu-moneda-relleno-hover: #EAB308;
    --edu-moneda-borde: #EAB308;
    /* Texto que va ENCIMA del relleno dorado. Es marrón porque su fondo es el oro
       brillante, NO porque el oro de la plataforma sea apagado.

       La moneda en sí ya no sale de ningún token: es un dibujo de metal con sus
       colores propios (componentes/moneda.css), así que aquí solo quedan los tonos
       del texto y de las superficies que la acompañan. */
    --edu-moneda-texto: #422006;
    /* Cifras de monedas SIN relleno detrás, sobre el fondo de la página: el saldo
       grande de la billetera, por ejemplo. */
    --edu-moneda-cifra: #EAB308;
    /* Versión diluida, para bloques amplios que solo tienen que identificarse
       como "esto es dinero" sin competir con la cifra que contienen. */
    --edu-moneda-suave: #FFFBEB;
    --edu-moneda-suave-borde: #FDE68A;
    /* VERDE = SOLES. La cuarta familia: dinero real, el que el profesor cobra y
       retira. Existe por lo mismo que el dorado: el verde estaba escrito a mano en
       las vistas con .text-success, que es el semántico de Bootstrap —"correcto"— y
       además NO se remapea en el tema oscuro, así que sobre fondo oscuro se quedaba
       en 2,3:1 de contraste.

       No sustituye a los colores de ESTADO. Retirado sigue en gris, disponible en
       índigo, contable en azul y un egreso en rojo: ahí el color dice en qué
       situación está ese dinero, no que sea dinero. */
    --edu-soles: #157347;
    --edu-peligro: #E74C3C;
    --edu-advertencia: #F39C12;
    --edu-info: #3498DB;
    --edu-oscuro: #312E81;
    --edu-claro: #EDEBFD;
    --edu-fondo: #F5F5FF;
    --edu-texto: #2A2A45;
    --edu-texto-suave: #6B6B8A;
    --edu-borde: #E0DFF7;
    --edu-radio-borde: 8px;
    --edu-radio-grande: 16px;
    --edu-sombra: 0 2px 10px rgba(0, 0, 0, 0.1);
    --edu-sombra-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
    --edu-transicion: all 300ms ease;
}

/* ─── COLOR DE MARCA EN MODO CLARO ──────────────────
   La barra, los botones y los enlaces NO salen de --edu-primario: se pintan con las
   clases de Bootstrap (bg-primary, btn-primary, text-primary), que tienen su propio
   azul compilado. Cambiar solo la variable del proyecto dejaba media pantalla con el
   azul viejo, que es justo lo que se ve en la barra superior.

   --bs-primary-rgb es la que hace el trabajo: bg-primary, text-primary y
   border-primary la usan a través de rgba(). --bs-primary la acompaña para lo que la
   lea directamente.

   Los botones son aparte: .btn-primary no lee --bs-primary sino sus propias
   --bs-btn-*, fijadas al compilar Bootstrap, así que hay que reescribirlas. */
html:not([data-tema="oscuro"]) {
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338CA;
    --bs-link-hover-color-rgb: 67, 56, 202;
}

/* === Reset básico === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* === Base de Bootstrap: forma de tarjetas y botones en toda la plataforma === */
/* ─── TARJETAS ────────────────────────────────────── */
.card {
    border-radius: 12px;
}

/* ─── BOTONES ─────────────────────────────────────── */
.btn {
    border-radius: 8px;
    font-weight: 500;
}

.btn-xs {
    padding: .15rem .4rem;
    font-size: .75rem;
    border-radius: 4px;
}

/* ─── SCROLLBAR PERSONALIZADO ─────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* === Tipografía === */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--edu-fondo);
    color: var(--edu-texto);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--edu-oscuro);
    font-weight: 600;
}

/* Encabezados sobre una franja OSCURA.

   La regla de arriba impone el color de título a todos los encabezados, y eso los
   volvía ilegibles en cuanto caían dentro de una franja de fondo oscuro: el hero de
   la portada, la apertura de /nosotros y el pie de página. El texto de alrededor sí
   se veía porque hereda del contenedor; el encabezado no, porque tiene color propio.

   Con el azul grisáceo de antes aún se adivinaban; con el índigo, sobre índigo o
   sobre gris pizarra, desaparecen.

   El arreglo es que hereden el color de su contenedor, que es justo lo que el
   contenedor ya declaró al pintarse oscuro. Vale para cualquier franja nueva sin
   tener que acordarse de nada. */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.edu-nosotros__hero h1, .edu-nosotros__hero h2 {
    color: inherit;
}

/* === Utilidades globales === */
.edu-texto-primario {
    color: var(--edu-primario) !important;
}

.edu-texto-exito {
    color: var(--edu-secundario) !important;
}

.edu-texto-peligro {
    color: var(--edu-peligro) !important;
}

.edu-texto-suave {
    color: var(--edu-texto-suave) !important;
}

.edu-fondo-primario {
    background-color: var(--edu-primario) !important;
}

.edu-fondo-exito {
    background-color: var(--edu-secundario) !important;
}

.edu-fondo-claro {
    background-color: var(--edu-claro) !important;
}

/* === Tarjetas === */
.edu-tarjeta {
    border: none;
    border-radius: var(--edu-radio-borde);
    box-shadow: var(--edu-sombra);
    transition: var(--edu-transicion);
}

    .edu-tarjeta:hover {
        box-shadow: var(--edu-sombra-hover);
    }

/* === Botones === */
.edu-boton-primario {
    background-color: var(--edu-primario);
    border-color: var(--edu-primario);
    color: #fff;
    border-radius: var(--edu-radio-borde);
    transition: var(--edu-transicion);
}

    .edu-boton-primario:hover {
        background-color: #4338CA;
        border-color: #4338CA;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--edu-sombra-hover);
    }

/* === Formularios === */
.edu-campo {
    border-radius: var(--edu-radio-borde);
    border-color: var(--edu-borde);
    transition: var(--edu-transicion);
}

    .edu-campo:focus {
        border-color: var(--edu-primario);
        box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
    }

/* === Acento: acción llamativa ===
   Botón y texto del color de acción, para el hero y las llamadas del alumno. No se
   usan las clases de Bootstrap porque su amarillo es semántico ("warning") y
   cambiarlo teñiría todos los avisos de la plataforma. */
.edu-boton-acento {
    /* Bootstrap pinta los estados pulsado (:active, .active) y deshabilitado de .btn
       con sus variables --bs-btn-active-* y --bs-btn-disabled-*, que solo trae
       definidas en sus propias variantes de color. Sin ellas, en esos dos estados el
       fondo de este botón sale transparente y el texto toma el color de alrededor.
       Pulsado va al mismo lima oscurecido del hover; deshabilitado, al lima normal,
       que .btn ya atenúa con su opacidad. */
    --bs-btn-active-bg: #74B513;
    --bs-btn-active-border-color: #74B513;
    --bs-btn-active-color: var(--edu-acento-contraste);
    --bs-btn-disabled-bg: var(--edu-acento);
    --bs-btn-disabled-border-color: var(--edu-acento);
    --bs-btn-disabled-color: var(--edu-acento-contraste);
    background-color: var(--edu-acento);
    border-color: var(--edu-acento);
    color: var(--edu-acento-contraste);
    border-radius: var(--edu-radio-borde);
    font-weight: 600;
    transition: var(--edu-transicion);
}

    .edu-boton-acento:hover,
    .edu-boton-acento:focus {
        background-color: #74B513;
        border-color: #74B513;
        color: var(--edu-acento-contraste);
        transform: translateY(-1px);
        box-shadow: var(--edu-sombra-hover);
    }

    /* Foco de TECLADO. El cambio de tono de :focus es el mismo del hover y sobre el
       lima apenas se distingue, y Bootstrap quita el contorno de .btn en
       :focus-visible. Aquí vuelve en dos capas: el contorno índigo, que se ve sobre
       superficies claras, y entre él y el botón un anillo del color de fondo, que es
       el que se ve cuando el botón está sobre una franja índigo (el hero, el cierre
       de la portada), donde el contorno se confundiría. */
    .edu-boton-acento:focus-visible {
        outline: 3px solid var(--edu-primario);
        outline-offset: 3px;
        box-shadow: 0 0 0 3px var(--edu-fondo), var(--edu-sombra-hover);
    }

.edu-texto-acento {
    color: var(--edu-acento-texto) !important;
}

/* Sobre fondo oscuro —el hero, por ejemplo— el lima oscurecido se apaga: ahí va la
   versión luminosa. */
.edu-texto-acento--claro {
    color: #A3E635 !important;
}

/* === Monedas: el dorado, y solo para esto ===
   El dorado deja de ser un color suelto repartido por vistas y pasa a significar UNA
   cosa: monedas Akcadmia. Índigo = marca, lima = acción, dorado = dinero. Antes el
   saldo y el botón de registrarse compartían amarillo, y eso hacía pensar que eran
   la misma clase de cosa.

   Es una PÍLDORA, no un botón sólido. El tono se ajustó dos veces: el crema del primer
   intento era pastel y no parecía una moneda, y el ámbar del segundo se iba al mostaza.
   Este es amarillo oro BRILLANTE, que es como se ve una moneda y lo que llama la
   atención del alumno. El texto va en marrón muy oscuro porque sobre este amarillo
   ningún claro se lee. */
.edu-monedas {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background-color: var(--edu-moneda-relleno);
    color: var(--edu-moneda-texto);
    border: 1px solid var(--edu-moneda-borde);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: var(--edu-transicion);
}

    .edu-monedas:hover,
    .edu-monedas:focus {
        background-color: var(--edu-moneda-relleno-hover);
        color: var(--edu-moneda-texto);
    }

/* La misma píldora, APRETADA. La de arriba tiene el tamaño de un botón de la barra
   de navegación, que es donde nació; el precio de una clase aparece en celdas de
   tabla y en tarjetas de la grilla, donde con ese relleno no cabe.

   Existe porque el apriete estaba escrito TRES VECES, una por componente y cada una
   con su propio nombre: en tablas.css, en horario-profesor.css y en
   horario-perfil-publico.css. Tres copias de la misma decisión, y dos pantallas de
   administración a punto de sumar la cuarta y la quinta.

   NO fija el tamaño de letra a propósito: eso lo pone cada sitio, que es lo único
   que de verdad cambia entre una tabla compacta y una tarjeta de la grilla.

   El hover se anula aquí mismo, con las dos clases juntas en el selector: gana a
   .edu-monedas:hover por especificidad, sin !important y sin depender de qué hoja se
   cargue después. La píldora de la barra ES un disparador y abre el modal de comprar
   monedas; un precio dentro de una tabla no lo es, y si cambia de tono al pasar por
   encima aparenta que se puede pulsar. */
.edu-monedas--compacta {
    padding: .1rem .5rem;
    gap: .25rem;
    transition: none;
}

.edu-monedas.edu-monedas--compacta:hover {
    background-color: var(--edu-moneda-relleno);
}

/* Cifras y iconos de monedas que NO van dentro de la píldora: el saldo grande de la
   billetera, por ejemplo. Ahí el dorado no es decoración, es lo que dice que ese
   número es dinero, y es lo que hace la tarjeta reconocible de un vistazo.

   El ámbar #B45309 del primer intento leía como marrón quemado a cuerpo grande, más
   óxido que oro. Este es el oro brillante, que sobre blanco y a cuerpo grande tiene
   contraste de sobra y sí parece una moneda.

   Sirve también sobre las franjas índigo de marca —la cabecera de un modal de
   monedas—, donde el oro luminoso destaca en los dos temas. */
.edu-texto-monedas {
    color: var(--edu-moneda-cifra) !important;
}

/* === Soles: el verde del dinero real ===
   Hermana de .edu-texto-monedas. Se pone donde el importe significa "esto es dinero"
   —el total ganado, la ganancia de una clase, un ingreso—, no donde el color indica
   un estado. */
.edu-texto-soles {
    color: var(--edu-soles) !important;
}

/* === Badges === */
.edu-badge-activo {
    background-color: var(--edu-secundario);
    color: #fff;
}

.edu-badge-inactivo {
    background-color: var(--edu-texto-suave);
    color: #fff;
}

.edu-badge-acento {
    background-color: var(--edu-acento);
    color: var(--edu-acento-contraste);
    font-weight: 600;
}

/* === Alertas personalizadas === */
.edu-alerta-exito {
    background-color: #D5F5E3;
    border-left: 4px solid var(--edu-secundario);
}

.edu-alerta-error {
    background-color: #FADBD8;
    border-left: 4px solid var(--edu-peligro);
}

.edu-alerta-info {
    background-color: #D6EAF8;
    border-left: 4px solid var(--edu-info);
}

/* El aviso tira de --edu-advertencia y ya no del acento: un aviso es naranja
   porque significa "cuidado", y el acento pasó a ser el color de acción. */
.edu-alerta-aviso {
    background-color: #FDEBD0;
    border-left: 4px solid var(--edu-advertencia);
}

/* Levantar al pasar el cursor. Vivía en akcadmia.css, que es de componentes; esto
   es una utilidad suelta que se le cuelga a cualquier elemento, así que su sitio
   es este archivo. NO es lo mismo que .edu-tarjeta:hover de aquí arriba, que solo
   profundiza la sombra: esta además desplaza el elemento. */
.hover-lift {
    transition: var(--edu-transicion);
}

    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: var(--edu-sombra-hover);
    }

/* === Separadores === */
.edu-separador {
    border: none;
    border-top: 2px solid var(--edu-borde);
    margin: 1.5rem 0;
}

/* === Spinner de carga === */
.edu-cargando {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--edu-texto-suave);
    font-size: 0.875rem;
}

/* === Animaciones === */
@keyframes edu-fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes edu-slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* .fade-in-up es el nombre con el que la portada y alguna vista suelta piden esta
   misma entrada. Tenía su propio @keyframes en akcadmia.css, idéntico salvo por el
   recorrido y la duración, así que se queda como alias de este: dos nombres, una
   sola animación. */
.edu-animar-entrada,
.fade-in-up {
    animation: edu-fadeIn 300ms ease forwards;
}

/* === Responsive helpers === */
@media (max-width: 576px) {
    .edu-ocultar-movil {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .edu-solo-movil {
        display: none !important;
    }
}

/* =====================================================
   MODO OSCURO
   =====================================================
   El grueso del tema oscuro está en akcadmia.css. Las VARIABLES tienen que
   voltearse aquí por dos motivos: es donde viven, y este archivo se carga
   DESPUÉS de akcadmia.css.

   Sin este bloque, la regla `body` de más arriba —misma especificidad que la
   de akcadmia.css, pero declarada después— devolvía la página al fondo claro
   mientras los colores de texto del tema oscuro sí se aplicaban. El resultado
   eran letras casi blancas sobre fondo blanco: los labels y los títulos
   desaparecían.

   El interruptor es el atributo data-tema del <html>, no prefers-color-scheme:
   el sistema decide el punto de partida y el usuario puede forzar el tema desde
   la barra de navegación. El selector cae sobre el mismo elemento que :root, así
   que las variables se sobrescriben igual y además con más especificidad.

   Regla para lo que venga: cualquier color claro fijo que se escriba en este
   archivo necesita su contraparte aquí abajo, o se quedará claro cuando el
   resto de la página no lo esté. */
[data-tema="oscuro"] {
    --edu-fondo: #0F172A;
    --edu-texto: #CBD5E1;
    --edu-texto-suave: #94A3B8;
    --edu-borde: #334155;
    --edu-claro: #334155;
    /* La marca nueva baja también al tema oscuro, pero en su versión LUMINOSA: el
       índigo de la paleta clara es profundo y sobre #0F172A se apagaría. Lo demás
       del tema oscuro —fondos, bordes y superficies— no se toca. */
    --edu-primario: #818CF8;
    --edu-oscuro: #2C3E50;
    /* Mismo criterio con el acento: el lima sube de tono para separarse del fondo,
       y el texto que va encima sigue siendo oscuro. */
    --edu-acento: #A3E635;
    --edu-acento-texto: #BEF264;
    /* El oro se invierte: sobre fondo oscuro el amarillo brillante deslumbra, así
       que el relleno pasa a ámbar profundo y lo que antes era texto oscuro sube a
       dorado claro. El significado no cambia, solo la dirección del contraste. */
    --edu-moneda-relleno: #3A2A0C;
    --edu-moneda-relleno-hover: #4A360F;
    --edu-moneda-borde: #78350F;
    --edu-moneda-texto: #FDE68A;
    --edu-moneda-cifra: #FBBF24;
    --edu-moneda-suave: #2A1E08;
    --edu-moneda-suave-borde: #78350F;
    /* El verde de Bootstrap no conmuta con el tema y sobre fondo oscuro se queda
       en 2,3:1. Este es el valor que la propia librería usa en su tema oscuro para
       el texto de éxito, así que el verde del dinero y el del resto de la interfaz
       siguen siendo el mismo. */
    --edu-soles: #75B798;
    /* Las sombras negras no se ven sobre fondo oscuro: se marcan más para
       que las tarjetas conserven relieve. */
    --edu-sombra: 0 2px 10px rgba(0, 0, 0, 0.45);
    --edu-sombra-hover: 0 4px 20px rgba(0, 0, 0, 0.6);
    /* Remapeo de Bootstrap para el tema oscuro: versión luminosa del índigo,
       la que se lee sobre #0F172A. */
    --bs-primary: #818CF8;
    --bs-primary-rgb: 129, 140, 248;
    --bs-link-color: #A5B4FC;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #C7D2FE;
    --bs-link-hover-color-rgb: 199, 210, 254;
}

    /* ─── MODO OSCURO (básico) ──────────────────────────
   Se activa con el atributo data-tema del <html> y ya no con
   prefers-color-scheme: la configuración del sistema es solo el punto de
   partida, y desde la barra de navegación se puede forzar claro u oscuro.
   Quien no elige nada sigue viendo el tema de su sistema, porque tema.js
   resuelve ese caso y escribe el mismo atributo antes del primer pintado.

   Toda regla nueva de este bloque necesita el selector del tema delante: sin él
   se aplicaría también en modo claro. */
    [data-tema="oscuro"] body {
        --bs-body-color: #cbd5e1;
        --bs-heading-color: #f1f5f9;
        --bs-emphasis-color: #f1f5f9;
        background-color: #0f172a;
        color: #cbd5e1;
        /* ── Paleta -subtle / -emphasis de Bootstrap ──────────────────────────
       Bootstrap 5.3 trae dos juegos de estas variables y conmuta entre ellos con
       data-bs-theme="dark" en el <html>. Aquí el interruptor del tema es
       data-tema, que Bootstrap no conoce, así que se quedaban SIEMPRE en los
       valores del tema claro: los -emphasis son casi negros y sobre fondo oscuro
       no se leían. Le pasaba a cualquier badge o píldora con
       bg-*-subtle / text-*-emphasis, que el proyecto usa en varias pantallas.

       Se remapean aquí y no se activa data-bs-theme entero a propósito: ese
       atributo voltearía además tarjetas, tablas, menús y formularios, que este
       archivo ya resuelve a mano más abajo, y las dos versiones se pisarían.

       Los valores son los del tema oscuro de Bootstrap 5.3, sin inventar
       ninguno, para que el aspecto sea el que la librería espera. */
        --bs-primary-text-emphasis: #6ea8fe;
        --bs-secondary-text-emphasis: #a7acb1;
        --bs-success-text-emphasis: #75b798;
        --bs-info-text-emphasis: #6edff6;
        --bs-warning-text-emphasis: #ffda6a;
        --bs-danger-text-emphasis: #ea868f;
        --bs-light-text-emphasis: #f8f9fa;
        --bs-dark-text-emphasis: #dee2e6;
        --bs-primary-bg-subtle: #031633;
        --bs-secondary-bg-subtle: #161719;
        --bs-success-bg-subtle: #051b11;
        --bs-info-bg-subtle: #032830;
        --bs-warning-bg-subtle: #332701;
        --bs-danger-bg-subtle: #2c0b0e;
        --bs-light-bg-subtle: #343a40;
        --bs-dark-bg-subtle: #1a1d20;
        --bs-primary-border-subtle: #084298;
        --bs-secondary-border-subtle: #41464b;
        --bs-success-border-subtle: #0f5132;
        --bs-info-border-subtle: #087990;
        --bs-warning-border-subtle: #997404;
        --bs-danger-border-subtle: #842029;
        --bs-light-border-subtle: #495057;
        --bs-dark-border-subtle: #343a40;
        /* ── Superficie TERCIARIA de Bootstrap ─────────────────────
       Mismo caso que las -subtle de aquí arriba: .bg-body-tertiary pinta su fondo con
       --bs-tertiary-bg-rgb, que la librería solo voltea con data-bs-theme="dark", y aquí
       el interruptor es data-tema. Se quedaba en el gris de papel mientras el texto ya era
       claro: bloque blanco con letras blancas. Lo usan los paneles que el JavaScript pinta
       dentro de una tarjeta —el desglose de un retiro— y cualquier regla que lea
       var(--bs-tertiary-bg).

       El tono es un punto por ENCIMA del #1e293b de la tarjeta, no igual: estos paneles
       viven dentro de una y con el mismo valor dejarían de leerse como una superficie
       aparte. --bs-secondary-bg no se toca a propósito: de ella sale el fondo del campo
       deshabilitado, y los campos se quedan claros en los dos temas. */
        --bs-tertiary-bg: #223047;
        --bs-tertiary-bg-rgb: 34, 48, 71;
    }


    /* --edu-oscuro NO se voltea: su nombre y su valor siguen significando
   "azul oscuro de marca". Lo que cambia es el uso que hacen de él los títulos,
   que sobre fondo oscuro serían ilegibles, y de eso se encarga akcadmia.css: su
   regla de encabezados en tema oscuro cubre además .h1-.h6, .card-title y
   .modal-title, así que aquí había una copia más corta de lo mismo. Gana sin
   depender del orden de carga, porque lleva el atributo del tema delante y la
   regla clara de este archivo es solo h1..h6. */

    /* Alertas propias: los pasteles de arriba están pensados para página
   blanca y, con el texto ya claro, se volvían ilegibles. Se conserva el
   borde de color, que es lo que identifica cada tipo de aviso. */
    [data-tema="oscuro"] .edu-alerta-exito {
        background-color: #0F2E20;
        color: #D1FAE5;
    }

    [data-tema="oscuro"] .edu-alerta-error {
        background-color: #3B1418;
        color: #FEE2E2;
    }

    [data-tema="oscuro"] .edu-alerta-info {
        background-color: #10263A;
        color: #DBEAFE;
    }

    [data-tema="oscuro"] .edu-alerta-aviso {
        background-color: #3A2A0C;
        color: #FDE68A;
    }

/* Las monedas y los soles no aparecen en este bloque: sus colores salen de los
   tokens --edu-moneda-* y --edu-soles de arriba, que ya están volteados, así que la
   píldora, la cifra, el bloque de saldo, la cabecera de la billetera y los importes
   en verde cambian solos con el tema. La moneda dibujada no cambia: es metal y lleva
   sus colores propios, como explica componentes/moneda.css. */