/* ═══════════════════════════════════════════════════════════════
   tokens.css — Sistema de diseño · Plataforma IELCO
   ───────────────────────────────────────────────────────────────
   Derivado del sistema de diseño oficial de IELCO (ielco.org):
   paleta cromática, tipografía Montserrat y jerarquías extraídas
   de la plataforma institucional.

   Todos los contrastes están verificados con probar-modulos.js.
   Si se cambia un color aquí, esa prueba lo detecta.

   SOBRE LA TIPOGRAFÍA
   La marca usa Montserrat. Esta plataforma NO la descarga desde
   Google Fonts, y es una decisión deliberada:

     · El proyecto se usa en veredas con conectividad limitada. Una
       petición bloqueante a un servidor externo retrasa la primera
       pintura justo donde más importa.

     · Montserrat queda primero en la lista. Si el dispositivo ya la
       tiene instalada (algunos Android con temas de fabricante),
       se usa y la marca se respeta al 100%. Si no, se usa la fuente
       del sistema, que es geométrica y humanista como Montserrat.

   Para usar la tipografía exacta siempre, hay que alojar los
   archivos .woff2 junto a los demás recursos y declararla con
   @font-face. Queda pendiente de decidir con IELCO.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Azul institucional ── */
  --c-brand-900: #14315F;
  --c-brand-800: #204B97;   /* --color-primary oficial */
  --c-brand-700: #15418C;   /* --color-primary-hover oficial */
  --c-brand-600: #0170B9;   /* --color-brand-cyan oficial */
  --c-brand-500: #1E73BE;   /* --color-link oficial */
  --c-brand-300: #3990DD;   /* --color-link-hover oficial */
  --c-brand-100: #DCE6F7;
  --c-brand-050: #EEF3FB;

  /* ── Acento cálido (tierra/dorado luterano) ── */
  --c-accent-800: #5B4126;
  --c-accent-700: #765532;   /* acento oficial */
  --c-accent-600: #8A6540;
  --c-accent-500: #A67C52;
  --c-accent-100: #F3EBE2;

  /* ── Texto ── */
  --c-ink-900: #222222;   /* --color-text-main */
  --c-ink-700: #3A3A3A;   /* --color-text-body */
  --c-ink-500: #4B4F58;   /* --color-text-muted */
  --c-ink-300: #6B7078;

  /* ── Superficies ── */
  --c-surface:      #FFFFFF;
  --c-surface-alt:  #F5F5F5;   /* --color-bg-subtle */
  --c-page:         #F0F3F8;
  --c-line:         #DDDDDD;   /* --color-border */
  --c-line-strong:  #C4C8CF;

  /* ── Estado ── */
  --c-ok-900: #14532D;
  --c-ok-700: #1A6B3C;
  --c-ok-100: #DCEFE3;
  --c-warn-900: #7A4A00;
  --c-warn-700: #8A5300;
  --c-warn-100: #FFF0D1;
  --c-danger-800: #8A1C24;
  --c-danger-700: #A11F29;
  --c-danger-100: #FBE1E3;

  /* ── Verde monte y terracota ──
     Los dos colores cálidos del rediseño de Inicio, que IELCO pidió en su
     especificación. El verde reutiliza el de estado —ya era el tono de bosque
     que hacía falta— y el terracota es nuevo.

     EL TERRACOTA NO ES EL NARANJA DEL DISEÑO, Y ES A PROPÓSITO.
     El boceto usaba un naranja más vivo (#C1552B) que sobre blanco da 4.56:1:
     pasa el mínimo AA por dos centésimas, así que cualquier retoque lo dejaría
     fuera. Este da 5.92:1 y sigue leyéndose como terracota. El contraste no es
     un adorno: el botón lo va a leer una señora con el celular al sol. */
  --c-terracota-800: #8A3820;
  --c-terracota-700: #A8452A;
  --c-terracota-100: #F7E3DA;
  --c-crema:         #FDF6EC;

  /* ── Cristal (Glassmorphism) ──
     El fondo es casi opaco (0.92) a propósito: así el contraste del texto
     es verificable y estable, sin depender del degradado que quede detrás. */
  --glass-bg:      rgba(255, 255, 255, 0.92);
  --glass-bg-soft: rgba(255, 255, 255, 0.82);
  --glass-border:  rgba(255, 255, 255, 0.9);
  --glass-blur:    12px;
  --glass-shadow:  0 4px 18px rgba(20, 49, 95, 0.09), 0 1px 2px rgba(20, 49, 95, 0.06);

  /* ── Grilla de 8px ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ── Tipografía ──
     Montserrat primero, según el sistema de marca. La cadena de respaldo
     cubre Android, iOS, Windows y macOS sin descargar nada. */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

  /* Escala alineada con la jerarquía institucional, ajustada hacia abajo
     porque esta plataforma se usa en pantallas de celular: un H1 de 64px
     obliga a desplazarse para leer el título. */
  --t-xs:   0.8125rem;   /* 13px · metadatos y etiquetas */
  --t-sm:   0.875rem;    /* 14px · botones y texto secundario */
  --t-base: 1rem;        /* 16px · cuerpo */
  --t-lg:   1.125rem;    /* 18px · H5 */
  --t-xl:   1.25rem;     /* 20px · H4 */
  --t-2xl:  1.5rem;      /* 24px · H3 */
  --t-3xl:  2rem;        /* 32px · H2 */
  --t-4xl:  2.5rem;      /* 40px · H1 */

  --lh-tight: 1.3;       /* encabezados, según la marca */
  --lh-body:  1.7;       /* párrafos, según la marca */
  --weight-normal: 400;
  --weight-bold: 700;

  /* ── Radios ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 30px;        /* radio de píldora oficial de los botones */

  /* ── Movimiento ── */
  --ease: cubic-bezier(0.4, 0.14, 0.3, 1);
  --dur: 200ms;

  /* ── Foco visible (NFR-1) ── */
  --focus-ring: 3px solid var(--c-brand-700);
  --focus-offset: 2px;

  /* ── Layout ── */
  --wrap: 1140px;
  --topbar-h: 72px;

  /* ── Logo ── */
  --logo-height: 44px;
}

/* Fondo con degradado institucional muy suave. Sin imágenes: el peso es
   NFR-3. Se usa el azul de marca y el acento cálido, ambos con opacidad
   baja para no comprometer el contraste del texto. */
body {
  background-color: var(--c-page);
  background-image:
    radial-gradient(closest-side at 10% 6%,  rgba(32, 75, 151, 0.10), transparent 78%),
    radial-gradient(closest-side at 92% 3%,  rgba(118, 85, 50, 0.08), transparent 72%),
    radial-gradient(closest-side at 76% 94%, rgba(1, 112, 185, 0.07), transparent 76%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--font);
  font-weight: var(--weight-normal);
}

/* Los encabezados usan Montserrat en negrita, según la marca */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: var(--weight-bold);
}

/* Los botones de la marca van en mayúsculas y peso 700 */
.btn, button.btn {
  font-family: var(--font);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}