/* ============================================================
   variables.css — Custom Properties globales del sistema
   Importar primero. Todas las hojas de estilo consumen estas
   variables. No escribir valores hardcoded en otros archivos.
   ============================================================ */

:root {
  /* ── Colores primarios ──────────────────────────────────── */
  /* UPAEP Red #E30921 — Manual UPAEP para Google Sites.
     Uso exclusivo para elementos que deben resaltar (CTA primario,
     selección activa, foco) — nunca como color de texto/título genérico. */
  --color-tierra:        #E30921;
  --color-tierra-claro:  #ff4757;
  --color-tierra-oscuro: #a90719;
  --color-tierra-bg:     #fdeeef;   /* fondo muy claro con tinte rojo */

  /* ── Colores de apoyo ───────────────────────────────────── */
  /* Azul noche — sacado del cielo nocturno de la imagen Save the Date
     del evento (no del Manual UPAEP, que solo contempla rojo/gris; es
     una decisión de marca del usuario, limitada a propósito al hero de
     inicio). El pie de página, el banner de Asientos y el placeholder
     de equipaje sí siguen el Manual UPAEP: fondo rojo institucional
     (--color-tierra). El gris institucional del manual sigue vivo en
     la escala --color-gris-* para texto, bordes y fondos neutros de UI. */
  --color-noche:         #1B2140;
  --color-noche-claro:   #2A3358;
  --color-noche-oscuro:  #10142A;
  --color-arena:         #f7f8f9;   /* fondo claro general, neutro */
  --color-arena-oscuro:  #eceef0;

  /* Color de títulos y texto enfatizado por defecto — gris oscuro
     institucional, no rojo. El rojo (--color-tierra) se reserva para
     lo que debe resaltar de verdad (ver Manual UPAEP, "Paleta de colores"). */
  --color-titulo:        #383b3e;

  /* ── Colores semánticos ─────────────────────────────────── */
  --color-exito:          #27ae60;
  --color-exito-bg:       #eafaf1;
  --color-exito-borde:    #a9dfbf;

  --color-error:          #c0392b;
  --color-error-bg:       #fdf2f0;
  --color-error-borde:    #f1a9a0;

  --color-advertencia:    #d68910;
  --color-advertencia-bg: #fef9e7;
  --color-advertencia-borde: #f8e196;

  --color-info:           #2980b9;
  --color-info-bg:        #eaf4fb;
  --color-info-borde:     #a9d4ef;

  /* ── Neutros ─────────────────────────────────────────────── */
  /* Escala gris construida sobre los 3 grises oficiales UPAEP:
     gris-300 = Light grey (#B5BABD), gris-500 = UPAEP Grey (#909496),
     gris-700 = Dark grey (#52565A). El resto son interpolaciones para
     necesidades de UI (bordes, hover) que el manual no cubre. */
  --color-blanco:         #ffffff;
  --color-gris-100:       #f5f6f6;
  --color-gris-200:       #e7e9ea;
  --color-gris-300:       #B5BABD;  /* Light grey */
  --color-gris-400:       #9da2a5;
  --color-gris-500:       #909496;  /* UPAEP Grey */
  --color-gris-600:       #75797c;
  --color-gris-700:       #52565A;  /* Dark grey */
  --color-gris-800:       #35383b;
  --color-negro:          #1c1e1f;

  /* ── Tipografía ─────────────────────────────────────────── */
  /* Fuentes autorizadas por el Manual UPAEP: Roboto o Fira Sans.
     Se usa Fira Sans en todo el sitio (títulos y cuerpo) — la jerarquía
     se marca con tamaño y peso, no con una familia distinta, tal como
     recomienda el manual. Roboto queda como respaldo. */
  --fuente-display: "Fira Sans", "Roboto", system-ui, -apple-system, sans-serif;
  --fuente-cuerpo:  "Fira Sans", "Roboto", system-ui, -apple-system, sans-serif;
  --fuente-mono:    "Courier New", "Courier", monospace;

  --tam-xs:   0.75rem;   /* 12px */
  --tam-sm:   0.875rem;  /* 14px */
  --tam-base: 1rem;      /* 16px */
  --tam-md:   1.125rem;  /* 18px */
  --tam-lg:   1.25rem;   /* 20px */
  --tam-xl:   1.5rem;    /* 24px */
  --tam-2xl:  1.875rem;  /* 30px */
  --tam-3xl:  2.25rem;   /* 36px */
  --tam-4xl:  3rem;      /* 48px */

  --peso-normal:    400;
  --peso-medio:     500;
  --peso-semibold:  600;
  --peso-bold:      700;

  --altura-linea-ajustada: 1.25;
  --altura-linea-normal:   1.5;
  --altura-linea-relajada: 1.75;

  /* ── Espaciado (escala 4px) ─────────────────────────────── */
  --espacio-1:  0.25rem;  /*  4px */
  --espacio-2:  0.5rem;   /*  8px */
  --espacio-3:  0.75rem;  /* 12px */
  --espacio-4:  1rem;     /* 16px */
  --espacio-5:  1.25rem;  /* 20px */
  --espacio-6:  1.5rem;   /* 24px */
  --espacio-8:  2rem;     /* 32px */
  --espacio-10: 2.5rem;   /* 40px */
  --espacio-12: 3rem;     /* 48px */
  --espacio-16: 4rem;     /* 64px */
  --espacio-20: 5rem;     /* 80px */
  --espacio-24: 6rem;     /* 96px */

  /* Aliases semánticos */
  --espacio-xs:  var(--espacio-1);
  --espacio-sm:  var(--espacio-2);
  --espacio-md:  var(--espacio-4);
  --espacio-lg:  var(--espacio-6);
  --espacio-xl:  var(--espacio-10);
  --espacio-2xl: var(--espacio-16);

  /* ── Bordes ─────────────────────────────────────────────── */
  --radio-sm:   4px;
  --radio-md:   8px;
  --radio-lg:   12px;
  --radio-xl:   16px;
  --radio-pill: 9999px;
  --radio-circulo: 50%;

  --borde-ancho: 1px;
  --borde-ancho-md: 2px;
  --borde-color: var(--color-gris-300);
  --borde: var(--borde-ancho) solid var(--borde-color);

  /* ── Sombras ─────────────────────────────────────────────── */
  --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --sombra-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --sombra-xl: 0 20px 48px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.10);

  /* ── Transiciones ────────────────────────────────────────── */
  --transicion-rapida:  150ms ease;
  --transicion-normal:  250ms ease;
  --transicion-lenta:   400ms ease;
  --transicion-rebote:  300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Layout ─────────────────────────────────────────────── */
  --ancho-max:         1200px;
  --ancho-max-angosto: 720px;
  --ancho-max-estrecho: 480px;

  --altura-cabecera:   64px;
  --altura-pie:        56px;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:    0;
  --z-elevado: 10;
  --z-dropdown: 100;
  --z-modal:   200;
  --z-tooltip: 300;
  --z-tostada: 400;
}

/* Sin modo oscuro automático a propósito: el sitio debe verse igual sin
   importar el tema del sistema operativo/navegador del peregrino. Antes
   había un @media (prefers-color-scheme: dark) que solo cambiaba los
   fondos (--color-arena, --color-tierra-bg, etc.) pero no los colores de
   texto — en un teléfono con tema oscuro, el fondo se volvía gris/negro
   mientras el texto (pensado para fondo claro) seguía oscuro, así que
   secciones enteras ("¿Tienes dudas?", el hero de Registro, etc.) se
   volvían casi ilegibles. Si en el futuro se quiere dar soporte real a
   modo oscuro, hay que definir una paleta de texto Y fondo completa para
   ese modo, no solo un puñado de fondos sueltos. */