/* ============================================================
   variables.css
   Tokens de diseño del D.S.H.P.S.E.T Jalisco
   Punto único de verdad para colores, tipografías, espaciados,
   radios, sombras y breakpoints. Cualquier cambio visual del
   sitio debería poder hacerse aquí.
   ============================================================ */

:root {
  /* ---------- Paleta institucional (fija — no modificar) ---------- */
  --color-azul-principal: #1A3A7A;   /* Color primario del sindicato */
  --color-dorado:         #C9960C;   /* Acento institucional */
  --color-azul-medio:     #2456B0;   /* Hover / variante del primario */
  --color-azul-claro:     #D6E4F7;   /* Fondos suaves, badges informativos */
  --color-gris-claro:     #F4F6F9;   /* Fondo general del sitio */
  --color-texto:          #1C2833;   /* Texto principal */
  --color-texto-secundario: #5D6D7E; /* Texto secundario / metadatos */

  /* ---------- Variantes derivadas (estados y superficies) ---------- */
  --color-blanco:           #FFFFFF;
  --color-superficie:       #FFFFFF; /* Tarjetas, inputs, modales */
  --color-superficie-alt:   #F4F6F9; /* Filas zebra, secciones intercaladas */
  --color-borde:            #E0E4EA; /* Bordes sutiles */
  --color-borde-fuerte:     #C4C9D2; /* Bordes con más contraste */

  --color-dorado-suave:     #FFE9B0; /* Fondos de avisos / badges dorados */
  --color-dorado-oscuro:    #A57C0A; /* Hover sobre el dorado */
  --color-azul-oscuro:      #122759; /* Fondo de pie de página, hovers oscuros */

  /* ---------- Estados (éxito, advertencia, error, info) ---------- */
  --color-exito:        #1E8449;
  --color-exito-suave:  #D4EFDF;
  --color-aviso:        #B7791F;
  --color-aviso-suave:  #FFF3CD;
  --color-error:        #B91C1C;
  --color-error-suave:  #FCE4E4;
  --color-info:         #2456B0;
  --color-info-suave:   #D6E4F7;

  /* ---------- Tipografía ---------- */
  --fuente-base: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
                 'Helvetica Neue', Arial, sans-serif;

  /* Tamaños tipográficos (escala modular suave) */
  --fs-xs:   0.75rem;   /* 12px — captions, metadatos */
  --fs-sm:   0.875rem;  /* 14px — labels, navegación */
  --fs-base: 1rem;      /* 16px — cuerpo de texto */
  --fs-lg:   1.125rem;  /* 18px — texto destacado */
  --fs-xl:   1.25rem;   /* 20px — h4 */
  --fs-2xl:  1.5rem;    /* 24px — h3 mobile */
  --fs-3xl:  1.75rem;   /* 28px — h3 desktop */
  --fs-4xl:  2.25rem;   /* 36px — h2 */
  --fs-5xl:  3rem;      /* 48px — h1 */

  /* Pesos */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Alturas de línea */
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;

  /* ---------- Espaciados (escala 4/8 px) ---------- */
  --sp-1:  0.25rem;  /*  4px */
  --sp-2:  0.5rem;   /*  8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.5rem;   /* 24px */
  --sp-6:  2rem;     /* 32px */
  --sp-7:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */
  --sp-9:  6rem;     /* 96px */

  /* ---------- Radios de borde ---------- */
  --radio-sm:    6px;
  --radio:      10px;   /* Estándar institucional — usar por defecto */
  --radio-lg:   16px;
  --radio-pill: 9999px;

  /* ---------- Sombras ---------- */
  --sombra-sm: 0 1px 2px rgba(26, 58, 122, 0.06);
  --sombra:    0 4px 12px rgba(26, 58, 122, 0.08);
  --sombra-lg: 0 12px 28px rgba(26, 58, 122, 0.12);

  /* ---------- Layout ---------- */
  --ancho-maximo: 1200px;        /* Contenedor principal del sitio */
  --ancho-lectura: 70ch;          /* Bloques de texto largos */
  --altura-nav: 72px;             /* Altura de la barra de navegación */
  --altura-alert: 40px;           /* Altura de la barra de avisos */

  /* ---------- Transiciones ---------- */
  --transicion-rapida: 150ms ease;
  --transicion:        220ms ease;
  --transicion-lenta:  400ms ease;

  /* ---------- Z-index (capas) ---------- */
  --z-dropdown: 100;
  --z-nav:      200;
  --z-alert:    300;   /* La barra de avisos vive sobre la nav */
  --z-modal:    400;
  --z-toast:    500;
}

/* ---------- Breakpoints ----------
   Mobile-first: los media queries usan min-width. Estos valores
   se documentan aquí; CSS no soporta variables nativas dentro de
   @media, así que se replican como literales en los archivos que
   los usan. Mantenerlos sincronizados con esta tabla.

   --bp-sm:  480px   — móvil grande
   --bp-md:  768px   — tablet (BREAKPOINT PRINCIPAL del proyecto)
   --bp-lg:  1024px  — desktop
   --bp-xl:  1280px  — desktop grande
*/