/* ============================================================================
   DESIGN TOKENS — Gestión de Compras (sistema único, app-wide)
   ----------------------------------------------------------------------------
   Fuente de verdad para la ESCALA tipográfica y los RADIOS. Se enlaza en el
   <head> de TODAS las plantillas (antes de su <style> inline). Solo define
   tokens NUEVOS (--fs-*, --r-*) → no colisiona con los :root locales
   (colores, --radius-* divergentes). La migración reemplaza los px sueltos por
   estos var() pantalla a pantalla.

   Escala tipográfica (suelo 12px; 11px = EXCEPCIÓN densa verificada).
   Snapping de los 19 tamaños actuales → 8 pasos:
     8/9/10 → 12 (--fs-xs)   |   11 → 11 SOLO si 12 rompe layout denso
     13 → 13 (--fs-sm)       |   14 → 14 (--fs-base)
     15/16/17 → 16 (--fs-md) |   18/20 → 20 (--fs-lg)
     22/24/26 → 24 (--fs-xl) |   28/32 → 32 (--fs-2xl)  |  36/42 → 42 (--fs-3xl)

   Radios: 1/2/3 → 4 (--r-sm) | 5/6/7 → 6 (--r-md) | 8/9/10 → 8 (--r-lg)
           12/14/16/24 → 12 (--r-xl) | 99/200/999 → 999 (--r-pill). 50% = círculo.
   ============================================================================ */
:root{
  /* ── Escala tipográfica ── */
  --fs-2xs: 11px;   /* micro denso (chips/badges) — EXCEPCIÓN, usar con criterio */
  --fs-xs:  12px;   /* labels, meta, captions — suelo por defecto */
  --fs-sm:  13px;   /* cuerpo secundario */
  --fs-base:14px;   /* cuerpo */
  --fs-md:  16px;   /* énfasis, subtítulos */
  --fs-lg:  20px;   /* cabeceras pequeñas, cifras de sección */
  --fs-xl:  24px;   /* títulos de tarjeta, cifras grandes */
  --fs-2xl: 32px;   /* KPI / hero */
  --fs-3xl: 42px;   /* display puntual */

  /* ── Radios ── */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;
}

/* ============================================================================
   TYPEWRITER — efecto "se escribe y se borra" para títulos (motor: /static/typewriter.js)
   Uso: <span class="tw" data-words='["Canon","Var2"]'>Canon</span>
   Hereda font/size/color del título contenedor. El caret usa el acento de la página.
   ============================================================================ */
.tw{
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.tw__caret{
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.1em;
  background-color: var(--tw-accent, var(--accent, #34d399));
  border-radius: 1px;
  animation: tw-blink 1.06s steps(2, start) infinite;
}
@keyframes tw-blink{ 50%{ opacity: 0; } }

.tw--underline{
  text-decoration: underline;
  text-decoration-color: var(--tw-accent, var(--accent, #34d399));
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
  .tw__caret{ animation: none; opacity: .55; }
}
