/* ==========================================================================
   Grupos Travel — capa de sistema
   --------------------------------------------------------------------------
   Este archivo se carga al final en index.html, portal.html y admin.html, por
   lo que es la unica fuente de verdad de los tokens. Las hojas de cada
   superficie (styles.css, styles-v2.css, portal.css, admin.css) consumen estos
   tokens y nunca redeclaran color, radio, sombra ni escala tipografica.

   Reglas de uso del color de marca:
   - Magenta  -> accion primaria y seleccion. Nada mas.
   - Navy     -> estructura, titulos, acciones secundarias.
   - Teal     -> disponibilidad, precio valido, confirmacion.
   - Naranja  -> alerta o pendiente. Nunca estructural, nunca texto sobre blanco.

   Los pares "tint / text / line" estan calculados para cumplir contraste AA en
   tema claro y oscuro, de modo que un mismo componente funciona en ambos.
   ========================================================================== */

/* Las fuentes de la marca, servidas por la propia plataforma (la politica de
   seguridad solo admite fuentes del mismo origen). Hasta el 2026-10-02 no se
   cargaban: cada equipo sin Montserrat ni Plus Jakarta Sans instaladas veia
   Segoe UI o Arial. Variables (un archivo cubre todos los pesos), subconjunto
   latino: tildes, eñe, ¿ y ¡. Licencia OFL 1.1, de @fontsource-variable 5.3. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"),
    url("./assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),
    url("./assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---------- Marca ---------- */
  --brand: #e6005c;
  --brand-hover: #cc0052;
  --brand-active: #a80043;
  --brand-text: #c1004e;
  --on-brand: #ffffff;
  --brand-tint: #fff2f6;
  --brand-tint-strong: #ffe2ec;
  --brand-line: #f4d9e2;
  --brand-line-strong: #eaa8be;

  --navy: #1a2b4c;
  --navy-hover: #23375e;
  --navy-strong: #122038;
  --on-navy: #ffffff;
  --navy-tint: #edf1f7;
  --navy-tint-strong: #dde5f0;
  --navy-line: #ccd6e6;

  /* ---------- Semanticos ---------- */
  --ok: #008379;
  --ok-hover: #006f66;
  --on-ok: #ffffff;
  --ok-text: #006f66;
  --ok-tint: #e3f4f1;
  --ok-line: #a5dbd4;

  --warn: #ff9900;
  --warn-text: #8a5300;
  --warn-tint: #fff4e0;
  --warn-line: #f3cd92;

  --danger: #c3002f;
  --danger-text: #a80029;
  --danger-tint: #ffedf0;
  --danger-line: #f2bfc9;

  --info: #276bb0;
  --info-text: #1f5892;
  --info-tint: #e9f1fa;
  --info-line: #b9d3ee;

  /* ---------- Neutros ---------- */
  --bg: #f1f4f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef1f7;
  --line: #dbe1ea;
  --line-soft: #e7ebf2;
  --line-strong: #8a919c;
  --ink: #17253f;
  --ink-2: #3c4a63;
  --muted: #5d6a80;
  --muted-2: #646e81;
  --overlay: rgba(15, 24, 40, .62);

  /* ---------- Alias heredados (no romper hojas existentes) ---------- */
  --paper: var(--surface);
  --wash: var(--bg);
  --surface-subtle: var(--surface-2);
  --surface-soft: var(--surface-2);
  --pink: var(--brand);
  --purple: var(--navy);
  --purple-soft: var(--navy-tint);
  --teal: var(--ok);
  --teal-soft: var(--ok-tint);
  --orange: var(--warn);
  --orange-soft: var(--warn-tint);
  --blue: var(--info);
  --success: var(--ok-text);

  /* ---------- Espaciado, base 8 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* ---------- Radios ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---------- Elevacion ---------- */
  --shadow-xs: 0 1px 2px rgba(19, 33, 57, .06);
  --shadow-sm: 0 1px 2px rgba(19, 33, 57, .05), 0 2px 8px rgba(19, 33, 57, .05);
  --shadow-md: 0 2px 4px rgba(19, 33, 57, .04), 0 10px 24px rgba(19, 33, 57, .07);
  --shadow-lg: 0 4px 10px rgba(19, 33, 57, .05), 0 20px 44px rgba(19, 33, 57, .11);
  --shadow-xl: 0 28px 70px rgba(19, 33, 57, .20);
  --shadow: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  /* Resplandor de marca. Estaba escrito cinco veces con cinco geometrias y tres
     opacidades para el mismo gesto. Tres niveles segun la elevacion real: marca
     de seleccion, llamada estandar y llamada flotante. No necesita variante
     oscura porque color-mix resuelve --brand por tema. */
  /* Pesos tipograficos. Era el unico eje sin gobierno: 161 declaraciones con
     seis valores sueltos. Los nombres describen el uso que ya tenian, no uno
     nuevo — ninguna regla cambia de peso:
       black     glifos de insignia (.departure-check, marcadores de estado)
       extrabold display y accion primaria (h1, button, valor de metrica, .tag)
       bold      encabezados de seccion (h2, h3, .eyebrow)
       semibold  rotulos secundarios (label small, .tag.subtle)
       medium    enfasis suave (.consent)
       regular   cuerpo y pistas
     Con esto, elegir entre bold y extrabold pasa a ser una decision con nombre
     en vez de un numero repetido. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Con las fuentes de verdad cargadas (2026-10-02), 800 y 900 pesaban
     demasiado: cada escalon baja uno. */
  --fw-extrabold: 700;
  --fw-black: 800;
  --shadow-brand-sm: 0 4px 12px color-mix(in srgb, var(--brand) 22%, transparent);
  --shadow-brand: 0 6px 16px color-mix(in srgb, var(--brand) 24%, transparent);
  --shadow-brand-lg: 0 10px 24px color-mix(in srgb, var(--brand) 28%, transparent);

  /* ---------- Tipografia ---------- */
  --font-display: Montserrat, "Segoe UI", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 21px;
  --fs-3xl: 25px;
  --fs-4xl: 30px;
  --fs-5xl: 38px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.5;
  --track-caps: .06em;

  /* ---------- Controles ----------
     Guia visual del 2026-10-01: 40 px el control normal, 36 el compacto y 44
     en pantallas tactiles. El compacto medía 34: veintiseis botones por debajo
     del minimo, «Agregar» entre ellos, que es la accion de cada tarifa. */
  --ctl-h-sm: 36px;
  --ctl-h: 40px;
  --ctl-h-lg: 48px;
  --tap: 44px;

  /* ---------- Foco ---------- */
  --focus-ring: #14213a;
  --focus-halo: #ffffff;
  --focus: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-ring);

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --dur: 150ms;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --brand: #e6005c;
  --brand-hover: #c4004d;
  --brand-active: #ff4d8c;
  --brand-text: #ff85ad;
  --on-brand: #ffffff;
  --brand-tint: #2a1522;
  --brand-tint-strong: #3b1c2c;
  --brand-line: #3d2531;
  --brand-line-strong: #7b3c54;

  --navy: #27395a;
  --navy-hover: #32476c;
  --navy-strong: #1b2942;
  --on-navy: #ffffff;
  --navy-tint: #1c2739;
  --navy-tint-strong: #24334a;
  --navy-line: #35486a;

  /* En oscuro el teal se aclara para servir tambien de borde visible; por eso
     el texto que va encima es tinta oscura y no blanco (blanco sobre teal
     claro no alcanza 4.5:1). */
  --ok: #35c2b5;
  --ok-hover: #4fd6c8;
  --on-ok: #052622;
  --ok-text: #4bcbbc;
  --ok-tint: #102b29;
  --ok-line: #1f524c;

  --warn: #d97e00;
  --warn-text: #ffbe5e;
  --warn-tint: #2d2313;
  --warn-line: #54401f;

  --danger: #c3002f;
  --danger-text: #ff8ba1;
  --danger-tint: #2c141a;
  --danger-line: #59232f;

  --info: #2f6fb8;
  --info-text: #82b8ec;
  --info-tint: #14243a;
  --info-line: #2c476b;

  --bg: #0e1522;
  --surface: #161f2e;
  --surface-2: #1c2637;
  --surface-3: #232f43;
  --line: #2b3a52;
  --line-soft: #212c3f;
  --line-strong: #5c7194;
  --ink: #e9eef7;
  --ink-2: #c7d1e1;
  --muted: #99a6be;
  --muted-2: #8b98b2;
  --overlay: rgba(4, 8, 15, .74);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .26);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .28), 0 10px 24px rgba(0, 0, 0, .32);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .30), 0 20px 44px rgba(0, 0, 0, .40);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, .55);

  --focus-ring: #ffd0e0;
  --focus-halo: #0e1522;
}

