/* RIAEJ 2026 — hoja de estilos (tokens + base + layout + componentes) */
@layer base, layout, components;
/**
 * RIAEJ — Design Tokens
 * Fuente única de verdad de la identidad visual.
 * Colores extraídos del logotipo oficial RIAEJ (muestreo directo del archivo):
 *   Azul institucional  #00549A
 *   Gris institucional  #9C9A9B
 *   Blanco              #FFFFFF
 * No introducir colores fuera de estas escalas sin actualizar este archivo.
 */

:root {
  /* ---------- Marca: Azul RIAEJ ---------- */
  --riaej-azul-50:  #F0F6FC;
  --riaej-azul-100: #DCEAF7;
  --riaej-azul-200: #B8D5EE;
  --riaej-azul-300: #7BB2E0;
  --riaej-azul-400: #3B8CCE;
  --riaej-azul-500: #0F6CB8;
  --riaej-azul-600: #00549A; /* ★ color oficial del logotipo */
  --riaej-azul-700: #00478A;
  --riaej-azul-800: #003D70;
  --riaej-azul-900: #002B4E;
  --riaej-azul-950: #001B33;

  /* ---------- Marca: Gris RIAEJ ---------- */
  --riaej-gris-50:  #FAFAFA;
  --riaej-gris-100: #F2F1F1;
  --riaej-gris-200: #E5E4E4;
  --riaej-gris-300: #D2D0D1;
  --riaej-gris-400: #B9B7B8;
  --riaej-gris-500: #9C9A9B; /* ★ color oficial del logotipo */
  --riaej-gris-600: #66646A; /* corregido (auditoria UX/UI #10): 4.5:1+ contra blanco Y contra --color-fondo-sutil, no solo contra blanco */
  --riaej-gris-700: #5A5859;
  --riaej-gris-800: #3A3839;
  --riaej-gris-900: #1F1E1F;

  /* ---------- Colores funcionales (solo estados de sistema) ---------- */
  --riaej-exito:   #1B7A44;
  --riaej-aviso:   #9A6700;
  --riaej-error:   #A4262C;
  --riaej-info:    var(--riaej-azul-600);

  /* ---------- Semántica de superficie ---------- */
  --color-fondo:            #FFFFFF;
  --color-fondo-sutil:      var(--riaej-gris-50);
  --color-fondo-elevado:    #FFFFFF;
  --color-fondo-inverso:    var(--riaej-azul-900);
  --color-fondo-marca:      var(--riaej-azul-600);
  /* Superficies tintadas de bajo contraste (fix critico UX/UI #1): nunca
     usar --riaej-azul-50 / --riaej-gris-100 crudos como fondo de un
     componente con texto encima -- se invierten mal en modo oscuro. */
  --color-fondo-marca-sutil:  var(--riaej-azul-50);
  --color-fondo-neutro-sutil: var(--riaej-gris-100);

  /* ---------- Semántica de texto (todas ≥ 4.5:1 sobre su fondo) ---------- */
  --color-texto:            var(--riaej-gris-900);
  --color-texto-suave:      var(--riaej-gris-700);
  --color-texto-tenue:      var(--riaej-gris-600);
  --color-texto-inverso:    #FFFFFF;
  --color-texto-marca:      var(--riaej-azul-700);
  --color-enlace:           var(--riaej-azul-700);
  --color-enlace-hover:     var(--riaej-azul-900);

  /* ---------- Bordes ---------- */
  --color-borde:            var(--riaej-gris-200);
  --color-borde-fuerte:     var(--riaej-gris-300);
  --color-borde-marca:      var(--riaej-azul-600);
  --color-foco:             var(--riaej-azul-500);

  /* ---------- Tipografía ---------- */
  /* Display: institucional con carácter. UI: alta legibilidad en pantalla. */
  --fuente-display: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --fuente-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  /* Escala tipográfica fluida (clamp: móvil → escritorio) */
  --texto-2xs:  0.75rem;
  --texto-xs:   0.8125rem;
  --texto-sm:   0.875rem;
  --texto-base: 1rem;
  --texto-lg:   1.125rem;
  --texto-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
  --texto-2xl:  clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --texto-3xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --texto-4xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --texto-5xl:  clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --interlineado-ajustado: 1.15;
  --interlineado-titulo: 1.25;
  --interlineado-cuerpo: 1.65;

  --tracking-titulo: -0.02em;
  --tracking-etiqueta: 0.08em;

  /* ---------- Espaciado (escala 4px) ---------- */
  --esp-1: 0.25rem;  --esp-2: 0.5rem;   --esp-3: 0.75rem;
  --esp-4: 1rem;     --esp-5: 1.25rem;  --esp-6: 1.5rem;
  --esp-8: 2rem;     --esp-10: 2.5rem;  --esp-12: 3rem;
  --esp-16: 4rem;    --esp-20: 5rem;    --esp-24: 6rem;
  --esp-32: 8rem;

  /* Ritmo vertical de secciones */
  --seccion-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* ---------- Radios ---------- */
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 14px;
  --radio-xl: 20px;
  --radio-pill: 999px;

  /* ---------- Sombras (frías, alineadas al azul de marca) ---------- */
  --sombra-xs: 0 1px 2px rgba(0, 43, 78, 0.06);
  --sombra-sm: 0 2px 6px rgba(0, 43, 78, 0.08);
  --sombra-md: 0 6px 18px rgba(0, 43, 78, 0.10);
  --sombra-lg: 0 16px 40px rgba(0, 43, 78, 0.14);
  --sombra-foco: 0 0 0 3px rgba(15, 108, 184, 0.35);

  /* ---------- Layout ---------- */
  --ancho-contenido: 1240px;
  --ancho-texto: 68ch;
  --ancho-estrecho: 860px;
  --canal: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---------- Movimiento ---------- */
  --trans-rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-media: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans-lenta: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Capas ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-cabecera: 200;
  --z-menu: 300;
  --z-modal: 400;
  --z-brindis: 500;
}

/* ---------- Tema: el sitio usa siempre la paleta clara ----------
   Decisión de Tecnología ENJ (2 sep 2026): se retiró el selector de tema
   claro/oscuro y las variables de modo oscuro que existían aquí, para que
   el banner del menú principal (y el resto del sitio) se mantengan siempre
   en la paleta clara, sin depender de la preferencia del sistema del
   usuario ni de un interruptor en la interfaz. */
/** RIAEJ — Base: reset, tipografía y accesibilidad */

/* ---------- Tipografia autoalojada (fix critico Seguridad #5 / DevOps #11) ----------
   El prototipo original cargaba Inter y Source Serif 4 desde
   fonts.googleapis.com en cada visita: eso envia la IP de cada visitante a
   Google antes de cualquier consentimiento, y contradice la propia politica
   de cookies del sitio ("no se usan cookies de terceros"). Aqui se declaran
   como @font-face locales; los archivos .woff2 se generan una vez con
   scripts/descargar-tipografias.sh y se versionan dentro del tema. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}