/* tokens.css — sistema de diseño de Educación CIPDH.
 * Extraído de escuela.css del prototipo. Única fuente de color, tipografía,
 * radios y sombras: ninguna vista define valores propios. */

:root {
    --color-primary:       #232D4F;
    --color-accent:        #3E5A7E;   /* azul medio (antes dorado #E7BA61) */
    --color-accent-light:  #9DB6D6;   /* azul claro para detalles sobre fondos oscuros (reemplaza dorado fuera de CTAs) */
    --color-gold:          #E7BA61;   /* dorado SOLO para el/los CTA más importantes de cada pantalla */
    --color-gold-dark:     #d4a64a;   /* dorado oscuro para estados activos */
    /* Gris de textos meta/fecha. Era #94a3b8 hasta el 2026-10-07 (P-114, M-04):
       daba 2,56:1 sobre blanco y el mínimo legible (AA) es 4,5:1; con 13 px,
       «1 terminado», docente y duración de cada clase se leían mal. De sus 159
       usos, 157 son color de texto o de icono, así que se oscurece el token en
       vez de duplicarlo. #5b6b82 = 5,4:1, mismo tono azulado. El gris claro
       anterior queda como --color-secondary-claro para bordes y adornos. */
    --color-secondary:     #5b6b82;
    --color-secondary-claro: #94a3b8;
    --color-bg:            #ffffff;
    --color-bg-alt:        #f7f7f7;
    --color-text:          #232D4F;
    --color-text-muted:    #4a4a4a;
    --color-border:        rgba(0,0,0,0.12);
    --color-border-light:  rgba(255,255,255,0.2);
    /* aliases */
    --azul:            var(--color-primary);
    --amarillo:        var(--color-accent);
    --azul-cobalto:    #3E5A7E;        /* fijado a azul: alimenta gradientes y textos cobalto */
    --blanco:          var(--color-bg);
    --gris-claro:      var(--color-bg-alt);
    --arena:           #EAE1B7;
    --linea-fina:      var(--color-border);
    --linea-fina-clara:var(--color-border-light);
    /* Alto del header fijo. Es la ÚNICA declaración de este valor para
       escritorio: la usa .site-header para medirse y .site-main para
       reservar el espacio de abajo. Ver el comentario en base.css. */
    --header-h:        96px;
    /* tokens de card unificados */
    /* Escala de Likert (encuestas, 2026-09-25): divergente, del desacuerdo
       (terracota) al acuerdo (azules del sistema), con el neutro en gris. */
    --likert-1:           #b5654a;
    --likert-2:           #e2a48c;
    --likert-3:           #cbd5e1;
    --likert-4:           #9DB6D6;
    --likert-5:           #3E5A7E;
    --card-radius:        14px;
    --card-shadow:        0 2px 14px rgba(35,45,79,.07);
    --card-shadow-hover:  0 16px 38px rgba(35,45,79,.14);
    --card-lift:          translateY(-6px);
    --card-bd:            1px solid var(--color-border);
    --card-transition:    transform .3s ease, box-shadow .3s ease, border-color .3s ease;

    /* ── Alias legacy (CSS consolidado de prototipos antiguos) ──
       Estos nombres venían de los <style> embebidos originales. Se mapean
       al sistema de color actual para que el CSS consolidado funcione. */
    --primary:        var(--color-primary);
    --accent:         var(--color-accent);
    --secondary:      var(--color-secondary);
    --border:         var(--color-border);
    --text-dark:      var(--color-text);
    --text-light:     var(--color-secondary);
    --bg-card:        var(--color-bg);
    --bg-page:        #fafafc;
    --radius:         12px;

    /* Vidrio (glassmorphism) — criterio de Xavier del 27/08 y del 2026-09-17:
       «prefiero cards glassmorphism antes que usar bordes border-top/left».
       Un fondo blanco translúcido con desenfoque y un borde de un píxel apenas
       visible. Nada de barras de color a la izquierda o arriba de un bloque. */
    --glass-bg:       rgba(255, 255, 255, .72);
    --glass-bg-tint:  rgba(35, 45, 79, .05);
    --glass-border:   rgba(35, 45, 79, .10);
    --glass-blur:     blur(10px);
    /* Velos azules para modales (P-114, A-03): respaldo de color-mix(), que
       Safari anterior a 16.2 no entiende y descarta la declaración entera. */
    --velo-primary-68: rgba(35, 45, 79, .68);
    --velo-primary-94: rgba(35, 45, 79, .94);
    --transition:     all .3s ease;
    --font-main:      'Montserrat', sans-serif;
    --success:        #1d8a4e;   /* verde — estados ok / btn-success */
    --success-soft:   #e4f5ea;
    --error:          #c0392b;   /* rojo — estados error / btn-danger */
    --error-soft:     #fbe9ee;
    --warning:        #a07c1f;   /* ámbar — pendiente */
    --warning-soft:   #fdf6e3;
    --shadow-sm:      0 1px 4px rgba(35,45,79,.08);
    --shadow-md:      var(--card-shadow);
    --shadow-hover:   var(--card-shadow-hover);
}

/* Pantallas táctiles (P-114, M-05b): en un teléfono el :hover queda «pegado»
   después del toque y la tarjeta tocada se quedaba levantada. Las tarjetas
   que usan --card-lift dejan de levantarse donde no hay puntero que pase por
   encima; en escritorio no cambia nada. */
@media (hover: none) {
    :root { --card-lift: none; }
}