/* ============================================================
 * assets/css/theme.css
 *
 * Paleta del portal en sus dos temas: claro y oscuro. Es el archivo
 * que define TODOS los colores del sistema; el resto del CSS
 * (portal-shell.css, admin-shell.css y el <style> de cada página)
 * usa estos tokens y no valores fijos.
 *
 * Se linkea DESPUÉS de Bootstrap y ANTES de los shells y del <style>
 * de la página. Lo emite temaHead() en includes/tema.php.
 *
 * ── Cómo se elige el tema ─────────────────────────────────────
 *
 * El <html> lleva dos atributos:
 *
 *   data-tema        la preferencia guardada: "auto" | "claro" |
 *                    "oscuro". La escribe el PHP con lo que dice la
 *                    cookie. Solo mueve `color-scheme`.
 *   data-tema-visto  el tema YA RESUELTO: "claro" u "oscuro", nunca
 *                    "auto". Es el que enciende la paleta oscura de
 *                    más abajo. Lo escribe el PHP cuando la
 *                    preferencia es explícita, y el script de
 *                    temaHead() cuando es "auto" y hay que preguntarle
 *                    al sistema operativo.
 *
 * Los dos se pueden cambiar en caliente: assets/js/tema.js los mueve
 * al tocar el selector y el portal se repinta sin recargar.
 *
 * `color-scheme` va aparte de la paleta porque hace algo que el CSS
 * no puede: le dice al navegador con qué tema pintar lo que no
 * controlamos: las barras de scroll, el calendario de los <input
 * type="date"> y los <select> nativos. Y como sale de data-tema, en
 * "auto" funciona por CSS puro, sin depender de JavaScript.
 *
 * ── Por qué la paleta oscura es un bloque aparte ─────────────
 *
 * Se podría declarar cada token una sola vez con light-dark(), que
 * existe justo para esto y ahorra el bloque duplicado. No se usa por
 * dos razones:
 *
 *   · Pide Chrome/Edge 123+, Firefox 120+ o Safari 17.5+, y sin
 *     soporte los var() quedan sin resolver: la página saldría
 *     transparente, no clara. Cubrir eso obliga a un bloque
 *     @supports con la paleta clara repetida, así que la duplicación
 *     no se ahorra, se mueve.
 *   · Pisar custom properties con un selector de atributo es el
 *     mecanismo de siempre, lo entiende cualquier navegador con
 *     variables CSS y no hay que explicarle nada a nadie.
 *
 * ── Criterio de la paleta ────────────────────────────────────
 *
 * Ni blanco ni negro puros, a propósito. El claro apoya tarjetas
 * casi blancas (--surface) sobre un fondo azulado (--bg), que es la
 * identidad que ya tenía el portal; el oscuro usa grises azulados
 * (#171c24 el fondo, #1f2632 las tarjetas) en vez de negro, que a
 * pantalla completa cansa y hace que las sombras no se vean.
 * ============================================================ */

:root {
    color-scheme: light dark;
}

:root[data-tema="claro"] {
    color-scheme: light;
}

:root[data-tema="oscuro"] {
    color-scheme: dark;
}

/* ============================================================
 * Tema claro
 * ============================================================ */

