/* Sistema de diseño de PersonalPro — tokens.
   Sin frameworks externos (D-XX). Ver docs/diseño.md. */

:root {
  /* ── Color: marca / primario ─────────────────────────────────── */
  --color-primario: #1e3a5f;
  --color-primario-oscuro: #142943;
  --color-primario-claro: #2c5382;

  /* ── Color: superficies ───────────────────────────────────────── */
  --superficie-fondo: #f5f7fa;
  --superficie-tarjeta: #ffffff;
  --superficie-hundida: #f0f3f7;
  /* Pass 4 bloque B.4: #c9d1d9 (ya un paso más oscuro que el original de
     Pass 2) seguía perdiéndose a simple vista en cards/inputs/divisores.
     Veredicto tras 3 pasadas: dejar de afinar el tono institucional y
     pasar a un gris neutro de alto contraste, convención web estándar. */
  --superficie-borde: #b0b0b0;
  --superficie-divisor: #e0e0e0;
  /* Ancho de borde estándar (Pass 4 bloque B.4) — 1px seguía siendo poco
     visible incluso con el color más oscuro; todo borde de --superficie-borde
     usa este token en vez de "1px" literal. */
  --borde-ancho: 1.5px;

  /* ── Color: texto ─────────────────────────────────────────────── */
  --texto-fuerte: #111111;
  --texto-normal: #333333;
  /* Pass 4 bloque B.1: veredicto tras 3 pasadas de calibración — el gris
     "meta" (tenue/#666, meta/#333 con peso 500) nunca leyó como
     suficiente para este proyecto y estos usuarios. Se abandona la
     distinción tonal: tenue y meta convergen a --texto-fuerte (#111),
     contraste alto, convención web. La única excepción real es
     --texto-terciario, para microcopy accesorio tipo "Página 1 de 3" en
     paginadores — en absolutamente nada más. */
  --texto-tenue: #111111;
  --texto-meta: #111111;
  --texto-terciario: #444444;
  --texto-sobre-primario: #ffffff;

  /* ── Color: semántico (fondo / texto / borde por estado) ─────── */
  --exito-fondo: #e6f4ea;
  --exito-texto: #1a7f37;
  --exito-borde: #a6d8b8;

  --advertencia-fondo: #fff8e1;
  --advertencia-texto: #8a5300;
  --advertencia-borde: #e0c46c;

  --error-fondo: #fdecea;
  --error-texto: #b30000;
  --error-borde: #f3b4ac;

  --info-fondo: #e8f0fb;
  --info-texto: #1e3a5f;
  --info-borde: #b7cbe6;

  /* ── Tipografía ───────────────────────────────────────────────── */
  /* Pass 3 bloque A: Inter self-hosted (app/static/fonts/*.woff2,
     @font-face abajo) como fuente principal — Segoe UI en peso 400 se
     ve fina en Windows sin importar cuánto suba el color. Degradación
     graceful a system-ui si el .woff2 no carga (font-display: swap). */
  --fuente-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Pass 3 bloque B: escala con más contundencia — nuevo --texto-md
     (18px) para H3. --texto-xl queda para H1 en pantallas densas (vista
     persona, junto al avatar). Pass 4 bloque B.3: un escalón más grande
     todavía (36→42, 28→32, 22→24) — mismo veredicto que B.1, apostar a
     contundencia visual en vez de sutileza. */
  --texto-xs: 13px;
  --texto-sm: 14px;
  --texto-base: 1rem;
  --texto-md: 18px;
  --texto-lg: 24px;
  --texto-xl: 32px;
  --texto-2xl: 42px;

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

  /* ── Espaciado ────────────────────────────────────────────────── */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;
  --espacio-7: 48px;
  --espacio-8: 64px;

  /* ── Radios ───────────────────────────────────────────────────── */
  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 14px;

  /* ── Sombras ──────────────────────────────────────────────────── */
  --sombra-sutil: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 1px rgba(17, 17, 17, 0.04);
  --sombra-media: 0 2px 8px rgba(17, 17, 17, 0.08), 0 1px 2px rgba(17, 17, 17, 0.06);
  --sombra-alta: 0 8px 24px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(17, 17, 17, 0.08);

  /* ── Contenedores ─────────────────────────────────────────────── */
  --ancho-contenedor: 1400px;
  --ancho-angosto: 720px;

  /* ── Paleta de gráficos (Pass 2 bloque E; realineada D-109/Pass 8
     bloque D) ───────────────────────────────────────────────────────
     Para series/categorías en el gráfico comparativo del panel
     provincial (una métrica por organismo). Hasta Pass 7 era puramente
     decorativa, sin relación con la semántica de estado (rojo=grave,
     ámbar=medio, verde=ok) que ya usan el semáforo de la tabla
     (.semaforo, panel_provincial.html) y los badges/pills del panel
     director (.pill-error/.pill-advertencia/.pill-exito,
     componentes.css) — Marcos detectó que la barra de Tardanzas era
     MARRÓN mientras el badge de "tardanzas medias" es AMARILLO, y el
     usuario no puede asumir "mismo color = mismo significado" entre
     pantallas.
     Ausencias (la métrica más asociada a algo grave) y Tardanzas (algo
     moderado) ahora RESUELVEN sus colores directamente desde los
     mismos tokens semánticos (`var(--error-texto)` /
     `var(--advertencia-texto)`, no un hex duplicado) — así nunca se
     pueden desincronizar: si el rojo o el ámbar de estado cambian
     algún día, la barra cambia sola. Horas extra (ni bueno ni malo, es
     un dato) y Fuera de radio (raro pero no necesariamente grave) se
     quedan con colores propios, sin semántica de estado — no hay
     "badge de horas extra" ni "badge de fuera de radio" con el que
     deban coincidir.
     --grafico-1 pasa de reservado-sin-uso (ver nota de Pass 5 más
     abajo) a consumido por Horas extra: es el mismo azul institucional
     que ya usa el resto del sistema para "neutro/informativo" (tabs
     activos, enlaces). --grafico-4 (púrpura) se mantiene igual pero
     cambia de métrica: antes Horas extra, ahora Fuera de radio (pedido
     explícito de la instrucción: "distintivo pero no dramático").
     --grafico-5 queda reservado sin consumidor actual, mismo criterio
     que ya se aplicaba a --grafico-1 hasta esta pasada.
     Pass 5: este comentario tenía, escrito a mano, la secuencia de dos
     caracteres que cierra un comentario CSS (asterisco seguido de
     barra) en medio de una lista de prefijos separados por barra — eso
     cerraba el comentario ahí mismo y dejaba media línea siguiente como
     CSS inválido, que el navegador descartaba junto con la declaración
     de --grafico-1 (quedaba sin definir; Chart.js caía en silencio a su
     azul por defecto). Reescrito sin esa combinación de caracteres —
     sigue vigente acá, sin repetir esa combinación en ningún comentario
     de este bloque. */
  --grafico-1: #1e3a5f;
  --grafico-2: var(--error-texto);
  --grafico-3: var(--advertencia-texto);
  --grafico-4: #a8478f;
  --grafico-5: #64748b;
}

