/*
 * Sistema de diseño · Plataforma de Admisión UNAT
 * Tokens derivados de la identidad oficial del portal (portal.unat.edu.pe, tema unat-theme):
 * guinda #5f1e1e, dorado #e8a210, Inter. Ver docs/diseno/MANUAL_DE_MARCA.md.
 *
 * Capas: 1) primitivos (escalas de color, medidas) · 2) semánticos por tema (claro / oscuro).
 * Los componentes usan SOLO tokens semánticos; así el tema oscuro funciona sin tocarlos.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fuentes/inter-latin-variable.woff2") format("woff2");
}

:root {
  /* ---------- 1. Primitivos ---------- */

  /* Guinda institucional (700 = color oficial) */
  --guinda-50: #fbf4f4;
  --guinda-100: #f5e6e6;
  --guinda-200: #e9caca;
  --guinda-300: #d6a1a1;
  --guinda-400: #b86e6e;
  --guinda-500: #94403f;
  --guinda-600: #7a2828;
  --guinda-700: #5f1e1e;
  --guinda-800: #4a1818;
  --guinda-900: #3d1414;
  --guinda-950: #2a0e0e;

  /* Dorado (500 = color oficial) */
  --dorado-50: #fef8e8;
  --dorado-100: #fcedc4;
  --dorado-200: #f9dc8c;
  --dorado-300: #f4b830;
  --dorado-500: #e8a210;
  --dorado-600: #c78b0d;
  --dorado-700: #8f6208;
  --dorado-800: #6e4a07;

  /* Neutros cálidos, teñidos hacia el guinda (100 = crema de las tarjetas del portal) */
  --neutro-0: #ffffff;
  --neutro-25: #fcfafa;
  --neutro-50: #f8f5f5;
  --neutro-100: #f5f0f0;
  --neutro-200: #ebe5e5;
  --neutro-300: #d8d0d0;
  --neutro-400: #b5aaaa;
  --neutro-500: #8c8080;
  --neutro-600: #6b6060;
  --neutro-700: #4d4444;
  --neutro-800: #332c2c;
  --neutro-850: #2a2222;
  --neutro-900: #211b1b;
  --neutro-950: #160f0f;

  /* Grises fríos sueltos que ya usaba el panel (sin escala propia) */
  --gris-100: #eef0f3;        /* pista de la barra de avance de una subida */

  /* Carreras (degradados oficiales del portal: color base → color claro) */
  --civil-base: #e65100;        --civil-claro: #ff9800;
  --industrial-base: #1565c0;   --industrial-claro: #42a5f5;
  --alimentarias-base: #2e7d32; --alimentarias-claro: #66bb6a;
  --forestal-base: #558b2f;     --forestal-claro: #9ccc65;
  --enfermeria-base: #008b8b;   --enfermeria-claro: #20b2aa;

  /* Tipografía */
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
  --texto-2xs: 0.75rem;    /* 12 · notas legales */
  --texto-xs: 0.8125rem;   /* 13 · etiquetas, tablas densas */
  --texto-sm: 0.875rem;    /* 14 · interfaz */
  --texto-base: 1rem;      /* 16 · lectura */
  --texto-lg: 1.125rem;    /* 18 */
  --texto-xl: 1.375rem;    /* 22 · títulos de tarjeta */
  --texto-2xl: 1.75rem;    /* 28 · títulos de sección */
  --texto-3xl: 2.25rem;    /* 36 */
  --texto-4xl: 2.8rem;     /* 45 · h1 del portal */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-negrita: 700;
  --peso-extra: 800;
  --interlineado-ajustado: 1.2;
  --interlineado-base: 1.55;
  --espaciado-etiqueta: 0.08em;

  /* Espacio (base 4px) */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.25rem;
  --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem; --e-16: 4rem;

  /* Forma (radios del portal) */
  --radio-sm: 5px;
  --radio-md: 10px;
  --radio-lg: 20px;
  --radio-pildora: 50px;

  /* Movimiento */
  --dur-rapida: 120ms;
  --dur-base: 200ms;
  --dur-lenta: 320ms;
  --dur-enfasis: 520ms;
  --curva-estandar: cubic-bezier(0.2, 0, 0, 1);
  --curva-entrada: cubic-bezier(0, 0, 0.2, 1);
  --curva-salida: cubic-bezier(0.4, 0, 1, 1);
  --curva-sello: cubic-bezier(0.34, 1.4, 0.64, 1);   /* ligero rebote del sello de huella */

  --contenedor: 1200px;
  --z-cabecera: 20;
  --z-capa: 40;
  --z-aviso: 60;

  /* ---------- 2. Semánticos · tema claro ---------- */
  color-scheme: light;
  --fondo: var(--neutro-25);
  --superficie: var(--neutro-0);
  --superficie-hundida: var(--neutro-100);
  --superficie-alterna: var(--neutro-50);
  --borde: var(--neutro-200);
  --borde-fuerte: var(--neutro-300);
  --texto: var(--neutro-900);
  --texto-suave: var(--neutro-600);
  --texto-tenue: #7a6f6f;           /* solo para texto ≥ 14px secundario */
  --texto-invertido: var(--neutro-0);

  --marca: var(--guinda-700);         /* rellenos de marca, encabezados */
  --marca-hover: var(--guinda-800);
  --marca-texto: var(--guinda-700);   /* títulos y enlaces sobre fondo claro */
  --marca-suave: var(--guinda-50);
  --sobre-marca: var(--neutro-0);

  --acento: var(--dorado-500);        /* botón principal, subrayados, iconos destacados */
  --acento-hover: var(--dorado-600);
  --acento-texto: var(--dorado-700);  /* dorado legible como texto sobre claro */
  --acento-suave: var(--dorado-50);
  --sobre-acento: var(--neutro-950);  /* texto sobre dorado: negro, como en el portal */

  /* El dorado solo tiene 2.2:1 sobre blanco: en claro el anillo de foco es guinda, uno solo y fino (como Google y
     Azure; el halo dorado de tres anillos se veía recargado y pisaba las etiquetas, 30/10). */
  --foco: var(--guinda-700);
  --foco-sombra: 0 0 0 2px var(--guinda-700);

  /* Estados con significado de admisión */
  --exito: #17633a;          --exito-suave: #e6f4ec;       /* ingresante · conforme */
  --aviso: #8a5300;          --aviso-suave: #fdf3d8;       /* parcial · supernumerario · revisar */
  --peligro: #b42318;        --peligro-suave: #fdecea;     /* anulado · sanción · error */
  /* Proceso a la vista en la barra (12/11): Quinto en verde, CEPRE en naranja fuerte; texto blanco en ambos temas. */
  --proceso-quinto: #17633a; --proceso-cepre: #c2410c;     --proceso-texto: #ffffff;
  --info: #1b5aa6;           --info-suave: #e8f1fb;        /* modo anónimo · ayuda */
  --neutral-estado: var(--neutro-600); --neutral-estado-suave: var(--neutro-100); /* no ingresa */
  --borde-impresion: #999999;  /* bordes de las tarjetas del cuadro al imprimir */

  /* Texto accesible sobre fondo suave de cada carrera (chips, etiquetas) */
  --civil-texto: #a33a00;        --civil-suave: #fff1e6;
  --industrial-texto: #0f4c94;   --industrial-suave: #e9f2fc;
  --alimentarias-texto: #1f5c23; --alimentarias-suave: #eaf5eb;
  --forestal-texto: #3d6621;     --forestal-suave: #eef6e6;
  --enfermeria-texto: #006666;   --enfermeria-suave: #e3f5f5;

  --sombra-sm: 0 1px 2px rgba(42, 14, 14, 0.06), 0 2px 4px rgba(42, 14, 14, 0.06);
  --sombra-md: 0 4px 12px rgba(42, 14, 14, 0.10);
  --sombra-lg: 0 12px 32px rgba(42, 14, 14, 0.16);
  --brillo-acento: 0 0 20px rgba(232, 162, 16, 0.45);   /* hover del botón principal (portal) */

  /* Bandas oscuras institucionales (hero, cifras, pie) en ambos temas */
  --banda: var(--guinda-800);
  --banda-degradado: linear-gradient(135deg, var(--guinda-700) 0%, var(--guinda-800) 100%);
  --banda-texto: var(--neutro-0);
  --banda-texto-suave: rgba(255, 255, 255, 0.78);
  /* Igual en ambos temas: placa blanca del escudo sobre bandas oscuras y velo de fotos (portal) */
  --placa-logo: var(--neutro-0);
  --velo-foto: linear-gradient(135deg, rgba(95, 30, 30, 0.85) 0%, rgba(40, 15, 15, 0.65) 100%);
}