/* ==========================================================================
   Primitivas compartidas
   ========================================================================== */

/* Con el dedo, todo control llega al objetivo tactil de 44 px. */
@media (pointer: coarse), (max-width: 760px) {
  :root {
    --ctl-h-sm: var(--tap);
    --ctl-h: var(--tap);
  }
}

/* Foco visible unico para todas las superficies. Se dibuja por fuera del
   control con un halo del color del fondo, de modo que conserva contraste
   sobre blanco, sobre magenta y sobre la foto del hero. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
dialog:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-halo);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline-offset: 3px;
  box-shadow: none;
}

:where(input, select, textarea) {
  accent-color: var(--brand);
}

::selection {
  color: var(--on-brand);
  background: var(--brand);
}

/* Numeros alineados: precios, cupos y matrices deben poder compararse en
   vertical sin que los digitos bailen. */
:where(td, th, .price, .price-cell, .rate-choice, .quote-total, .quote-lines,
  .metric-card, .metric, .seat-count, .availability, .hotel-rate-cell,
  .quotation-row, .baggage-rate-row, .hold-row, .design-artifacts) {
  font-variant-numeric: tabular-nums;
}

/* Barras de scroll discretas dentro de paneles y tablas. */
* {
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
  background-clip: padding-box;
}

/* ==========================================================================
   Conmutador de tema (lo inserta theme.js en los tres encabezados)
   ========================================================================== */