:root {
    /* ── Superficies ──────────────────────────────────────────
     * --bg        fondo de la página
     * --surface   tarjetas, topbar, modales, filas de tabla
     * --surface-2 zonas hundidas: cabeceras de tabla, hover, zebra
     * --surface-3 un escalón más: chips neutros, insets anidados */
    --bg: #e9eef6;
    --surface: #fbfcfe;
    --surface-2: #f2f5fa;
    --surface-3: #e8edf5;

    /* ── Texto ────────────────────────────────────────────────
     * --text       cuerpo y títulos
     * --text-2     secundario: subtítulos, celdas de apoyo
     * --text-muted terciario: leyendas, footers, placeholders
     * --on-brand   texto sobre un relleno de marca (siempre blanco)
     *
     * --text-muted es más oscuro que el gris que traía el portal
     * (#6C757D). Está calculado para llegar a 4.5:1 —el mínimo de WCAG
     * AA para texto normal— contra --bg, que es el fondo más oscuro de
     * los dos sobre los que aparece; contra --surface le sobra. Con el
     * gris anterior las etiquetas de los formularios y el pie de página
     * no llegaban. */
    --text: #1f2a37;
    --text-2: #46566b;
    --text-muted: #5d6879;
    --on-brand: #fff;

    /* ── Bordes ───────────────────────────────────────────────
     * --border      borde visible de tarjetas y campos
     * --border-soft divisiones internas, más tenues */
    --border: #d3dceb;
    --border-soft: #e6ebf3;

    /* ── Marca ────────────────────────────────────────────────
     * --brand / --brand-strong van en TEXTO e iconos, así que en
     * oscuro se aclaran: el azul institucional sobre #1f2632 no se
     * lee. --brand-fill es para RELLENOS con texto blanco encima,
     * y por eso se mantiene oscuro en los dos temas.
     * --grad-* son los degradados (welcome bars, botones, headers):
     * llevan texto blanco, así que tampoco se aclaran. */
    --brand: #004A98;
    --brand-strong: #00305e;
    --brand-fill: #004A98;
    --brand-fill-hover: #00447C;
    --brand-tint: #eaf1fb;
    --grad-a: #004A98;
    --grad-b: #00447C;

    /* Rojo institucional. --accent es el relleno; --accent-fg es el
     * mismo rojo pero legible como texto sobre --surface. */
    --accent: #E30613;
    --accent-fg: #c2000c;
    --accent-tint: #fdecec;

    /* ── Estados ──────────────────────────────────────────────
     * Cuatro familias, cada una con fondo (-bg), borde (-border),
     * texto sobre ese fondo (-fg) y relleno sólido con texto blanco
     * (-solid). Los pasteles del tema claro no sirven en oscuro:
     * ahí el fondo pasa a ser un tinte apagado del mismo tono y el
     * texto la versión clara. */
    --ok-bg: #e6f4e8;
    --ok-border: #b7ddb3;
    --ok-fg: #1e6b22;
    --ok-solid: #2e7d32;

    --warn-bg: #fdf3dd;
    --warn-border: #f0d493;
    --warn-fg: #8a5a00;
    --warn-solid: #e08600;
    /* Relleno naranja para texto BLANCO encima. --warn-solid es un color
       de indicador (una barra, un punto) y con blanco da 2.77:1, muy por
       debajo del 4.5:1 que pide WCAG AA. Va oscuro en los dos temas, como
       --brand-fill: el texto que lleva arriba es blanco en los dos. */
    --warn-fill: #8a5a00;

    --danger-bg: #fcecec;
    --danger-border: #f0bfbf;
    --danger-fg: #a12a2a;
    --danger-solid: #c62828;

    --info-bg: #e6effc;
    --info-border: #c2d8f8;
    --info-fg: #14538f;
    --info-solid: #1565c0;

    /* Dos familias de apoyo, para los estados que no entran en las
     * cuatro de arriba (categorías, etiquetas de tipo de trámite). */
    --plum-bg: #f4e8f7;
    --plum-border: #ddc2e8;
    --plum-fg: #6a1b9a;
    --plum-solid: #7b2aa8;
    --teal-bg: #e3f3f3;
    --teal-fg: #00696b;
    --teal-solid: #00898b;

    /* Relleno gris para lo que no es ni marca ni estado: el botón de
     * anular, los chips de "sin actividad". Lleva texto blanco. */
    --muted-solid: #607d8b;

    /* Brillo de los degradados radiales decorativos (la escena del
     * 404). En claro es el blanco que aclara el fondo; en oscuro un
     * azul muy tenue, porque un blanco al 95% sobre #171c24 es una
     * mancha. */
    --halo: rgba(255, 255, 255, .95);

    /* ── Sombras y velos ─────────────────────────────────────
     * En claro son azules y sutiles (la sombra tiñe, no oscurece);
     * en oscuro tienen que ser negras y bastante más marcadas para
     * que se note algún relieve. */
    --shadow-1: rgba(0, 74, 152, .06);
    --shadow-2: rgba(0, 74, 152, .12);
    --shadow-3: rgba(0, 74, 152, .25);
    --overlay: rgba(10, 16, 24, .5);

    /* ── Sidebar ─────────────────────────────────────────────
     * Estos son los del portal del profesional (azul
     * institucional). admin-shell.css pisa el par --sidebar-a/-b con
     * su azul oscuro. En tema oscuro los dos sidebars van al mismo
     * gris azulado: un sidebar saturado al lado de un fondo oscuro se
     * ve como un bloque de color pegado, no como parte de la
     * interfaz. */
    --sidebar-a: #004A98;
    --sidebar-b: #00447C;
    --sidebar-text: rgba(255, 255, 255, .75);
    --sidebar-text-hi: #fff;
    --sidebar-text-dim: rgba(255, 255, 255, .5);
    --sidebar-title: rgba(255, 255, 255, .35);
    --sidebar-line: rgba(255, 255, 255, .1);
    --sidebar-hover: rgba(255, 255, 255, .08);
    --sidebar-avatar: rgba(255, 255, 255, .15);

    /* Medidas — no son color, pero las páginas las esperan acá. */
    --sidebar-w: 260px;

    /* ── Alias heredados ─────────────────────────────────────
     * El CSS viejo usaba --primary, --primary-dark, --gray y --light.
     * Quedan como alias para que nada se rompa, pero en código nuevo
     * usá los tokens de arriba: estos no distinguen entre "azul de
     * texto" y "azul de relleno", que es justo la distinción que el
     * tema oscuro necesita. */
    --primary: var(--brand);
    --primary-dark: var(--brand-strong);
    --gray: var(--text-muted);
    --light: var(--surface-2);
}

