/* ==========================================================================
   Kiloverde · Tokens del sistema de diseño (SPEC §2). Documentación: docs/SISTEMA_DE_DISENO.md
   Cargar SIEMPRE primero: tokens.css → base.css → app.css | panel.css | portal.css
   Contrastes AA verificados: texto bosque/blanco 12.7:1 · pizarra/marfil 7.6:1 · hoja-texto/blanco 5.3:1 ·
   bosque sobre hoja 4.9:1 (botón acento) · bosque sobre sol 7:1.
   ========================================================================== */

/* ---------- Tipografías autoalojadas (subconjunto latino, woff2) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }

:root {
  /* Marca */
  --kv-bosque: #153A21;        /* primario oscuro: títulos, botones primarios, cabeceras */
  --kv-bosque-900: #0F2A18;    /* fondos muy oscuros (pie, barra lateral) */
  --kv-bosque-700: #1E4D2C;    /* hover de primario */
  --kv-hoja: #67B346;          /* acento / acción (fondo con texto bosque) — NO usar como color de texto sobre blanco */
  --kv-hoja-texto: #3B7A2A;    /* verde para texto y enlaces sobre fondos claros (AA) */
  --kv-hoja-claro: #8FD16F;    /* acento sobre fondos oscuros */
  --kv-hoja-100: #DDEFD3;
  --kv-hoja-50: #EFF7EA;
  --kv-sol: #F2B705;           /* destacado, con moderación (≤10 % de la superficie) */
  --kv-sol-50: #FEF6D8;
  --kv-pizarra: #4A5550;       /* texto de cuerpo */
  --kv-pizarra-suave: #5E6863; /* texto secundario (AA también sobre el fondo gris #F4F6F3 del portal y del panel) */
  --kv-marfil: #FDFDFB;        /* fondo general */
  --kv-blanco: #FFFFFF;

  /* Neutros y estados */
  --kv-borde: #E1E6E2;
  --kv-borde-fuerte: #C9D1CB;
  --kv-fondo-suave: #F4F6F3;
  --kv-exito: #2F6B22;   --kv-exito-fondo: #E6F3DF;
  --kv-alerta: #8A5A00;  --kv-alerta-fondo: #FEF3CD;
  --kv-peligro: #B42318; --kv-peligro-fondo: #FDECEA;
  --kv-info: #1D5FA8;    --kv-info-fondo: #E7F0FB;

  /* Paleta categórica de gráficas, validada (banda de luminosidad, croma, separación CVD ≥ 8 entre vecinos).
     Orden fijo: nunca se recicla. Gris = serie de referencia. Replicada en kv-graficas.js. */
  --kv-grafica-1: #4F9E32;
  --kv-grafica-2: #3572C6;
  --kv-grafica-3: #D08E00;
  --kv-grafica-4: #B2508F;
  --kv-grafica-referencia: #8A9690;
  --kv-grafica-rejilla: #E1E6E2;
  --kv-grafica-texto: #4A5550;

  /* Tipografía */
  --kv-fuente-titulos: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --kv-fuente-texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --kv-t-xs: .8125rem;   /* 13 */
  --kv-t-s: .875rem;     /* 14 */
  --kv-t-m: 1rem;        /* 16 */
  --kv-t-l: 1.125rem;    /* 18 */
  --kv-t-xl: 1.375rem;   /* 22 */
  --kv-t-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --kv-t-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.625rem);
  --kv-t-4xl: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);

  /* Espaciado (escala de 4 px) */
  --kv-e-1: .25rem; --kv-e-2: .5rem; --kv-e-3: .75rem; --kv-e-4: 1rem; --kv-e-5: 1.5rem;
  --kv-e-6: 2rem; --kv-e-7: 3rem; --kv-e-8: 4rem; --kv-e-9: 6rem;

  /* Forma */
  --kv-radio: 12px;
  --kv-radio-s: 8px;
  --kv-radio-pill: 999px;
  --kv-sombra-1: 0 1px 2px rgba(21, 58, 33, .06), 0 1px 3px rgba(21, 58, 33, .08);
  --kv-sombra-2: 0 4px 12px rgba(21, 58, 33, .08), 0 2px 4px rgba(21, 58, 33, .05);
  --kv-sombra-3: 0 16px 40px rgba(21, 58, 33, .14);
  --kv-foco: 0 0 0 2px var(--kv-marfil), 0 0 0 5px var(--kv-bosque);   /* F6-B C4: anillo doble ≥3:1 sobre claro (12,7:1) */
  --kv-foco-oscuro: 0 0 0 2px var(--kv-bosque), 0 0 0 5px var(--kv-sol); /* sobre fondos oscuros (sol/bosque 7:1) */

  /* Rejilla */
  --kv-ancho-max: 1200px;
  --kv-canal: 16px;          /* margen lateral en móvil */
  --kv-columnas: 12;

  --kv-transicion: 160ms ease;
}

@media (min-width: 768px) {
  :root { --kv-canal: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --kv-transicion: 0ms; }
}