/* ════════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Sistema de Variables Globales
   Basado en GUIA_ESTILOS.md - Identidad Visual Corporativa
   ════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     ▌ COLORES PRIMARIOS
     ─────────────────────────────────────────────────────────────────────── */
  --color-primary:           #081F3A;   /* Azul tecnológico — Identidad principal */
  --color-primary-light:     #0e3260;   /* Azul claro — Hover suave */
  --color-primary-lighter:   #1a4d8f;   /* Azul muy claro — Fondos alternos */
  --color-primary-dark:      #04101f;   /* Azul profundo — Estados activos */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ COLORES DE ACENTO
     ─────────────────────────────────────────────────────────────────────── */
  --color-accent:            #F57C00;   /* Naranja energético — CTA y acentos */
  --color-accent-light:      #FF9800;   /* Naranja claro — Hover en botones */
  --color-accent-lighter:    #FFB74D;   /* Naranja muy claro — Fondos suaves */
  --color-accent-dark:       #E65100;   /* Naranja oscuro — Estados activos */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ ESCALA DE GRISES
     ─────────────────────────────────────────────────────────────────────── */
  --color-white:             #FFFFFF;   /* Blanco puro */
  --color-gray:              #555555;   /* Gris corporativo — Texto principal */
  --color-gray-light:        #888888;   /* Gris claro — Texto secundario */
  --color-gray-lighter:      #AAAAAA;   /* Gris muy claro — Texto desactivado */
  --color-gray-bg:           #F5F7FA;   /* Gris ultra claro — Fondos */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ FONDOS Y SUPERFICIES
     ─────────────────────────────────────────────────────────────────────── */
  --color-surface:           #FFFFFF;   /* Tarjetas y contenedores */
  --color-bg-light:          #F5F7FA;   /* Secciones alternas */
  --color-bg-subtle:         #EEF1F6;   /* Fondo sutil con tinte azul */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ BORDES
     ─────────────────────────────────────────────────────────────────────── */
  --color-border:            #E2E6ED;   /* Bordes normales */
  --color-border-light:      #F0F2F5;   /* Bordes muy suaves */
  --color-border-accent:     #F57C00;   /* Bordes con acento naranja */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ ESTADOS SEMÁNTICOS
     ─────────────────────────────────────────────────────────────────────── */
  --color-success:           #16A34A;   /* Verde — Disponibilidad, éxito */
  --color-warning:           #F59E0B;   /* Ámbar — Atención, advertencia */
  --color-danger:            #DC2626;   /* Rojo — Agotado, error */
  --color-info:              #0E7490;   /* Cian — Información */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ TIPOGRAFÍA — FAMILIAS DE FUENTES
     ─────────────────────────────────────────────────────────────────────── */
  --font-heading:            'League Spartan', sans-serif;     /* Títulos */
  --font-subtitle:           'Montserrat', sans-serif;         /* Subtítulos */
  --font-body:               'Poppins', sans-serif;            /* Cuerpo texto */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ TIPOGRAFÍA — TAMAÑOS
     ─────────────────────────────────────────────────────────────────────── */
  --fs-xs:                   0.72rem;   /* 11.5px — Muy pequeño (ayuda, notas) */
  --fs-sm:                   0.82rem;   /* 13px — Pequeño (etiquetas) */
  --fs-base:                 0.95rem;   /* 15px — Base normal (cuerpo) */
  --fs-md:                   1.05rem;   /* 17px — Medio (destacado) */
  --fs-lg:                   1.25rem;   /* 20px — Grande (H4, subtítulos) */
  --fs-xl:                   1.6rem;    /* 26px — Muy grande (H3) */
  --fs-2xl:                  2rem;      /* 32px — Doble grande (H2) */
  --fs-3xl:                  2.5rem;    /* 40px — Triple grande (H1) */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ TIPOGRAFÍA — PESOS
     ─────────────────────────────────────────────────────────────────────── */
  --fw-regular:              400;       /* Poppins — Cuerpo de texto */
  --fw-medium:               500;       /* Poppins — Énfasis ligero */
  --fw-semibold:             600;       /* Montserrat — Subtítulos */
  --fw-bold:                 700;       /* League Spartan — Títulos */
  --fw-extrabold:            800;       /* League Spartan — Énfasis máximo */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ ESPACIADO — SISTEMA MODULAR
     ─────────────────────────────────────────────────────────────────────── */
  --space-xs:                4px;       /* Espacios micro */
  --space-sm:                8px;       /* Espacios pequeños */
  --space-md:                16px;      /* Espacios medios */
  --space-lg:                24px;      /* Espacios grandes */
  --space-xl:                32px;      /* Espacios extra grandes */
  --space-2xl:               48px;      /* Espacios dobles */
  --space-3xl:               64px;      /* Espacios triples */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ BORDES REDONDEADOS
     ─────────────────────────────────────────────────────────────────────── */
  --radius-sm:               4px;       /* Pequeño */
  --radius-md:               8px;       /* Medio */
  --radius-lg:               12px;      /* Grande */
  --radius-xl:               16px;      /* Extra grande */

  /* ─────────────────────────────────────────────────────────────────────
     ▌ SOMBRAS
     ─────────────────────────────────────────────────────────────────────── */
  --shadow-sm:               0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:               0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg:               0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl:               0 12px 24px rgba(0, 0, 0, 0.15);

  /* ─────────────────────────────────────────────────────────────────────
     ▌ TRANSICIONES
     ─────────────────────────────────────────────────────────────────────── */
  --transition-fast:         150ms ease-in-out;
  --transition-base:         300ms ease-in-out;
  --transition-slow:         500ms ease-in-out;

  /* ─────────────────────────────────────────────────────────────────────
     ▌ Z-INDEX
     ─────────────────────────────────────────────────────────────────────── */
  --z-dropdown:              1000;
  --z-sticky:                1100;
  --z-modal:                 1200;
  --z-popover:               1300;
  --z-tooltip:               1400;
}

/* ════════════════════════════════════════════════════════════════════════════════
   RESET Y BASES GLOBALES
   ════════════════════════════════════════════════════════════════════════════════ */

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-gray);
  background-color: var(--color-white);
}

/* ════════════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA GLOBAL
   ════════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-md) 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.2;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4, .subtitle { 
  font-family: var(--font-subtitle);
  font-size: var(--fs-lg); 
  font-weight: var(--fw-semibold);
}
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
  margin: 0 0 var(--space-md) 0;
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent);
}