/* ============================================================
 * Tema oscuro
 *
 * Mismos tokens, otros valores. Enciende con data-tema-visto, que ya
 * viene resuelto: acá no hay que preguntar por "auto" ni repetir el
 * bloque en un @media (prefers-color-scheme).
 * ============================================================ */

:root[data-tema-visto="oscuro"] {
    --bg: #171c24;
    --surface: #1f2632;
    --surface-2: #262f3d;
    --surface-3: #2e3849;

    --text: #e3e9f2;
    --text-2: #b3c0d1;
    /* Como el claro: calculado para 4.5:1 contra --surface-2, que es el
     * más claro de los fondos sobre los que aparece en tema oscuro. */
    --text-muted: #8d9cb0;

    --border: #33404f;
    --border-soft: #2a3542;

    --brand: #7db4e8;
    --brand-strong: #a6cdf5;
    --brand-fill: #1c5f9e;
    --brand-fill-hover: #2476c0;
    --brand-tint: #23334a;
    --grad-a: #10466f;
    --grad-b: #0c3453;

    --accent: #d8323d;
    --accent-fg: #f08c92;
    --accent-tint: #3a2226;

    --ok-bg: #1c2e21;
    --ok-border: #2f5236;
    --ok-fg: #7fce87;
    --ok-solid: #2f7d38;

    --warn-bg: #332a17;
    --warn-border: #5c4a20;
    --warn-fg: #e8bd63;
    --warn-solid: #a9750c;
    --warn-fill: #8f5e00;

    --danger-bg: #33201f;
    --danger-border: #5c2f2d;
    --danger-fg: #f19b96;
    --danger-solid: #b23434;

    --info-bg: #182a3d;
    --info-border: #2b4763;
    --info-fg: #8bc0f0;
    --info-solid: #1a68b8;

    --plum-bg: #2c2036;
    --plum-border: #4a3358;
    --plum-fg: #c79ae0;
    --plum-solid: #7e46a5;
    --teal-bg: #16302f;
    --teal-fg: #63c6c8;
    --teal-solid: #17787a;

    --muted-solid: #55697a;

    --halo: rgba(125, 180, 232, .13);

    --shadow-1: rgba(0, 0, 0, .35);
    --shadow-2: rgba(0, 0, 0, .45);
    --shadow-3: rgba(0, 0, 0, .6);
    --overlay: rgba(0, 0, 0, .68);

    --sidebar-a: #1b2430;
    --sidebar-b: #141b25;
    --sidebar-text: rgba(226, 232, 240, .72);
    --sidebar-text-hi: #f1f5f9;
    --sidebar-text-dim: rgba(226, 232, 240, .45);
    --sidebar-title: rgba(226, 232, 240, .35);
    --sidebar-line: rgba(255, 255, 255, .07);
    --sidebar-hover: rgba(255, 255, 255, .06);
    --sidebar-avatar: rgba(255, 255, 255, .1);
}

/* ============================================================
 * Puente con Bootstrap 5.3
 *
 * assets/js/tema.js le pone data-bs-theme al <html>, y con eso
 * Bootstrap ya repinta modales, tablas, formularios y dropdowns
 * por su cuenta. Lo de abajo es solo para que use NUESTRAS
 * superficies en vez de sus grises, así un .modal-content y una
 * .card quedan del mismo color que el resto del portal.
 * ============================================================ */

[data-bs-theme] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-2);
    --bs-tertiary-color: var(--text-muted);
    --bs-border-color: var(--border);
    --bs-emphasis-color: var(--text);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-strong);
}

[data-bs-theme] .modal-content,
[data-bs-theme] .card,
[data-bs-theme] .dropdown-menu,
[data-bs-theme] .list-group-item,
[data-bs-theme] .offcanvas {
    background-color: var(--surface);
    color: var(--text);
}

[data-bs-theme] .modal-header,
[data-bs-theme] .modal-footer,
[data-bs-theme] .card-header,
[data-bs-theme] .card-footer {
    border-color: var(--border-soft);
}

[data-bs-theme] .modal-backdrop.show {
    background-color: var(--overlay);
    opacity: 1;
}

[data-bs-theme] .form-control,
[data-bs-theme] .form-select {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

[data-bs-theme] .form-control::placeholder {
    color: var(--text-muted);
}

[data-bs-theme] .form-control:focus,
[data-bs-theme] .form-select:focus {
    background-color: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--brand-tint);
    color: var(--text);
}