/* Pass 3 bloque A: Inter self-hosted, cuatro pesos estáticos (mismo
   archivo variable de Google Fonts detrás de los cuatro — el navegador
   lo descarga una vez y elige la instancia de peso correcta por
   font-weight declarado en cada @font-face, técnica estándar de fuentes
   variables). Sin build, sin CDN, sin Node: son archivos estáticos en
   app/static/fonts/. font-display: swap evita texto invisible mientras
   carga; si el .woff2 no llega a cargar, --fuente-base degrada solo a
   system-ui. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

html {
  font-variant-numeric: tabular-nums;
}

body {
  margin: 0;
  font-family: var(--fuente-base);
  font-size: var(--texto-base);
  /* Pass 3 bloque A: peso base 500 (medio), no 400 — el cambio clave
     para que el texto se lea con presencia en Windows/Segoe UI. */
  font-weight: var(--peso-medio);
  color: var(--texto-normal);
  background: var(--superficie-fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--texto-fuerte);
  margin: 0 0 var(--espacio-2) 0;
}
/* Bloque A.4 (Pass 4): nombres de personas largos ("María González de la
   Fuente Ibarra") cortaban el H1 en móvil sin esto — la ventana angosta
   no da margen para una palabra completa desbordando. */
h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Pass 3 bloque B: escala con más contundencia. Cualquier pantalla que
   ya fija su propio font-size en h1/h2/h3 (ej. persona.html, texto-xl
   para "H1 en pantallas densas") sigue ganando por especificidad —
   esto es solo el default del sistema. */
h1 { font-size: var(--texto-2xl); font-weight: var(--peso-fuerte); }
h2 { font-size: var(--texto-lg); font-weight: var(--peso-fuerte); }
h3 { font-size: var(--texto-md); font-weight: var(--peso-semi); }
h4 { font-weight: var(--peso-semi); }

a {
  color: var(--color-primario);
}

table {
  font-variant-numeric: tabular-nums;
}