/* ═══ SISTEMA VISUAL — DIVENPO · PULSO COLOR ═════════════════════════════
   Fuente de verdad del color y la tipografía. Ningún otro archivo declara un
   color: dos copias se separan en la primera corrección de contraste que
   alguien hace en el archivo que tenía abierto.

   Reemplaza al sistema anterior (papel/tinta/rojo con rotulación industrial).
   La guía llegó rotulada "VIVENCO": es DIVENPO mal transcrito por el dictado
   de voz, no una marca nueva. Ver DIVENPO.md.

   Los nombres viejos siguen existiendo abajo como puente para el panel, que
   todavía tiene su propio <style> con el sistema anterior — ver la nota de
   compatibilidad al final.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── tipografía ───────────────────────────────────────────────────
       Poppins ExtraBold para titular: geométrica, alto contraste de peso,
       aguanta el titular a dos colores del hero.
       Nunito Sans para lectura: humanista, redondeada, no pelea con Poppins.
       Las dos vienen LOCALES del kit — ver el @font-face de abajo.            */
  --f-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --f-texto:'Nunito Sans',system-ui,-apple-system,sans-serif;
  /* El monoespaciado no está en la guía, y hace falta: códigos de gestión,
     tallas y montos se leen mal en proporcional. Se elige una de sistema para
     no sumar una tercera descarga. */
  --f-dato:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ── color ────────────────────────────────────────────────────────
       Seis decisiones. Todo lo demás se deriva de estas.               */
  --violeta:#5B35D5;   /* la acción principal, y solo ella */
  --rosa:#EB3B8F;
  --naranja:#FF7A32;
  --sol:#FFD34E;
  --papel:#FFF9F2;     /* fondo cálido */
  --tinta:#24222B;

  /* La superficie de las tarjetas es blanca sobre el papel cálido: es lo que
     las despega del fondo sin necesitar borde ni sombra fuerte. */
  --hueso:#FFFFFF;

  /* ── derivados: al cambiar papel o tinta se recalculan solos ─────── */
  /* El gris de texto y el del borde son valores FIJOS del kit, no derivados:
     los tenía calculados con color-mix y daban parecido pero no igual, y el
     kit es la fuente de verdad. Los demás sí se derivan, para que cambiar
     papel o tinta los recalcule solos. */
  --tinta-72:#706B78;   /* texto secundario del kit */
  --tinta-60:color-mix(in srgb,var(--tinta-72) 82%,var(--papel));
  --linea:#E7E1DC;      /* borde cálido del kit */
  --linea-fina:color-mix(in srgb,var(--linea) 55%,var(--papel));

  /* Estados. Faltaban: los avisos usaban rosa para todo, y "rechazado" y
     "guardado" no pueden ser el mismo color. */
  --exito:#259B72;
  --alerta:#B97808;
  --peligro:#C8325E;
  --punteado:color-mix(in srgb,var(--tinta) 22%,var(--papel));
  --punteado-fuerte:color-mix(in srgb,var(--tinta) 38%,var(--papel));
  --cuadricula:color-mix(in srgb,var(--violeta) 10%,transparent);
  --reja:color-mix(in srgb,var(--violeta) 6%,transparent);
  --violeta-suave:color-mix(in srgb,var(--violeta) 10%,var(--papel));
  --rosa-suave:color-mix(in srgb,var(--rosa) 10%,var(--papel));

  /* Texto encima de cada color de marca. El violeta y el rosa son oscuros y
     llevan blanco; el sol y el naranja son claros y llevan tinta. Escrito una
     vez acá y no decidido a ojo en cada componente, que es como se cuelan los
     botones amarillos con texto blanco. */
  --sobre-violeta:#FFFFFF;
  --sobre-rosa:#FFFFFF;
  --sobre-naranja:#24222B;
  --sobre-sol:#24222B;

  /* ── forma ────────────────────────────────────────────────────────
       El radio de 20 px es lo que le da el carácter al sistema: sin él, la
       misma paleta se ve como un panel de administración. El chico es para
       controles —chips, campos, botones— donde 20 se ve inflado. */
  --radio:20px;
  --radio-chico:12px;
  --radio-pildora:999px;

  /* Sombra suave y de color, no gris: sobre papel cálido una sombra neutra se
     ve sucia. */
  --sombra:0 6px 24px color-mix(in srgb,var(--tinta) 10%,transparent);
  --sombra-alta:0 14px 40px color-mix(in srgb,var(--violeta) 18%,transparent);

  /* Escala de espaciado del kit: 4, 8, 12, 16, 24, 32, 48, 64, 96. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px;
  --e8:32px; --e12:48px; --e16:64px; --e24:96px;

  /* El titular del hero, tal como lo fija el kit. */
  --texto-hero:clamp(2.75rem,6vw,5.75rem);
  --ancho-maximo:1280px;

  --paso:clamp(48px,6vw,72px);
}

/* ── tipografías locales ──────────────────────────────────────────────
   Vienen del kit bajo SIL Open Font License; los OFL.txt viajan al lado en
   sitio/fuentes/ y no se borran.

   Locales y no de Google: cierra la última conexión a un tercero del sitio
   público, deja de haber un salto de tipografía en la primera carga, y
   permite apretar la CSP a 'self' — que era el pendiente escrito en
   DIVENPO.md desde el principio. */
@font-face{
  font-family:'Poppins'; src:url('/fuentes/Poppins-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Poppins'; src:url('/fuentes/Poppins-ExtraBold.ttf') format('truetype');
  font-weight:800; font-style:normal; font-display:swap;
}
/* Una sola variable cubre de 200 a 1000: el kit pide 400, 650 y 700, y tres
   archivos estáticos pesarían más que este uno. */
@font-face{
  font-family:'Nunito Sans'; src:url('/fuentes/NunitoSans-Variable.ttf') format('truetype-variations');
  font-weight:200 1000; font-style:normal; font-display:swap;
}

/* ── modo oscuro ────────────────────────────────────────────────────
   No es la paleta invertida: el papel cálido baja a un carbón violáceo y los
   cinco colores de marca suben de luminosidad para seguir pasando 4.5:1 sobre
   él. El violeta es el que más sube: a #5B35D5 sobre fondo oscuro no se lee. */
:root[data-tema="oscuro"]{
  --papel:#1A1820;
  --tinta:#F5F1EA;
  --hueso:#252230;
  --violeta:#A88BFF;
  --rosa:#FF7ABA;
  --naranja:#FF9A5E;
  --sol:#FFD34E;
  --sobre-violeta:#1A1820;
  --sobre-rosa:#1A1820;
  --sombra:0 6px 24px color-mix(in srgb,#000 40%,transparent);
  --sombra-alta:0 14px 40px color-mix(in srgb,#000 55%,transparent);
}

/* El bloque puente que sostenía al panel y a la portada mientras usaban el
   sistema industrial se borró: ya no queda un solo archivo con `--rojo`. Los
   nombres de acá son los únicos, y significan lo que dicen. */

:root{
  /* Sobre la banda oscura del pie y del cierre. */
  --inv-fg:color-mix(in srgb,var(--papel) 82%,var(--tinta));
  --inv-linea:color-mix(in srgb,var(--papel) 32%,var(--tinta));
}