.theme-toggle {
  flex: 0 0 auto;
  width: var(--tap);
  min-width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.theme-toggle:hover {
  color: var(--brand-text);
  background: var(--brand-tint);
  border-color: var(--brand-line-strong);
  filter: none;
}

/* ==========================================================================
   Ajustes que dependen del tema y no se resuelven con un token
   ========================================================================== */

html[data-theme="dark"] body {
  background: var(--bg);
}

/* El hero publico conserva la fotografia en oscuro; solo se refuerza el velo. */
html[data-theme="dark"] .search-shell::before {
  background: linear-gradient(180deg, rgba(6, 11, 20, .72), rgba(6, 11, 20, .88));
}

html[data-theme="dark"] .public-search {
  background: rgba(22, 31, 46, .94);
  border-color: rgba(255, 255, 255, .10);
}

/* El logo ya trae canal alfa. Traia el gris #ededed horneado en el archivo, y se
   compensaba con una placa redondeada para que no se viera un rectangulo suelto
   sobre blanco; reexportado con transparencia, la placa sobra y el logo se apoya
   en el fondo que tenga cada pantalla. */

html[data-theme="dark"] dialog::backdrop {
  background: var(--overlay);
}

/* El atributo hidden lo pisa cualquier regla que fije display, y eso pasaba de
   verdad: .contact-form lleva display:flex, asi que tras crear una prereserva
   el formulario seguia en pantalla —774x718px, todavia relleno— debajo del
   panel de confirmacion, aunque portal.js lo marcaba como oculto. Va aqui
   porque theme.css es la unica hoja que cargan las cinco paginas. El
   !important es el mismo criterio que los otros cuatro del proyecto, todos
   utilidades de display. */
[hidden] {
  display: none !important;
}

/* Texto solo para lectores de pantalla. El patron ya se usaba embebido en una
   media query de styles-v2.css, pero sin nombre reutilizable; aqui llega a las
   cinco paginas. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Estado de carga compartido
   Va aqui porque theme.css es la unica hoja que cargan las cinco paginas: en
   styles.css no llegaria a admin ni al portal. Antes las listas aparecian
   vacias mientras cargaban, asi que "todavia no llego" y "no hay nada" se
   leian igual. La animacion la neutraliza el bloque de prefers-reduced-motion
   de mas abajo, que fija animation-duration con !important.
   ========================================================================== */

.estado-cargando {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.estado-cargando::before,
.estado-cargando::after {
  content: "";
  display: block;
  height: var(--sp-4);
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: gt-cargando 1.2s ease-in-out infinite;
}

.estado-cargando::after {
  width: 60%;
}

@keyframes gt-cargando {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  .theme-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

/* ---------- Dialogos de confirmacion y aviso (dialogos.js) ----------
   Guia visual: maximo 512 px, padding 24, radio 12, sombra alta; acciones a la
   derecha en escritorio y apiladas en movil; la destructiva en rojo. Los
   estilos de sus botones van aqui dentro para que se vean igual en el
   constructor, en gestion y en diseno, que tienen hojas distintas. */
.gt-dialogo {
  width: min(512px, calc(100vw - 32px));
  padding: var(--sp-6);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
}

.gt-dialogo::backdrop {
  background: var(--overlay);
}

.gt-dialogo h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.gt-dialogo-cuerpo p {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.gt-dialogo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.gt-dialogo-acciones button {
  min-height: var(--ctl-h);
  padding: 0 var(--sp-4);
  color: var(--on-brand);
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  cursor: pointer;
}

.gt-dialogo-acciones button.ghost {
  color: var(--ink-2);
  background: var(--surface);
  border-color: var(--line-strong);
}

.gt-dialogo-acciones button.danger {
  color: #ffffff;
  background: var(--danger);
}

@media (max-width: 640px) {
  .gt-dialogo-acciones {
    flex-direction: column-reverse;
  }

  .gt-dialogo-acciones button {
    width: 100%;
    min-height: var(--tap);
  }
}

/* ---------- Boton trabajando ----------
   Guia visual: conserva su tamano, muestra que trabaja y dice el verbo en curso
   («Guardando…»). No se apaga como un deshabilitado: no es que no se pueda, es
   que ya esta en ello. */
button[aria-busy="true"],
button[aria-busy="true"]:disabled {
  opacity: 1;
  cursor: progress;
}

button[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--sp-2);
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gt-gira .7s linear infinite;
}

@keyframes gt-gira {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  button[aria-busy="true"]::before {
    animation: none;
    border-right-color: currentColor;
    opacity: .6;
  }
}