/* ==========================================================
   ENLACE NEM - SISTEMA DE DESIGN TOKENS
   Cumplimiento WCAG 2.1 / 2.2 Nivel AAA | Mobile-First
   ========================================================== */

:root {
  /* --- Paleta Institucional Base --- */
  --color-brand-navy: #1E3A8A;         /* Azul Noche: App Shell, Header, Títulos */
  --color-brand-navy-dark: #172554;
  --color-brand-emerald: #059669;      /* Verde Esmeralda: Acciones Primarias, Online */
  --color-brand-emerald-hover: #047857;
  --color-brand-bg-light: #F8FAFC;     /* Gris Suave: Canvas de fondo neutro */
  --color-brand-surface: #FFFFFF;      /* Superficie de tarjetas y modales */
  --color-brand-surface-subtle: #F1F5F9;
  --color-brand-border: #CBD5E1;
  --color-brand-border-focus: #059669;
  --color-brand-slate-text: #1E293B;   /* Gris Pizarra: Texto de lectura principal */
  --color-brand-muted-text: #475569;   /* Texto secundario de alta legibilidad */

  /* --- Semáforo Zonal Institucional --- */
  --color-semantic-success: #10B981;   /* Cumplimiento óptimo (>=80%) */
  --color-semantic-success-bg: #ECFDF5;
  --color-semantic-warning: #F59E0B;   /* Advertencia preventiva (60-79%) */
  --color-semantic-warning-bg: #FFFBEB;
  --color-semantic-danger: #EF4444;    /* Alerta crítica (<60%) */
  --color-semantic-danger-bg: #FEF2F2;

  /* --- Campos Formativos NEM --- */
  --color-nem-lenguajes: #0284C7;
  --color-nem-saberes: #16A34A;
  --color-nem-etica: #EA580C;
  --color-nem-humano: #7C3AED;

  /* --- Ergonomía Táctil y Mobile-First --- */
  --header-height: 56px;               /* Altura fija del Header institucional */
  --touch-target-min: 44px;            /* Dimensión mínima reglamentaria */
  --touch-target-gap: 8px;             /* Separación mínima preventiva */

  /* --- Tipografía --- */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-h1: 1.5rem;      /* 24px */
  --font-size-h2: 1.25rem;     /* 20px */
  --font-size-h3: 1.125rem;    /* 18px */
  --font-size-body: 1rem;      /* 16px */
  --font-size-caption: 0.875rem; /* 14px */
  --line-height-base: 1.5;

  /* --- Sombras y Radios --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.25);

  /* --- Transiciones --- */
  --transition-fast: all 0.15s ease-in-out;
  --transition-normal: all 0.2s ease-in-out;
}