/* ---------- 2b. Semánticos · tema oscuro ---------- */
/* El sistema usa siempre el tema claro (decisión del usuario, 28/10): no sigue el modo oscuro de
   Windows. El oscuro solo se aplica si se pide expresamente con data-tema="oscuro". */

/* Tema oscuro solo cuando se elige explícitamente */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: var(--neutro-950);
  --superficie: var(--neutro-900);
  --superficie-hundida: #1b1414;
  --superficie-alterna: var(--neutro-850);
  --borde: #3a2e2e;
  --borde-fuerte: #4f4040;
  --texto: #f5eeee;
  --texto-suave: #c2b5b5;
  --texto-tenue: #a39595;
  --texto-invertido: var(--neutro-950);
  --marca: var(--guinda-600);
  --marca-hover: var(--guinda-500);
  --marca-texto: var(--guinda-300);
  --marca-suave: #2e1a1a;
  --sobre-marca: var(--neutro-0);
  --acento: var(--dorado-300);
  --acento-hover: var(--dorado-200);
  --acento-texto: var(--dorado-300);
  --acento-suave: #33260c;
  --sobre-acento: var(--neutro-950);
  --foco: var(--dorado-300);
  --foco-sombra: 0 0 0 3px rgba(244, 184, 48, 0.5);
  --exito: #6fd39a;   --exito-suave: #12301f;
  --aviso: #f4c45a;   --aviso-suave: #33260c;
  --peligro: #ff8b7e; --peligro-suave: #3a1714;
  --info: #8cbcf2;    --info-suave: #142538;
  --neutral-estado: #b9abab; --neutral-estado-suave: #2a2222;
  --civil-texto: #ffb27a;        --civil-suave: #33200f;
  --industrial-texto: #8ec3f7;   --industrial-suave: #12253a;
  --alimentarias-texto: #8fd493; --alimentarias-suave: #142a16;
  --forestal-texto: #b7dc8c;     --forestal-suave: #1d2a12;
  --enfermeria-texto: #6fd6d6;   --enfermeria-suave: #0f2b2b;
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --brillo-acento: 0 0 22px rgba(244, 184, 48, 0.35);
  --banda: var(--guinda-900);
  --banda-degradado: linear-gradient(135deg, var(--guinda-800) 0%, var(--guinda-950) 100%);
  --placa-logo: var(--neutro-0);
  --velo-foto: linear-gradient(135deg, rgba(95, 30, 30, 0.85) 0%, rgba(40, 15, 15, 0.65) 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapida: 0ms;
    --dur-base: 0ms;
    --dur-lenta: 0ms;
    --dur-enfasis: 0ms;
  }
}