/* ==========================================================
   Variables de diseño de la intranet (la única fuente de colores y letras)
   ----------------------------------------------------------
   - Se carga ANTES que app.css y funcionario.css en todas las páginas.
   - Los nombres dicen para qué sirve el color, no qué color es
     (--color-acento, no --azul): así se puede cambiar la paleta sin renombrar nada.
   - Modo claro en :root; el modo oscuro solo redefine valores en :root[data-tema="oscuro"].
   - En el resto del CSS no se escriben colores sueltos (#hex): se usa var(--color-...).
     Excepción: los dibujos decorativos (portadas, ilustraciones, avatares, colores de sala),
     que tienen su paleta propia al lado del dibujo.
   - Guía completa: DESIGN.md en la raíz del proyecto.
   ========================================================== */
:root {
    /* ---------- Letras ---------- */
    --fuente-titulos: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---------- Neutros (70-90% de la pantalla) ---------- */
    --color-fondo: #F6F5FB;          /* fondo de la página */
    --color-superficie: #FFFFFF;     /* tarjetas, tablas, menús desplegables */
    --color-superficie-2: #EEF1FF;   /* bloques dentro de una tarjeta, filas destacadas */
    --color-campo: #F6F5FB;          /* fondo de buscadores y campos */
    --color-borde: #E7E6F2;
    --color-borde-hover: #CDD4F6;
    --color-texto: #1A1B3D;
    --color-texto-suave: #555B78;    /* 6.1:1 sobre el fondo */
    --color-titulo: #1A1B3D;

    /* ---------- Marca ---------- */
    --color-marca: #3852EF;          /* azul del cuadratín del Manual de Uso; igual en claro y oscuro */
    --color-acento: #3852EF;         /* un solo acento: botón principal, foco, dato destacado */
    --color-acento-hover: #2840CC;
    --color-acento-suave: #E0E5FE;   /* fondo lavanda (chips de área, botón de login) */
    --color-boton: #3852EF;          /* botón principal, igual en claro y oscuro */
    --color-boton-hover: #2840CC;
    --color-sobre-boton: #FFFFFF;    /* letra sobre botón, acento o marco */
    --color-papel: #FFFFFF;          /* blanco fijo en los dos modos: planos, calendario, campos sobre portada */
    --color-enlace: #2F4FD6;
    --color-foco: #3852EF;
    --color-foco-sobre-oscuro: #7FA2FF;
    --color-secundario: #8DDDC3;     /* botón secundario menta («Conocer más»), siempre con letra oscura */
    --color-secundario-hover: #3CBC93;
    --color-sobre-secundario: #1A1B3D; /* letra oscura sobre el menta (contraste 9:1) */
    --color-secundario-suave: #E3F7F0; /* migas y fondos menta */
    --color-secundario-texto: #40495A; /* letra sobre el fondo menta */
    --color-menta: #6FE3BE;          /* detalle del logo y contadores */
    --color-menta-texto: #8FF0D0;    /* letra menta sobre marco oscuro */
    --color-sobre-menta: #0A3D30;    /* letra sobre fondo menta */
    --degradado-marca: linear-gradient(90deg, #3852EF, #6FE3BE); /* rayita sobre los títulos */

    /* ---------- Marco: menú lateral, pie y portadas oscuras ---------- */
    --color-marco: #1C1D4F;
    --color-marco-2: #15163A;        /* banda más oscura (indicadores del Inicio) */
    --color-marco-activo: rgba(255, 255, 255, .13);
    --color-marco-linea: rgba(255, 255, 255, .12);
    --color-marco-texto: #E6E8F7;
    --color-marco-suave: #AEB3DC;    /* títulos de grupo y textos chicos sobre marco */
    --color-portada: #1E1E4C;        /* portadas de Noticias y Organigrama */
    --color-barra: #FFFFFF;          /* barra superior */

    /* ---------- Estados (menos del 5% de la pantalla) ---------- */
    --color-exito: #29A77C;
    --color-exito-boton: #1A7A5A;    /* botón verde con letra blanca (5.3:1) */
    --color-exito-boton-hover: #14644A;
    --color-exito-fondo: #E3F6EC;
    --color-exito-texto: #14532D;
    --color-aviso: #FFC857;          /* contador y campana de avisos */
    --color-sobre-aviso: #3D2A00;
    --color-aviso-fondo: #FFF4DD;
    --color-aviso-texto: #7A5200;
    --color-aviso-borde: #FFD278;
    --color-aviso-hover: #FFD682;    /* botón amarillo del aviso al pasar el mouse */
    --color-peligro: #DC2626;        /* botones de borrar y salir (4.8:1 con letra blanca) */
    --color-peligro-hover: #B91C1C;
    --color-peligro-texto: #B42346;  /* enlaces «Eliminar», «Desactivar» */
    --color-peligro-fondo: #FDE8E8;
    --color-peligro-fondo-texto: #9B1C1C;

    /* ---------- Tonos para chips, kits y píldoras (fondo + letra) ---------- */
    --tono-gris: #EEEDF5;     --tono-gris-texto: #555B78;
    --tono-azul: #E6EDFF;     --tono-azul-texto: #2346C2;
    --tono-amarillo: #FFF2CF; --tono-amarillo-texto: #7A5200;
    --tono-verde: #DDF5EC;    --tono-verde-texto: #0B6E55;
    --tono-lila: #ECE7FF;     --tono-lila-texto: #5236B8;
    --tono-rosa: #FDE9E5;     --tono-rosa-texto: #B53A2A;
    --tono-celeste: #E1F1FA;  --tono-celeste-texto: #1A5F8A;

    /* ---------- Radios (DESIGN.md): campos y menús --radio (8px, en app.css), botones, tarjetas y chips ---------- */
    --radio-boton: 12px;
    --radio-tarjeta: 20px;
    --radio-pildora: 999px;

    /* ---------- Sombras ---------- */
    --sombra: 0 1px 2px rgba(26, 27, 61, .04), 0 8px 24px rgba(26, 27, 61, .05);
    --sombra-alta: 0 12px 28px rgba(26, 27, 61, .10);
}

/* Modo oscuro «marino suave»: el mismo marino del ministerio con menos saturación (34 % en vez
   de 43 %), para que no se lea morado ni canse la vista. Un solo acento azul, igual que en claro.
   Contrastes sobre la tarjeta: texto 12.9:1, texto suave 7.6:1, enlace 7.7:1; foco 7:1 sobre el fondo */
:root[data-tema="oscuro"] {
    color-scheme: dark;
    --color-fondo: #1A1C33;
    --color-superficie: #222541;
    --color-superficie-2: #2C3050;
    --color-campo: #222541;
    --color-borde: #383D60;
    --color-borde-hover: #4C5280;
    --color-texto: #ECEEF8;
    --color-texto-suave: #B3B8D4;
    --color-titulo: #F6F7FC;

    --color-acento: #8FA3FF;
    --color-acento-hover: #B0BEFF;
    --color-acento-suave: #2C3050;
    --color-boton: #3852EF;
    --color-boton-hover: #4A6BFF;
    --color-enlace: #A7B6FF;
    --color-foco: #8FA3FF;            /* el azul del claro no llega a 3:1 sobre fondo oscuro */
    --color-secundario-suave: #222541;
    --color-secundario-texto: #8DDDC3;

    --color-marco: #121429;
    --color-marco-2: #121429;
    --color-marco-activo: #2C3050;
    --color-marco-linea: rgba(255, 255, 255, .08);
    --color-portada: #222541;
    --color-barra: #161831;

    --color-exito: #8DDDC3;
    --color-exito-fondo: #14352E;
    --color-exito-texto: #55D9AE;
    --color-aviso-fondo: #3A2E12;
    --color-aviso-texto: #F2C063;
    --color-aviso-borde: #5A4718;
    --color-peligro-texto: #F08BA0;
    --color-peligro-fondo: #3F1A2A;
    --color-peligro-fondo-texto: #FF9DBB;

    /* Tonos en oscuro: fondo oscuro teñido + letra clara (al revés que en claro, para no encandilar).
       Todos con la misma luminosidad, para que los Kits y chips se vean parejos; letra sobre fondo 6.5:1 o más */
    --tono-gris: #2C3050;     --tono-gris-texto: #B3B8D4;
    --tono-azul: #263159;     --tono-azul-texto: #C9D4FF;
    --tono-amarillo: #3B331D; --tono-amarillo-texto: #FFD278;
    --tono-verde: #1C3B39;    --tono-verde-texto: #8FF0D0;
    --tono-lila: #332D55;     --tono-lila-texto: #D8CCFF;
    --tono-rosa: #42292F;     --tono-rosa-texto: #FFB4A8;
    --tono-celeste: #1D3448;  --tono-celeste-texto: #A8DCF7;

    --sombra: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .2);
    --sombra-alta: 0 12px 28px rgba(0, 0, 0, .35);
}