[data-bs-theme] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border-soft);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
}

/* ============================================================
 * El instante del cambio de tema
 *
 * Media interfaz tiene transiciones sobre el fondo o el color para
 * el hover (filas de tabla, botones, tarjetas). Cuando se cambia de
 * tema, TODAS ellas se disparan a la vez y la página se convierte en
 * un barrido de medio segundo en el que cada elemento llega cuando
 * puede. Queda peor que instantáneo.
 *
 * assets/js/tema.js pone esta clase, cambia los atributos del <html>,
 * fuerza el recálculo y la saca en el tick siguiente: el tema nuevo
 * ya está pintado antes de que ninguna transición pueda arrancar, y
 * los hover siguen funcionando como siempre después.
 * ============================================================ */

.tema-cambiando,
.tema-cambiando *,
.tema-cambiando *::before,
.tema-cambiando *::after {
    transition: none !important;
}

/* ============================================================
 * Piezas que se cambian en vez de recolorearse
 *
 * Los tokens resuelven colores, y nada más. Cuando lo que cambia
 * entre temas es QUÉ elemento se muestra —el logotipo azul o el
 * blanco, por ejemplo— se marcan las dos versiones con estas clases
 * y se esconde la que no corresponde.
 *
 * Las dos reglas solo ESCONDEN: nunca declaran display para el
 * elemento que sí va. Así el display lo sigue poniendo el CSS de la
 * página (un logo suele ser display:block con margin auto) y este
 * archivo no tiene que adivinarlo. Por eso también van con el
 * atributo adelante: sin él, un `.pwa-marca img { display: block }`
 * de la página le ganaría por especificidad y se verían los dos.
 * ============================================================ */

[data-tema-visto="claro"] .solo-oscuro,
:root:not([data-tema-visto]) .solo-oscuro {
    display: none;
}

[data-tema-visto="oscuro"] .solo-claro {
    display: none;
}

/* ============================================================
 * Selector de tema
 *
 * Tres botones (Sistema / Claro / Oscuro) que van en el pie de los
 * dos sidebars, y que en login y cambiar_password —las dos páginas
 * sin sidebar— aparecen flotando arriba a la derecha con la clase
 * .selector-tema--suelto.
 * Lo pinta temaSelector() y lo maneja assets/js/tema.js.
 *
 * Los colores son los del sidebar (blancos translúcidos) porque es
 * donde vive casi siempre; la variante suelta se los redefine.
 *
 * Todas sus reglas declaran background-color y no el atajo
 * `background`, porque el control transiciona el fondo: el atajo
 * arrastra background-image y background-position, que acá no cambian
 * y no tienen por qué entrar en la animación.
 * ============================================================ */

.selector-tema {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 50px;
    background-color: var(--sidebar-avatar);
    border: 1px solid var(--sidebar-line);
}

.selector-tema button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .3rem .35rem;
    border: none;
    border-radius: 50px;
    background-color: transparent;
    color: var(--sidebar-text-dim);
    font: inherit;
    font-size: .72rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}

.selector-tema button i {
    font-size: .85rem;
}

.selector-tema button:hover {
    color: var(--sidebar-text-hi);
    background-color: var(--sidebar-hover);
}

/* aria-checked lo mueve el JS al tocar un botón; es el estado real
 * del control, así que no hace falta una clase aparte.
 * El texto usa --sidebar-a, que es el color del propio sidebar: azul
 * institucional sobre el pastilla blanca en claro, gris azulado sobre
 * la pastilla clara en oscuro. */
.selector-tema button[aria-checked="true"] {
    background-color: var(--sidebar-text-hi);
    color: var(--sidebar-a);
    font-weight: 600;
}

.selector-tema button:focus-visible {
    outline: 2px solid var(--sidebar-text-hi);
    outline-offset: 1px;
}

/* En pantallas muy angostas alcanza el icono; el texto es para que en
 * el sidebar se entienda qué hace cada uno. */
@media (max-width: 340px) {
    .selector-tema button span {
        display: none;
    }
}

/* ── Variante suelta: login y cambiar contraseña ─────────────
 * Esas dos páginas no tienen sidebar. El control va fijo arriba a la
 * derecha y usa las superficies normales, no las del sidebar. */

.selector-tema--suelto {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1200;
    background-color: var(--surface);
    border-color: var(--border);
    box-shadow: 0 2px 10px var(--shadow-2);
}

.selector-tema--suelto button {
    color: var(--text-muted);
}

.selector-tema--suelto button:hover {
    color: var(--text);
    background-color: var(--surface-2);
}

.selector-tema--suelto button[aria-checked="true"] {
    background-color: var(--brand-fill);
    color: var(--on-brand);
}

.selector-tema--suelto button:focus-visible {
    outline-color: var(--brand);
}
