/* ═══ Sistema de diseño de Unnión: la única fuente de colores, letra, tamaños, radios, sombras y movimiento ═══
   Definido en definicion/secciones/S30-datos-arbol-mapa-ilustrado-diseno.md (bloque C).
   Se sirve en /campo/marca/tokens.css: lo cargan la app de campo (y lo guarda para trabajar sin señal), el panel,
   el panel de empresa, la ficha pública y la verificación.

   Dos grupos:
   1. MARCA: los mismos nombres y valores del sitio nuevo (rediseno-web-v5/sitio/css/unnion.css y, cuando exista,
      el tema unnion-parque). herramientas\revisar-tokens.ps1 falla si uno de los dos cambia sin el otro.
   2. SISTEMA: lo que el sitio no necesita y el sistema sí (textos, superficies, estados, tamaños de campo).
      Cada color de texto está medido: cumple 4,5 : 1 sobre --fondo y sobre --panel (S30-R42).

   Reglas que no se discuten: --hoja nunca va como texto sobre fondo claro (2,4 : 1; S30-R41); ninguna pantalla
   escribe un color a mano (S30-R40). */

@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fuentes/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../fuentes/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fuentes/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fuentes/poppins-700.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(../fuentes/poppins-800.woff2) format('woff2')}

:root{
  /* ── 1. MARCA (igual al sitio) ── */
  --noche: #002313;      /* verde profundo: el «negro» de la marca */
  --verde: #004F28;      /* verde Unnión: color principal (9,8 : 1 sobre blanco) */
  --hoja: #66BA47;       /* verde claro: solo acentos, nunca texto sobre claro */
  --blanco: #FFFEFE;
  --agua: #165A8A;       /* información, riego (7,3 : 1) */
  --tierra: #994331;     /* peligro: crítico, muerto, error (6,6 : 1) */
  --claro: #EEF2EA;      /* superficie clara de la marca */
  --vidrio: rgba(255, 254, 254, .08);
  --borde: rgba(255, 254, 254, .16);
  --tenue: rgba(255, 254, 254, .66);
  --radio: 20px;
  --curva: cubic-bezier(.22, .8, .24, 1);
  --curva-sale: cubic-bezier(.6, 0, .8, .2);

  /* ── 2. SISTEMA ── */
  /* fondo más hondo del panel (la piel del 3-nov: fondo oscuro con tarjetas blancas encima) */
  --abismo: #00170C;

  /* texto sobre fondo claro */
  --tinta: #14241A;      /* 15,6 : 1 */
  --tinta2: #4B5B4F;     /* 7,0 : 1 */
  --tinta3: #5F6D63;     /* 5,4 : 1 sobre blanco y 4,9 : 1 sobre --panel: el más tenue permitido */

  /* texto sobre fondo oscuro (--noche o --abismo) */
  --tinta-o: #F4F7F1;
  --tinta-o2: rgba(244, 247, 241, .78);
  --tinta-o3: rgba(244, 247, 241, .62);

  /* superficies claras */
  --fondo: #FFFFFF;
  --panel: #F1F4EC;
  --panel2: #E4E9DD;
  --linea: #E1E6DC;
  --linea2: #C9D3C4;

  /* estados: color de texto o ícono (-t), y fondo suave (-f). Nunca solo el color: siempre con texto o ícono */
  --bien-t: #23703A;     /* 6,1 : 1 */
  --bien-f: #E5F2E8;
  --aviso-t: #8A5A00;    /* 5,9 : 1 (S30-D4) */
  --aviso-f: #FFF3DC;
  --mal-t: var(--tierra);
  --mal-f: #F8E9E5;
  --info-t: var(--agua);
  --info-f: #E6EFF6;

  /* punto de ubicación del teléfono en el mapa (convención de todos los mapas; no es texto) */
  --gps: #1A73E8;

  /* letra */
  --sans: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --codigo: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --t-xs: 12px;          /* solo etiquetas en mayúscula y notas del panel; nunca en la app de campo */
  --t-s: 14px;           /* cuerpo del panel */
  --t-m: 16px;           /* cuerpo de la app de campo y de lo público (S30-R45) */
  --t-l: 20px;
  --t-xl: 28px;
  --t-xxl: 40px;

  /* espacios */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  /* radios: --radio es el de la marca (tarjetas grandes) */
  --radio-m: 14px;       /* botones y campos */
  --radio-s: 8px;        /* etiquetas, casillas */
  --radio-pildora: 999px;

  /* sombras */
  --sombra: 0 1px 2px rgba(0, 35, 19, .05), 0 8px 22px rgba(0, 35, 19, .08);
  --sombra2: 0 24px 60px rgba(0, 23, 12, .32);

  /* toque mínimo (S30-R45) */
  --toque: 48px;

  /* movimiento: corto en los paneles y casi nada en el campo (S30-R46) */
  --dur: 220ms;
  --dur-corta: 140ms;
  --dur-campo: 90ms;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur: 0ms; --dur-corta: 0ms; --dur-campo: 0ms; }
}