/* ================================================================
   RESERVAR.CSS — el armador completo del cotizador, en una sola hoja
   -----------------------------------------------------------------
   Tres secciones, EN ESTE ORDEN (el orden ES la cascada):
     1. Base del motor — estructura, tokens, estados y controles
     2. Diseño del armador — tema claro, el día en una fila, la cadena
        vertical con su línea, el detalle y los opcionales
     3. Piel del sitio — los tokens del home y las recetas de sus campos
   El home liviano usa reserva-light.css: otra entrada, otra pantalla.
   ================================================================ */

/* ================================================================
   1 · BASE DEL MOTOR
   ================================================================ */
/* ================================================================
   MOTOR DE RESERVA — base compartida del cotizador y del home
   -----------------------------------------------------------------
   Paleta de marca: verde profundo #085041, verde medio #1D9E75,
   dorado #C8A45A, base oscura #03201A (footer).
   Layout del formulario (referencia modelo):
   · Columna IZQUIERDA: comboboxes (origen → destinos) en cadena
     vertical, con línea de trayectoria + nodos.
   · Guía central imaginaria; columna DERECHA de igual peso: por tramo
     inversor vertical ⇅ + hora + ida y vuelta (en la misma línea).
   · Tira de pasos (breadcrumb) en capa cromática + resumen por día.
   ================================================================ */
 

.gt-builder,
[data-gt-builder] {
  --gt-bg:      #03201A;
  --gt-deep:    #052E24;
  --gt-card:    #0A3B2E;
  --gt-card2:   #0E4A3A;
  --gt-card3:   #14583F;
  --gt-card-h:  #1C6A4C;
  --gt-brd:     rgba(225, 245, 238, 0.10);
  --gt-brd2:    rgba(225, 245, 238, 0.20);
  --gt-txt:     #F4FBF7;
  --gt-txt2:    #BFD8CC;
  --gt-txt3:    #9DBDB0;
  --gt-grn:     #1D9E75;
  --gt-grn-h:   #2FBD8C;
  --gt-grn-dk:  #085041;
  --gt-grn-line: rgba(29, 158, 117, 0.55);
  --gt-gold:    #C8A45A;
  --gt-gold-line: rgba(200, 164, 90, 0.5);
  --gt-vc:      #E1F5EE;
  --gt-danger:  #E06A5A;
  --gt-wa:      #25D366;
  --gt-r:       12px;   /* tarjetas — alineado al sistema del sitio */
  --gt-rs:      8px;    /* inputs/controles — alineado al sistema del sitio */
  /* relieve sobre fondo oscuro: light-top-edge + sombra suave (no sombra gigante) */
  --gt-sh:      0 1px 0 rgba(225, 245, 238, 0.07) inset, 0 14px 34px rgba(0, 0, 0, 0.24);
  color-scheme: dark;
}

/* ============ sección full-width con fondo de marca ============ */
.sec-reservas {
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(200, 164, 90, 0.14), transparent 60%),
    radial-gradient(900px 620px at 0% 115%, rgba(29, 158, 117, 0.18), transparent 55%),
    linear-gradient(180deg, #053D2E 0%, #063927 100%);
  border-top: 1px solid rgba(225, 245, 238, 0.07);
  border-bottom: 1px solid rgba(225, 245, 238, 0.06);
}
.sec-reservas .sec-header h2,
.sec-reservas h2 { color: #F4FBF7; }
.sec-reservas .sec-pretitle { color: #C8A45A; }
.sec-reservas p { color: rgba(244, 251, 247, 0.78); }
/* El divisor dorado va debajo del título, no del subtítulo. */
.sec-reservas .sec-header::after { display: none; }
.sec-reservas .sec-header h2::after {
  content: ''; display: block; width: 40px; height: 2px;
  background: #C8A45A; margin: 16px auto 0; border-radius: 2px;
}
.sec-reservas .sec-header .sec-sub {
  margin: 10px auto 0; max-width: 56ch;
  font-size: 0.95rem; line-height: 1.5;
  color: rgba(244, 251, 247, 0.78);
}
/* ============ base ============ */


 
.gt-builder * { box-sizing: border-box; }
.gt-builder [hidden] { display: none !important; }
.gt-builder {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gt-txt);
}
.gt-builder input,
.gt-builder select,
.gt-builder textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--gt-txt);
}
.gt-builder button { font-family: inherit; }
.gt-builder input::placeholder,
.gt-builder textarea::placeholder { color: var(--gt-txt3); }

/* ============ contenedores ============ */
.gt-builder {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 120px), var(--gt-bg);
  border: 1px solid var(--gt-brd);
  border-radius: var(--gt-r);
  box-shadow: var(--gt-sh);
  padding: clamp(16px, 3vw, 30px);
}

/* ============ meta (pasajeros / equipaje + total + confirmar) ============ */
.gt-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--gt-card); border: 1px solid var(--gt-brd); border-radius: var(--gt-rs);
  padding: 10px 14px; margin-bottom: 14px;
}
.gt-meta--sticky { position: sticky; top: var(--hh, 72px); z-index: 900; }
.gt-meta--entry { margin-bottom: 12px; }
/* entrada básica: la fecha ocupa la fila superior; pasajero y equipaje
   van en fila debajo para no amontonarse */
.gt-meta--entry .gt-meta__fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: end;
}
.gt-meta--entry .gt-meta__field--date { grid-column: 1 / -1; }
.gt-meta__fields { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; min-width: 0; }
.gt-meta__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gt-meta__label {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gt-txt3);
}
.gt-meta__rail { display: flex; align-items: center; gap: 18px; margin-left: auto; min-width: 0; }
.gt-meta select {
  width: 100%; appearance: none; -webkit-appearance: none; position: relative;
  background: var(--gt-card3) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238FB3A4' d='M5 6 0 0h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs);
  padding: 9px 34px 9px 12px; cursor: pointer; color: var(--gt-txt);
}
.gt-meta select:focus { outline: none; border-color: var(--gt-grn); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18); }
.gt-qty { display: inline-flex; align-items: center; border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs); overflow: hidden; width: fit-content; }
.gt-qty__btn { width: 30px; height: 34px; border: none; background: var(--gt-card3); color: var(--gt-txt); font-size: 1rem; cursor: pointer; transition: background 0.2s; }
.gt-qty__btn:hover { background: var(--gt-card-h); color: var(--gt-gold); }
.gt-qty__val { min-width: 30px; text-align: center; font-weight: 600; font-size: 0.92rem; }
/* ============ equipaje (campo único con desplegable de 3 tamaños) ============ */
.gt-equip { position: relative; }
.gt-equip__btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--gt-card3); border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs);
  padding: 6px 12px; min-height: 35.6px; cursor: pointer; color: var(--gt-txt);
  font-size: 0.92rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.gt-equip__btn:hover { border-color: var(--gt-grn-line); }
.gt-equip__btn:focus { outline: none; border-color: var(--gt-grn); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18); }
.gt-equip__btn[aria-expanded="true"] { border-color: var(--gt-grn); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18); }
.gt-equip__sum { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.gt-equip__btn .fa-chevron-down { flex: none; font-size: 0.75rem; color: var(--gt-txt3); transition: transform 0.2s; }
.gt-equip__btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); color: var(--gt-grn-h); }
.gt-equip__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 95;
  display: none; min-width: 250px; max-width: 300px;
  background: var(--gt-card2); border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); padding: 10px 12px;
}
.gt-equip__panel.is-open { display: grid; gap: 10px; }
.gt-equip__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gt-equip__name { font-size: 0.9rem; color: var(--gt-txt); white-space: nowrap; }
.gt-meta__veh { font-size: 0.72rem; color: var(--gt-txt2); }
.gt-meta__veh--row { flex: 1 1 100%; margin-top: 4px; }
.gt-meta__veh--up { color: var(--gt-grn-h); }
.gt-meta__veh--warn { color: var(--gt-gold); }
.gt-meta__note { font-size: 0.74rem; color: var(--gt-txt3); }
.gt-meta__concepts { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.gt-meta__concept { font-size: 0.72rem; color: var(--gt-txt2); }
.gt-meta__concept-up { color: var(--gt-gold); font-weight: 600; font-size: 0.72rem; }

.gt-datebox {
  position: relative; display: inline-flex; align-items: center;
  background: var(--gt-card3); border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs);
  padding: 9px 34px 9px 12px; min-height: 40px; color: var(--gt-txt);
}
.gt-datebox--wide { width: 100%; }
.gt-datebox__txt { pointer-events: none; white-space: nowrap; font-size: 0.92rem; }
.gt-datebox--empty .gt-datebox__txt { color: var(--gt-txt3); }
.gt-datebox__in {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; background: transparent; border-radius: inherit; color: transparent;
}
.gt-datebox__in:focus { outline: none; }
.gt-datebox:focus-within { border-color: var(--gt-grn); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18); }
.gt-datebox__ic { position: absolute; right: 12px; color: var(--gt-txt3); font-size: 0.85rem; pointer-events: none; }
.gt-datebox__in::-webkit-calendar-picker-indicator,
.gt-time::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.gt-datebox__in::-webkit-datetime-edit,
.gt-time::-webkit-datetime-edit { pointer-events: none; }
.gt-datebox__in::-moz-calendar-picker-indicator,
.gt-time::-moz-calendar-picker-indicator { position: absolute; inset: 0; opacity: 0; }

/* ============ tarjeta de día ============ */
.gt-days__list { display: grid; gap: 14px; margin-bottom: 12px; }
.gt-day {
  border: 1px solid var(--gt-brd); border-radius: var(--gt-r);
  background: linear-gradient(180deg, var(--gt-card), var(--gt-bg));
}
.gt-day--open { border-color: var(--gt-brd2); box-shadow: 0 0 0 1px rgba(29, 158, 117, 0.10); }
.gt-day--entry { background: transparent; border: none; box-shadow: none; }
.gt-day__bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: linear-gradient(180deg, var(--gt-card2), transparent);
}
.gt-day--open .gt-day__bar { background: linear-gradient(180deg, rgba(29, 158, 117, 0.16), transparent); }
.gt-day__num { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; color: var(--gt-grn-h); text-transform: uppercase; flex: none; display: inline-flex; align-items: center; gap: 7px; }
.gt-day__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gt-grn); box-shadow: 0 0 0 3px rgba(47, 189, 140, 0.22); flex: none; }
.gt-day__collapse, .gt-day__expand, .gt-day__remove {
  appearance: none; cursor: pointer; background: transparent; color: var(--gt-txt2);
  width: 32px; height: 32px; border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs);
  font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.gt-day__collapse:hover, .gt-day__expand:hover { border-color: var(--gt-brd2); color: var(--gt-txt); background: var(--gt-card-h); }
.gt-day__remove { color: var(--gt-txt3); }
.gt-day__remove:hover { color: var(--gt-danger); border-color: rgba(224, 106, 90, 0.35); }
.gt-day__body { padding: 18px clamp(8px, 1.8vw, 20px) 22px; }

/* ============ cadena vertical (2 columnas de igual peso) ============ */
.gt-route {
  position: relative;
  display: grid;
  /* El combo toma el ancho disponible; las propiedades del tramo se ajustan a
     su contenido (~264px) para no dejar aire muerto ni comprimir los combos. */
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
}
/* línea de trayectoria (spine) a la izquierda */
.gt-route::before {
  content: ''; position: absolute; left: 20px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--gt-grn-line), rgba(29, 158, 117, 0.2));
  border-radius: 2px; pointer-events: none; z-index: 0;
}
.gt-route__cell { position: relative; z-index: 1; min-width: 0; }
/* celda con dropdown abierto: por encima de los combos siguientes */
.gt-route__cell--open { z-index: 60; }

/* ============ nodo (label + dot + combo) ============ */
.gt-node { padding: 4px 12px 6px 0; }
.gt-node__k {
  display: flex; align-items: center; gap: 6px;
  padding-left: 40px;
  font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gt-txt3); margin-bottom: 5px;
}
.gt-node--last .gt-node__k { color: var(--gt-gold); }
/* La píldora "último" se retiró: el último destino ya se reconoce por su
   posición (es el que está justo arriba del retorno o del botón de agregar) y
   su rótulo en dorado alcanza como señal. */
.gt-node__row { position: relative; display: flex; align-items: center; padding-left: 40px; }
.gt-node__dot {
  position: absolute; left: 13px; top: 50%; margin-top: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gt-grn-dk); border: 2px solid var(--gt-grn);
  box-shadow: 0 0 0 2px rgba(29, 158, 117, 0.16);
  z-index: 2; pointer-events: none;
}
.gt-node--origin .gt-node__dot { border-color: var(--gt-grn); }
.gt-node--last .gt-node__dot { border-color: var(--gt-gold); background: rgba(200, 164, 90, 0.25); box-shadow: 0 0 0 2px rgba(200, 164, 90, 0.14); }
/* El retorno es un nodo más de la trayectoria: la línea lo atraviesa, así que
   no lleva borde punteado propio ni corrimientos (eso lo dejaba 16px fuera de
   la línea). Se conserva la marca dorada, que es lo que lo distingue. */
.gt-node--ret .gt-node__k { color: var(--gt-gold); }
.gt-node--ret .gt-node__dot { border-color: var(--gt-gold); border-style: dashed; background: var(--gt-card); box-shadow: 0 0 0 2px rgba(200, 164, 90, 0.14); }
.gt-node__row .gt-loc { flex: 1 1 auto; min-width: 0; }

/* combobox */
.gt-loc { position: relative; min-width: 0; }
.gt-loc__value, .gt-loc__input {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--gt-card3); border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs);
  padding: 9px 8px 9px 12px; min-height: 44px;
}
.gt-loc__value--sel { background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--gt-card2); border-color: var(--gt-brd2); }
.gt-loc__input { cursor: text; }
.gt-loc__input:focus { outline: none; border-color: var(--gt-grn); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18); }
.gt-loc__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; flex: 1 1 auto; min-width: 0; }
.gt-loc__actions { display: inline-flex; gap: 2px; margin-left: auto; flex: none; }
.gt-loc__ic {
  appearance: none; cursor: pointer; flex: none;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--gt-txt3);
  border-radius: 8px; font-size: 0.9rem; transition: all 0.2s;
}
.gt-loc__ic:hover { color: var(--gt-txt); background: rgba(255, 255, 255, 0.08); border-color: var(--gt-brd2); }
.gt-loc__ic--del:hover { color: var(--gt-danger); border-color: rgba(224, 106, 90, 0.4); }
.gt-loc__ic--dead { border-color: var(--gt-brd2); background: rgba(255, 255, 255, 0.03); }
.gt-loc__list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90;
  background: #0d3227; border: 1px solid var(--gt-brd2); border-radius: var(--gt-rs);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); max-height: 300px; overflow: auto; padding: 6px;
}
.gt-loc__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--gt-txt); cursor: pointer; font-size: 0.92rem;
}
.gt-loc__item:hover, .gt-loc__item--active { background: var(--gt-card-h); border-color: var(--gt-grn-line); }
.gt-loc__item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-loc__item-type { color: var(--gt-txt3); font-size: 0.75rem; flex: none; }
.gt-loc__empty { padding: 12px; color: var(--gt-txt2); font-size: 0.85rem; }

/* chips tipados */
.gt-chip {
  flex: none; font-size: 0.7rem; letter-spacing: 0.02em;
  border-radius: 6px; padding: 2px 8px; border: 1px solid var(--gt-brd2);
  color: var(--gt-txt2); background: rgba(255, 255, 255, 0.05);
}
/* Categorías de lugar: una sola jerarquía cromática. El dorado queda reservado
   al aeropuerto/terminal (nodo clave del transfer); el resto en neutro para no
   competir con la información. */
.gtp-aeropuerto, .gtp-terminal { color: var(--gt-gold); border-color: var(--gt-gold-line); background: rgba(200, 164, 90, 0.1); }

/* ============ propiedades del tramo (columna derecha) ============ */
.gt-route__cell--props {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  flex-wrap: wrap; gap: 6px; padding: 4px 0 4px 10px; min-height: 0;
}
.gt-legctl {
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: wrap;
}
.gt-inv {
  appearance: none; cursor: pointer; flex: none;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gt-grn-line); background: rgba(29, 158, 117, 0.10);
  color: var(--gt-grn-h); border-radius: 8px; font-size: 0.8rem; line-height: 1;
  transition: all 0.2s;
}
.gt-inv:hover:not(:disabled) { background: rgba(29, 158, 117, 0.22); color: var(--gt-grn-h); transform: translateY(-1px); }
.gt-inv:disabled { opacity: 0.35; cursor: not-allowed; }
.gt-leg__timewrap { position: relative; z-index: 1; display: inline-flex; }
.gt-temporal { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.gt-time {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 100%; min-width: 96px; text-align: center;
  background: var(--gt-card3); border: 1px solid var(--gt-brd2); border-radius: 999px;
  padding: 6px 18px 6px 6px; color: var(--gt-txt); cursor: pointer;
  font-variant-numeric: tabular-nums; transition: border-color 0.2s, box-shadow 0.2s;
}
.gt-time:hover { border-color: var(--gt-grn-line); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12); }
.gt-time--req { border-color: rgba(200, 164, 90, 0.5); }
.gt-time__clear {
  appearance: none; cursor: pointer; flex: none; width: 22px; height: 22px;
  border: 1px solid var(--gt-brd2); border-radius: 50%; background: var(--gt-card3);
  color: var(--gt-txt2); font-size: 0.85rem; line-height: 1; padding: 0;
  transition: all 0.2s;
}
.gt-time__clear:hover { color: var(--gt-gold); border-color: var(--gt-gold-line); }
/* Un solo dato de ayuda por día: se ocultan los ⓘ repetidos de cada hora
   (el mismo texto "se coordina con el chofer" se repetía en cada tramo). */
.gt-temporal .gt-ii { display: none; }
.gt-ret {
  appearance: none; cursor: pointer; flex: none;
  border: 1px solid var(--gt-brd2); background: var(--gt-card2); color: var(--gt-txt2);
  border-radius: 999px; padding: 6px 10px; font-size: 0.75rem; font-weight: 500;
  transition: all 0.2s; white-space: nowrap;
}
.gt-ret:hover { border-color: var(--gt-gold-line); color: var(--gt-gold); }
.gt-ret--on { background: rgba(200, 164, 90, 0.16); color: var(--gt-gold); border-color: var(--gt-gold); font-weight: 600; }
.gt-leg__hint {
  font-size: 0.72rem; color: var(--gt-txt3); max-width: 200px; text-align: center; min-height: 1em;
}

/* ============ retorno (ida y vuelta) — un solo combo ============ */


.gt-return__from { font-style: normal; text-transform: none; letter-spacing: 0; font-size: 0.78em; color: var(--gt-txt2); }
.gt-return__row { position: relative; display: flex; align-items: center; max-width: 520px; }
.gt-return__row .gt-node__dot--ret {
  position: absolute; left: -27px; top: 50%; margin-top: -6px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--gt-gold); background: rgba(200, 164, 90, 0.2);
  box-shadow: 0 0 0 2px rgba(200, 164, 90, 0.14); pointer-events: none;
}
.gt-return__sel {
  width: 100%; appearance: none; -webkit-appearance: none; position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    var(--gt-card2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23C8A45A' d='M5 6 0 0h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--gt-gold-line); border-radius: var(--gt-rs);
  padding: 11px 34px 11px 12px; color: var(--gt-txt); cursor: pointer; font-weight: 500;
  min-height: 44px;
}
.gt-return__sel:focus { outline: none; border-color: var(--gt-gold); box-shadow: 0 0 0 3px rgba(200, 164, 90, 0.16); }

/* ============ agregar destino / día ============ */
.gt-addrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; min-width: 0; }
.gt-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; appearance: none; cursor: pointer;
  border: 1px dashed var(--gt-grn-line); background: rgba(29, 158, 117, 0.06); color: var(--gt-grn-h);
  border-radius: 999px; padding: 9px 18px; font-size: 0.88rem; font-weight: 600;
  transition: background 0.2s, color 0.2s; text-decoration: none; white-space: nowrap;
  min-width: 0; flex: 1 1 auto; max-width: 100%;
}
.gt-add:hover { background: rgba(29, 158, 117, 0.14); color: var(--gt-grn-h); }
.gt-add:disabled, .gt-add[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.gt-add--day { border-color: var(--gt-grn-line); color: var(--gt-grn-h); background: rgba(29, 158, 117, 0.04); }
.gt-add--day:hover { background: rgba(29, 158, 117, 0.14); color: var(--gt-grn-h); }
.gt-hint { font-size: 0.78rem; color: var(--gt-txt3); }
.gt-hint--min { margin: 10px 0 0; }

/* ============ total + confirmar (rail derecho) ============ */
.gt-meta__total {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border-left: 1px dashed var(--gt-gold-line); padding-left: 18px; min-width: 0;
}
.gt-meta__total-l { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-gold); }
.gt-meta__total-v { font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.15; }
.gt-steps__cta {
  appearance: none; cursor: pointer; margin-top: 8px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #0E7B40, #0C6E36); color: #fff; border: none;
  border-radius: 999px; padding: 13px 24px; font-size: 1rem; font-weight: 700;
  box-shadow: none; transition: transform 0.2s;
  letter-spacing: 0.01em;
}
.gt-steps__cta:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); }
.gt-steps__cta:disabled, .gt-steps__cta[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.6); }

/* ============ día comprimido ============ */
.gt-day__date { color: var(--gt-txt2); font-size: 0.82rem; }
.gt-day__time { font-size: 0.72rem; color: var(--gt-txt2); font-variant-numeric: tabular-nums; }
.gt-day__route {
  font-size: 0.85rem; color: var(--gt-vc); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.gt-day__price { font-size: 0.9rem; font-weight: 600; color: var(--gt-gold); white-space: nowrap; }
.gt-day__acts { display: inline-flex; align-items: center; gap: 8px; }




/* ============ pestañas (preferencias / beneficios / observaciones) ============ */
/* Cada panel se despliega justo debajo de SU pestaña (grid de 3 columnas). */
.gt-tabs { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.gt-tab {
  appearance: none; cursor: pointer; grid-row: 1; align-self: end; text-align: left;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid transparent; border-radius: 10px 10px 0 0;
  background: transparent; color: var(--gt-txt2); font-size: 0.86rem;
  transition: all 0.2s; min-width: 0;
}
.gt-tab:hover { color: var(--gt-txt); background: rgba(255, 255, 255, 0.03); }
.gt-tab.is-active {
  color: #fff; background: rgba(29, 158, 117, 0.16); border-color: var(--gt-grn-line);
  border-bottom-color: var(--gt-card2); font-weight: 600;
}
.gt-tab__lbl { display: inline-flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-tab__lbl i { color: var(--gt-grn-h); width: 14px; text-align: center; flex: none; }
.gt-tab.is-active .gt-tab__lbl i { color: var(--gt-grn-h); }
.gt-tab:focus-visible { outline: 2px solid var(--gt-grn); outline-offset: -2px; }
.gt-tab__sum { font-size: 0.72rem; color: var(--gt-txt3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; text-align: right; min-width: 0; }
.gt-tabs__panel {
  grid-row: 2; display: none; padding: 12px 14px;
  background: var(--gt-card2); border: 1px solid var(--gt-brd2); border-top: none;
  border-radius: 0 0 12px 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30);
}
.gt-tabs__panel.is-open { display: grid; gap: 12px; }
/* Cada panel usa la columna de SU pestaña (fila 2); sin esto el único panel
   visible auto-ubica su columna en la 1 y cae bajo "Preferencias". */
.gt-tabs__panel[data-tabpanel="req"] { grid-column: 1; }
.gt-tabs__panel[data-tabpanel="ben"] { grid-column: 2; }
.gt-tabs__panel[data-tabpanel="obs"] { grid-column: 3; }

.gt-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.92rem; }
.gt-opt input[type="checkbox"], .gt-ben input[type="checkbox"] { accent-color: var(--gt-grn); width: 17px; height: 17px; }
.gt-opt__sub { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 27px; }
.gt-opt__group { display: grid; gap: 8px; }
.gt-opt__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gt-txt3); }
.gt-opt em { font-style: normal; color: var(--gt-txt3); font-size: 0.82em; }
.gt-pill { display: inline-flex; }
.gt-pill input { position: absolute; opacity: 0; pointer-events: none; }
.gt-pill span {
  border: 1px solid var(--gt-brd2); border-radius: 999px; padding: 7px 14px;
  font-size: 0.85rem; cursor: pointer; color: var(--gt-txt2); transition: all 0.2s;
}
.gt-pill input:checked + span { border-color: var(--gt-grn); background: rgba(29, 158, 117, 0.16); color: var(--gt-txt); font-weight: 600; }
.gt-pill input:focus-visible + span { outline: 2px solid var(--gt-grn); outline-offset: 2px; }
.gt-ben {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--gt-brd); border-radius: var(--gt-rs);
  background: var(--gt-card2); transition: border-color 0.2s;
}
.gt-ben:hover { border-color: var(--gt-grn-line); }
.gt-ben input { margin-top: 3px; }
.gt-ben__box { display: grid; gap: 3px; min-width: 0; }
.gt-ben__title { font-weight: 600; font-size: 0.92rem; }
.gt-ben__desc { color: var(--gt-txt2); font-size: 0.82rem; }
.gt-note, .gt-empty { color: var(--gt-txt3); font-size: 0.8rem; margin: 2px 0 0; }

/* ============ observaciones (dentro de pestaña) ============ */
.gt-obs { position: relative; display: grid; gap: 8px; }
.gt-obs__lbl {
  font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gt-txt3);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.gt-obs textarea {
  width: 100%; background: var(--gt-card3); border: 1px solid var(--gt-brd2);
  border-radius: var(--gt-rs); padding: 10px 12px; resize: vertical; color: var(--gt-txt);
}
.gt-obs textarea:focus { outline: none; border-color: var(--gt-grn); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.14); }
.gt-obs__count { font-size: 0.72rem; color: var(--gt-txt3); }

/* ============ resumen ============ */







/* El importe del encabezado (el total del día) nunca se parte: "ARS" arriba y
   el número abajo deja de leerse como un precio. */











/* Detalle vacío: guía de tres pasos, en vez de un aviso de que no hay nada. */



/* precio de un ítem del Detalle: el de cada tramo y el de la vuelta (que es el
   recorrido completo de su cadena). Formato único para los dos, sin signo. */

/* adicionales del Detalle (computados incluidos + notas a confirmar) */




/* selector de moneda: override del FX para que sea blanco hueso en el builder */
#gtBooking select.gt-cur { color: var(--gt-txt2); font-weight: 600; }
#gtBooking select.gt-cur:hover { color: var(--gt-txt); }
#gtBooking select.gt-cur option { color: #111; }

/* ============ botones ============ */
.gt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  appearance: none; cursor: pointer; border: 1px solid var(--gt-grn-line);
  background: transparent; color: var(--gt-grn-h); border-radius: 999px;
  padding: 11px 20px; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: all 0.2s;
  font-family: inherit;
}
.gt-btn:hover { background: rgba(29, 158, 117, 0.12); }
.gt-btn:disabled, .gt-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.gt-btn--cta {
  background: linear-gradient(135deg, #0E7B40, #0C6E36); color: #fff;
  border-color: transparent; box-shadow: none;
}
.gt-btn--cta:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); background: linear-gradient(135deg, #0E8443, #0C6E36); }

/* campo que falta completar (resaltado) */
@keyframes gtShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.gt-err {
  animation: gtShake 0.4s ease;
  border-color: var(--gt-danger) !important;
  box-shadow: 0 0 0 3px rgba(224, 106, 90, 0.35) !important;
}

/* icono de información con tooltip (precio, horas) */
.gt-ii {
  position: relative; appearance: none; cursor: help; flex: none;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); color: var(--gt-txt3);
  border: 1px solid var(--gt-brd2); border-radius: 50%; font-size: 0.72rem;
  transition: all 0.2s; padding: 0;
}
.gt-ii:hover, .gt-ii:focus-visible, .gt-ii--open { color: var(--gt-gold); border-color: var(--gt-gold-line); background: rgba(200, 164, 90, 0.12); outline: none; }
.gt-ii__tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: min(70vw, 220px); padding: 8px 12px;
  background: #0d3227; border: 1px solid var(--gt-gold-line); color: var(--gt-txt);
  border-radius: 9px; font-size: 0.76rem; font-weight: 400; line-height: 1.35; text-align: left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); z-index: 120;
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s;
}
.gt-ii__tip::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--gt-gold-line);
}
.gt-ii:hover .gt-ii__tip, .gt-ii:focus-visible .gt-ii__tip, .gt-ii--open .gt-ii__tip {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.gt-meta__total-v { display: flex; align-items: center; gap: 8px; }
.gt-meta__total-v .gt-ii i { font-size: 0.9rem; }

/* toast de ayuda */
.gt-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  z-index: 200; max-width: min(90vw, 460px);
  background: #10231d; border: 1px solid var(--gt-gold-line); color: #fff;
  padding: 12px 18px; border-radius: 12px; font-size: 0.9rem; font-weight: 500;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.gt-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ============ entrada básica (index-2) ============ */

.gt-btn--confirm { flex: none; }

/* ============ responsive ============ */
@media (max-width: 900px) {
  .gt-meta__rail {
    flex: 1 1 100%; margin-left: 0; justify-content: space-between;
    border-top: 1px dashed var(--gt-gold-line); padding-top: 10px;
  }
  .gt-meta__total { border-left: none; padding-left: 0; }
}

@media (max-width: 768px) {
  .gt-route { grid-template-columns: minmax(0, 1fr); }
  .gt-route .gt-route__cell { grid-column: 1 !important; }
  .gt-route::before { left: 20px; }
  .gt-route__cell--props {
    flex-direction: row; justify-content: flex-start; gap: 6px;
    padding: 0 0 8px; margin-left: 40px; min-height: 0;
  }
  .gt-leg__hint { text-align: left; }

  .gt-return__row { max-width: none; }

  /* mientras el formulario (#reservas) está en pantalla: se oculta el header */
  .gt-in-form #header { transform: translateY(-100%); }
  #header { transition: transform 0.25s ease; }

  /* barra meta anclada ARRIBA (~10% del viewport): solo el rail (Precio +
     conceptos + Confirmar). La tarjeta se disuelve y los campos de pasajeros/
     equipaje quedan debajo, scrolleando con el resto del cuerpo. */
  .gt-meta--sticky { position: static !important; }
  .gt-meta { display: contents; }
  .gt-builder { display: flex; flex-direction: column; }
  .gt-meta__fields { order: 0; margin: 8px 2px 12px; min-width: 0; }
  .gt-meta__rail {
    order: 2; position: sticky; bottom: 0; top: auto; z-index: 950;
    margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas:
      "total price"
      "cta cta";
    align-items: center; column-gap: 12px; row-gap: 5px;
    padding: 7px 12px 9px;
    background: var(--gt-card); border: 1px solid var(--gt-brd);
    border-bottom: 1px dashed var(--gt-gold-line);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
  }
  .gt-meta__total { grid-area: total; border-left: none; padding-left: 0; min-width: 0; }
  .gt-meta__total-v { grid-area: price; justify-self: end; text-align: right; }
  .gt-meta .gt-steps__cta, .gt-meta .gt-btn--confirm {
    grid-area: cta; margin-top: 0; padding: 9px 16px; font-size: 0.9rem;
  }
  .gt-meta__note { display: none; }
  .gt-toast { bottom: 62px; }

  /* Pasajeros + Equipaje en una línea; el panel ancla a la derecha (columna der.) */
  .gt-meta__fields { flex-wrap: wrap; align-items: center; }
  .gt-meta__fields > .gt-meta__field { flex: 1 1 40%; }
  .gt-meta--entry .gt-meta__fields { gap: 8px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-equip__btn { min-height: 34px; padding: 6px 10px; }
  .gt-equip__panel { left: auto; right: 0; max-width: min(80vw, 300px); }
  .gt-meta__field { min-width: 0; }
  .gt-qty__btn { width: 26px; height: 30px; }
  .gt-qty__val { min-width: 24px; font-size: 0.85rem; }
  .gt-datebox { min-height: 34px; padding: 6px 24px 6px 8px; }
  /* Los chips de la barra del día, más finos: a 390 el ancho no alcanzaba para
     que día + fecha + hora entren en la misma línea. */
  .gt-day__top { gap: 6px 8px; }
  .gt-day__top .gt-datebox,
  .gt-day__top .gt-timebox { padding: 6px 22px 6px 8px; font-size: 0.82rem; }
  .gt-day__top .gt-timebox__ic,
  .gt-day__top .gt-datebox__ic { font-size: 0.72rem; right: 7px; }

  .gt-tabs { display: flex; flex-direction: column; width: 100%; }
  .gt-tab { flex-basis: auto; width: 100%; border-radius: 8px; align-self: auto; }
  .gt-tabs__panel { border-radius: 8px; width: 100%; }
  .gt-btn--confirm { justify-content: center; width: 100%; }
  .gt-time { max-width: none; }
  .gt-day__bar { flex-wrap: wrap; }
  .gt-day__acts { width: 100%; justify-content: flex-end; }
  .gt-day__price { align-self: flex-start; }

}

@media (max-width: 480px) {
  .gt-meta__fields { gap: 6px; }
  .gt-meta__label { font-size: 0.68rem; }
  .gt-meta .gt-steps__cta,
  .gt-meta .gt-btn--confirm { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-builder * { transition: none !important; animation: none !important; }
}

/* ================================================================
   2 · DISEÑO DEL ARMADOR
   ================================================================ */
/* ================================================================
   DISEÑO DEL ARMADOR
   -----------------------------------------------------------------
   · Escritorio 50/50: itinerario (izq) | Detalle + Opcionales (der).
   · Día CONTRAÍDO: dos columnas invisibles; precio y Enviar apilados.
   · Día DESPLEGADO: una sola fila garantizada. Los dos controles de icono
     (contraer y eliminar) se apilan en UNA columna de 44px, con lo cual el
     ancho de la barra es el mismo con 1 día o con varios.
   · Hora inicial con el patrón del date picker: texto propio dentro del
     campo ("Hora inicial" cuando está vacío) e input nativo invisible
     encima. "el resto por chat" cuelga del campo sin ocupar línea.
   · Divisas: chevron a la izquierda, código pegado al valor.
   ================================================================ */
/* ================================================================
   1. TEMA CLARO — tokens
   ================================================================ */
 

 
.gt-builder,
[data-gt-builder] {
  --gt-bg:        #FFFDF9;
  --gt-deep:      #F6F1E7;
  --gt-card:      #FFFFFF;
  --gt-card2:     #F8F4EC;
  --gt-card3:     #FFFFFF;
  --gt-card-h:    #EFE9DC;
  --gt-brd:       rgba(8, 80, 65, 0.12);
  --gt-brd2:      rgba(8, 80, 65, 0.22);
  --gt-txt:       #1A1A1A;
  --gt-txt2:      #55554F;
  --gt-txt3:      #7C7C73;
  --gt-grn:       #1D9E75;
  --gt-grn-h:     #0F6B4F;
  --gt-grn-dk:    #085041;
  --gt-grn-line:  rgba(8, 80, 65, 0.30);
  --gt-gold:      #9A7420;
  --gt-gold-line: rgba(154, 116, 32, 0.42);
  --gt-vc:        #0B3B2E;
  --gt-danger:    #C0392B;
  --gt-r:         8px;
  --gt-rs:        6px;
  --gt-sh:        0 1px 2px rgba(8, 80, 65, 0.05), 0 14px 32px rgba(8, 80, 65, 0.10);
  color-scheme: light;
}

/* ================================================================
   2. Reglas de .sec-reservas que se filtran al builder
   ================================================================ */
.sec-reservas [data-gt-builder] h2 { color: var(--gt-txt); }
.sec-reservas [data-gt-builder] p { color: var(--gt-txt2); }
.sec-reservas [data-gt-builder] .gt-hint,
.sec-reservas [data-gt-builder] .gt-note,
.sec-reservas [data-gt-builder] .gt-empty { color: var(--gt-txt3); }
/* ================================================================
   3. Superficies
   ================================================================ */

 
.gt-builder {
  background: var(--gt-bg);
  border: 1px solid var(--gt-brd);
  border-radius: var(--gt-r);
  box-shadow: var(--gt-sh);
}
.gt-builder .gt-loc__list {
  background: #FFFFFF;
  border-color: var(--gt-brd2);
  box-shadow: 0 16px 36px rgba(8, 80, 65, 0.18);
}
/* Texto libre: un lugar que el catálogo no resuelve. No cotiza — lo interpreta
   el equipo — y el usuario lo ve en los tres puntos de contacto: la opción del
   desplegable, la marca del campo y la línea de conceptos junto al precio. */
 
.gt-builder .gt-chip.gtp-free {
  color: var(--gt-gold);
  border-color: var(--gt-gold-line);
  background: rgba(154, 116, 32, 0.10);
}
.gt-builder .gt-loc__item--free {
  border-color: var(--gt-gold-line);
  background: rgba(154, 116, 32, 0.06);
  margin-top: 6px;
}
.gt-builder .gt-loc__item--free .gt-loc__item-type { color: var(--gt-gold); }
.gt-builder .gt-equip__panel { box-shadow: 0 16px 36px rgba(8, 80, 65, 0.18); }
.gt-builder .gt-tabs__panel { box-shadow: 0 14px 30px rgba(8, 80, 65, 0.12); }
.gt-builder .gt-ii__tip { background: #14231E; color: #F4FBF7; }
.gt-builder .gt-meta select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23085041' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
}
.gt-builder .gt-return__sel {
  background: var(--gt-card2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239A7420' d='M5 6 0 0h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.gt-builder .gt-meta__total-v { color: var(--gt-txt); }
.gt-builder .gt-tab.is-active {
  color: var(--gt-grn-dk);
  background: rgba(29, 158, 117, 0.12);
}
/* Sin aclaración de referencia de divisa (dólar blue ni de ningún tipo) */
 
.gt-builder .gt-fxnote { display: none !important; }
.gt-builder .gt-meta__veh--warn { color: var(--gt-danger); }

/* Divisas: chevron a la IZQUIERDA y código pegado al valor.
   Especificidad por ID porque currency.js inyecta su propio <style>. */
#gtBooking select.gt-cur {
  padding: 0 0 0 1em;
  background-position: left center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%239A7420%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
}
#gtBooking .gt-cur__wrap { gap: 0.2em; }
/* ================================================================
   4. Tipografía
   ================================================================ */

 
.gt-builder .gt-meta__label,
.gt-builder .gt-node__k,
.gt-builder .gt-opt__label,
.gt-builder .gt-obs__lbl,
.gt-builder .gt-tab__sum { font-size: 0.78rem; }
.gt-builder .gt-hint,
.gt-builder .gt-note,
.gt-builder .gt-empty { font-size: 0.82rem; }
.gt-builder input::placeholder,
.gt-builder textarea::placeholder { color: rgba(26, 26, 26, 0.40); }
/* ================================================================
   5. Targets táctiles y alto unificado de controles
   ================================================================ */

 
.gt-builder .gt-qty__btn { width: 44px; height: 44px; }
.gt-builder .gt-qty__val { min-width: 34px; font-size: 0.95rem; }
.gt-builder .gt-loc__ic { width: 44px; height: 44px; font-size: 1rem; }
.gt-builder .gt-loc__actions { gap: 4px; }
.gt-builder .gt-inv { width: 44px; height: 44px; font-size: 1rem; }
.gt-builder .gt-time__clear { width: 44px; height: 44px; }
.gt-builder .gt-ii { width: 44px; height: 44px; font-size: 0.95rem; }
.gt-builder .gt-day__collapse,
.gt-builder .gt-day__expand,
.gt-builder .gt-day__remove { width: 44px; height: 44px; font-size: 1rem; }
.gt-builder .gt-meta select { min-height: 44px; }
.gt-builder .gt-datebox { min-height: 44px; }
.gt-builder .gt-equip__btn { min-height: 44px; }
.gt-builder .gt-ret { padding: 0 14px; min-height: 44px; }
.gt-builder .gt-pill span { padding: 10px 18px; }
.gt-builder .gt-tab { padding: 14px 16px; }
.gt-builder .gt-ben { padding: 14px 16px; }
/* "Enviar Día" con el mismo alto que contraer y eliminar, y forma de píldora */
 



/* ================================================================
   6. Cadena de itinerario (vertical, con línea nodal)
   ================================================================ */

 
.gt-builder .gt-route__cell--props.gt-route__cell--void { display: none; }

.gt-builder .gt-node__row > .gt-inv { flex: none; margin-left: 6px; }
.gt-builder .gt-inv[disabled] { display: none; }
/* Punto sólido, 8px, sin anillo ni halo, centrado en la línea
   (línea left:17px → centro 18; punto 8px left:14px → centro 18). */

 
.gt-builder .gt-route::before { left: 17px; }
.gt-builder .gt-node__dot {
  left: 14px;
  width: 8px; height: 8px;
  margin-top: -4px;
  border: none;
  box-shadow: none;
  background: var(--gt-grn);
}
.gt-builder .gt-node--origin .gt-node__dot { background: var(--gt-grn-dk); }
.gt-builder .gt-node--last .gt-node__dot { background: var(--gt-gold); border: none; box-shadow: none; }
.gt-builder .gt-node--ret .gt-node__dot {
  background: var(--gt-gold);
  border: none; border-style: none;
  box-shadow: none;
}
.gt-builder .gt-return__row .gt-node__dot--ret {
  left: -12px;
  width: 8px; height: 8px;
  margin-top: -4px;
  background: var(--gt-gold);
  border: none;
  box-shadow: none;
}

.gt-builder .gt-node__k { padding-left: 26px; }
.gt-builder .gt-node__row { padding-left: 26px; }


/* ================================================================
   7. Hora inicial: mismo patrón y estilo que el date picker
   ----------------------------------------------------------------
   El <input type="time"> nativo no admite texto propio, así que el campo
   visible es un recuadro nuestro con el texto adentro y el input nativo
   invisible encima (igual que hace .gt-datebox con la fecha).
   ================================================================ */
.gt-day__time { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.gt-day__time .gt-temporal { display: inline-flex; }
.gt-time--hidden { display: none !important; }
.gt-timebox {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 112px;
  padding: 9px 30px 9px 11px;
  background: var(--gt-card3);
  border: 1px solid var(--gt-brd2);
  border-radius: var(--gt-rs);
  cursor: pointer;
}
.gt-timebox__txt {
  font-size: 0.95rem;
  color: var(--gt-txt);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* El chip de hora con el día contraído es EDITABLE: el input real va encima,
   transparente, igual que en la caja de fecha. */
.gt-timebox__in {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; background: transparent; border-radius: inherit; color: transparent;
}
.gt-timebox__in:focus { outline: none; }
.gt-timebox__in::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.gt-timebox--empty .gt-timebox__txt { color: var(--gt-txt3); }
.gt-timebox__ic {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--gt-txt3);
  font-size: 0.8rem;
  pointer-events: none;
}
.gt-timebox:focus-within {
  border-color: var(--gt-grn);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.18);
}
/* El input nativo queda invisible pero clickeable en toda la caja. */
 
.gt-builder .gt-timebox .gt-time {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  opacity: 0;
  box-shadow: none;
  cursor: pointer;
}
.gt-builder .gt-timebox .gt-time:focus { outline: none; box-shadow: none; border: none; }
.gt-timebox .gt-time::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* "el resto por chat" cuelga del campo: ligado visualmente, sin ocupar
   línea propia ni desalinear el picker. La barra le reserva el alto. */
/* ================================================================
   8. "Ida y vuelta" junto al destino, con el radio del inversor
   ================================================================ */

 
.gt-builder .gt-node__row > .gt-loc__value { flex: 1 1 auto; min-width: 0; }
.gt-builder .gt-node__row > .gt-ret { flex: none; margin-left: 6px; }
.gt-builder .gt-ret {
  border-radius: 8px;
  border-color: var(--gt-gold-line);
  color: var(--gt-gold);
  font-weight: 600;
}
.gt-builder .gt-ret--on {
  background: rgba(154, 116, 32, 0.14);
  border-color: var(--gt-gold);
}

/* ================================================================
   9. Dos columnas: itinerario | (Detalle + Opcionales)
   ================================================================ */
@media (min-width: 769px) {
  .gt-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 26px;
  }
  .gt-layout__main { flex: 1 1 0; min-width: 0; }
  .gt-layout__side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }


  /* Los opcionales con contenedor propio y filas apiladas: en una columna
     del 50% una tira de 3 pestañas no cabe. */
  .gt-layout__side > .gt-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
    padding: 12px;
    background: var(--gt-card);
    border: 1px solid var(--gt-brd);
    border-radius: var(--gt-r);
  }
  .gt-layout__side > .gt-tabs .gt-tab {
    width: 100%;
    align-self: auto;
    grid-row: auto;
    border: 1px solid var(--gt-brd);
    border-radius: var(--gt-rs);
    background: var(--gt-card2);
  }
  .gt-layout__side > .gt-tabs .gt-tab.is-active {
    border-color: var(--gt-grn-line);
    background: rgba(29, 158, 117, 0.10);
  }
  .gt-layout__side > .gt-tabs .gt-tabs__panel {
    width: 100%;
    border: 1px solid var(--gt-brd2);
    border-radius: var(--gt-rs);
    margin-top: -2px;
  }
}
/* ================================================================
   10. Tarjeta de Día CONTRAÍDA: dos columnas invisibles
   ================================================================ */

 

/* ================================================================
   11. Barra del Día ABIERTO: una sola fila garantizada
   ----------------------------------------------------------------
   El ancho dependía de si existía el botón eliminar (sólo con 2+ días),
   así que la barra entraba en una línea con un único día y no con varios.
   Solución: los DOS controles de icono se apilan en una sola columna de
   44px. Así el bloque de acciones mide lo mismo con 1 día o con varios.
   ================================================================ */

 
.gt-builder .gt-day__bar { flex-wrap: wrap; }
.gt-builder .gt-day__acts {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gt-builder .gt-day--open .gt-day__bar {
  column-gap: 8px;
  row-gap: 6px;
  /* abajo se reserva el alto de "el resto por chat" */
  padding: 10px 14px 26px;
}

.gt-builder .gt-day--open .gt-day__num { font-size: 0.85rem; letter-spacing: 0.06em; }
/* La columna de los dos iconos: contraer arriba, eliminar abajo. Se probó en
   fila (día, fecha, hora, contraer, eliminar en una línea) y NO ENTRA: los
   chips piden 273px y los iconos en fila 92 → 385px contra los ~380 de la
   columna del armador en escritorio y los ~320 de un teléfono de 390. En fila
   el recorrido quedaba con 120px y se partía en 6 líneas. */
.gt-builder .gt-day__ctrls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}
/* ================================================================
   12. Retorno
   ================================================================ */

 

.gt-builder .gt-return__sel { font-weight: 600; }
/* ================================================================
   13. CTA principal incompleto
   ================================================================ */

 
.gt-builder .gt-steps__cta.gt-cta-idle,
.gt-builder .gt-btn--cta.gt-cta-idle {
  background: var(--gt-card2);
  color: var(--gt-txt2);
  border: 1px dashed var(--gt-brd2);
  box-shadow: none;
  filter: none;
  opacity: 1;
  cursor: default;
}
/* ================================================================
   14. Textos que envuelven (fuente del sistema agrandada)
   ================================================================ */

 
.gt-builder .gt-loc__label,
.gt-builder .gt-loc__item-label,
.gt-builder .gt-equip__sum,
.gt-builder .gt-day__route,
.gt-builder .gt-tab__lbl,
.gt-builder .gt-tab__sum,
.gt-builder .gt-ben__title,
.gt-builder .gt-ben__desc,
.gt-builder .gt-node__k {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* ================================================================
   15. Sin lápiz de edición: el campo se toca para cambiar
   ================================================================ */
.gt-loc__value--tap { cursor: pointer; }
.gt-loc__value--tap:focus-visible { outline: 2px solid var(--gt-grn); outline-offset: 2px; }

/* ================================================================
   16. Mobile
   ================================================================ */
@media (max-width: 768px) {
  .sec-reservas .container { width: 100%; }
  .gt-builder {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-left: 8px;
    padding-right: 8px;
  }
  .gt-meta__rail { border-radius: 0; }
/* En mobile el ancho es escaso: la señal de "a cotizar" vive en la barra
     de precio, que es lo que queda anclado arriba. */
   
  .gt-builder .gt-chip.gtp-free { display: none; }
  
  /* Una sola columna, con el MISMO orden que en escritorio:
     itinerario → detalle → opcionales.
     El detalle va antes porque es el premio del recorrido que se acaba de
     armar: al elegir el destino, con el detalle último nacía en y≈973 y el
     pliegue de un teléfono (844) lo dejaba afuera de la pantalla; adelante
     aparece en y≈700, a la vista. */
  .gt-layout { display: flex; flex-direction: column; }
  .gt-layout__side { display: contents; }
  .gt-layout__main { order: 1; }

  .gt-layout__side > .gt-tabs { order: 3; margin-top: 16px; }
/* En mobile la columna de iconos vuelve a horizontal: hay ancho y así el
     encabezado no crece en alto. */

   
/* Tarjeta contraída: itinerario a ancho completo y controles en tercera fila */

   

   
  /* OJO: acá había una lista de selectores mal armada que aplicaba `left: 15px`
     TAMBIÉN a `.gt-node__k` y `.gt-node__row`. El rótulo y la fila se corrían 15px
     a la derecha y, como el punto de la trayectoria cuelga de la fila, se corría
     con ella; la línea cuelga de `.gt-route` y se quedaba quieta: 15px de desfase
     medidos a 390px. El `left` de la línea y del punto lo fijan las reglas de la
     sección 13, que usan las mismas variables para los dos. */
  .gt-builder .gt-route::before { left: 15px; }
  .gt-builder .gt-node__dot { left: 12px; }
}

/* ================================================================
   3 · PIEL DEL SITIO
   ================================================================ */
/* ================================================================
   PIEL DEL SITIO — el armador con el lenguaje del home
   -----------------------------------------------------------------
   CONTINUIDAD: el usuario llega desde la tarjeta liviana del home. Acá
   tiene que sentir que esa tarjeta SE ABRIÓ, no que cambió de producto.

   La jugada de fondo: el builder tiene su propio sistema de diseño
   (--gt-*). Eso es la causa raíz de que se lea como "otra app". Acá no
   se reescribe el builder: se REMAPEAN sus tokens a los del sitio. Todo
   lo que usa variables —colores, radios, sombras, bordes— pasa a ser el
   cuerpo de una sola vez, y con él cualquier cambio futuro del sitio.

   No reemplaza la estructura del motor: le cambia el idioma.
   ================================================================ */
/* ================================================================
   1. EL REMAPEO — de --gt-* a los tokens del sitio
   ================================================================ */
 

 
#gtBooking .gt-builder,
#gtBooking[data-gt-builder] {
  --gt-bg:        var(--bg);
  --gt-deep:      var(--bg2);
  --gt-card:      #ffffff;
  --gt-card2:     var(--bg2);
  --gt-card3:     #ffffff;
  --gt-card-h:    var(--vc);
  --gt-brd:       var(--bo);
  --gt-brd2:      var(--bo);
  --gt-txt:       var(--tx);
  --gt-txt2:      var(--tx2);
  --gt-txt3:      var(--tx2);
  --gt-grn:       var(--vm);
  --gt-grn-h:     var(--vp);
  --gt-grn-dk:    var(--vp);
  --gt-grn-line:  rgba(29, 158, 117, 0.35);
  --gt-gold:      #7E6429;   /* el dorado del sitio no sirve como texto chico:
                                sobre la tarjeta menta daba 4,29:1 (bajo AA);
                                este da 5,0:1 y sigue leyéndose dorado */
  --gt-gold-line: rgba(200, 164, 90, 0.5);
  --gt-vc:        var(--vp);
  --gt-danger:    #b3261e;
  --gt-r:         var(--r);
  --gt-rs:        var(--rs);
  --gt-sh:        var(--sh);
  color-scheme: light;
}

/* ================================================================
   2. La tarjeta: la del sitio, no la del builder
   ================================================================ */
/* La página pone .reserva-form como contenedor; el builder se disuelve. */
#gtBooking .gt-builder {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* La tarjeta de día, con la receta de .service-card / .review-card */
#gtBooking .gt-day {
  background: #fff;
  border: 1px solid var(--bo);
  border-radius: var(--r);
  /* Sobre la tarjeta blanca del formulario el borde solo no alcanza: la
     tarjeta se mezclaba con el fondo. La sombra del sitio (--sh) es verde
     tenue: separa sin ensuciar. El detalle (--vc) queda plano a propósito,
     porque al ser una superficie con color ya se separa sola. */
  box-shadow: var(--sh);
}
#gtBooking .gt-day--open { box-shadow: var(--sh); }
#gtBooking .gt-day__bar {
  background: transparent;
  border-bottom: 1px solid var(--bo);
}
#gtBooking .gt-day--open .gt-day__bar { background: transparent; }

/* ================================================================
   3. Rótulos: el registro del sitio (sin mayúsculas)
   ================================================================ */
/* El builder grita en MAYÚSCULAS espaciadas; la tarjeta del home habla en
   caja baja. Es el corte más visible entre las dos pantallas. */
#gtBooking .gt-node__k,
#gtBooking .gt-meta__label,
#gtBooking .gt-meta__total-l,
#gtBooking .gt-opt__label,
#gtBooking .gt-obs__lbl,
#gtBooking .gt-tab__sum,
#gtBooking .gt-equip__name {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tx2);
}
/* "Día 1" con la voz de los títulos del sitio, no como chip de tablero */
#gtBooking .gt-day__num {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vp);
}

#gtBooking .gt-day__price,
#gtBooking .gt-meta__total-v { color: var(--vp); }

/* ================================================================
   4. Los botones, con la receta de .btn del sitio
   ================================================================ */
#gtBooking .gt-steps__cta,
#gtBooking .gt-btn--cta,

#gtBooking .gt-steps__cta,
#gtBooking .gt-btn--cta {
  /* --vmd es el verde del sitio para texto y fondo de botón sobre claro: con
     --vm (#1D9E75) y texto blanco el CTA daba 3,39:1, que no pasa AA. */
  background: var(--vmd);
  border: 2px solid var(--vmd);
  color: #fff;
  font-size: 0.95rem;
  padding: 14px 28px;
  letter-spacing: 0;
}
#gtBooking .gt-steps__cta:hover:not(:disabled):not([aria-disabled="true"]),
#gtBooking .gt-btn--cta:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--vp);
  border-color: var(--vp);
  /* Sin sombra: el pedido del owner es un botón plano (el realce del hover lo
     da el cambio de verde y el desplazamiento). */
  transform: translateY(-1px);
  box-shadow: none;
}
#gtBooking .gt-add {
  border-radius: 50px;
  font-weight: 500;
}

/* ================================================================
   5. Los espacios del sitio
   ================================================================ */
/* .reservas-layout usa 48px de separación entre columnas; el builder usaba
   26px. Es ritmo, y el ritmo es la mitad de la mimetización. */
#gtBooking .gt-layout { gap: 48px; }
/* Dos medidas mandan en la tarjeta del día, y salen de acá:
   · --site-body-x: el aire lateral del cuerpo (16px, el mismo del encabezado).
     Al quitárselo, las píldoras "+ Agregar…" y el aviso quedaban pegados al
     borde: se leía como un error, no como una decisión.
   · --site-chain: la sangría de la cadena, que le hace lugar al punto y a la
     línea de trayectoria. La posición de esa línea se calcula con estas dos. */
#gtBooking .gt-builder { --site-body-x: 16px; --site-chain: 26px; }
#gtBooking .gt-day__body { padding: 20px var(--site-body-x) 22px; }
#gtBooking .gt-node__k,
#gtBooking .gt-node__row,

/* Las píldoras y el aviso se alinean con la cadena, no con el borde. */
#gtBooking .gt-addrow,
#gtBooking .gt-hint { padding-left: var(--site-chain); }
/* El aire derecho del cuerpo NO alcanza: la fila del nodo deja 12px a la
   derecha, así que sin esto el borde de "+ Agregar día" quedaba más afuera
   que el borde de los campos. Y las dos píldoras miden lo mismo: con
   flex-basis automático cada una crecía según su propio texto. */
#gtBooking .gt-addrow { padding-right: 12px; }
#gtBooking .gt-addrow .gt-add { flex: 1 1 0; }
#gtBooking .gt-days__list { gap: 20px; }

/* ================================================================
   6. Los desplegables del motor, con borde y sombra del sitio
   ================================================================ */
#gtBooking .gt-loc__list,
#gtBooking .gt-equip__panel,
#gtBooking .gt-tabs__panel {
  border: 1px solid var(--bo);
  box-shadow: var(--shh);
}
#gtBooking .gt-loc__item {
  font-family: 'DM Sans', sans-serif;
  border-radius: var(--rs);
  color: var(--tx);
}
#gtBooking .gt-loc__item:hover,
#gtBooking .gt-loc__item--active {
  background: var(--vc);
  border-color: rgba(29, 158, 117, 0.25);
}

/* ================================================================
   7. El detalle y las opciones: como secciones del sitio
   ================================================================ */




/* Mientras no hay recorrido el detalle está, pero atenuado: ocupa su lugar
   —así el formulario no cambia de ancho cuando se arma el primer tramo— y
   muestra su estado vacío, que es una respuesta honesta. */

/* El Detalle vacío no se atenúa: muestra la guía de tres pasos y al 75% caía a
   3,7:1 de contraste. Ver renderFull() en js/reserva-builder.js. */
#gtBooking .gt-tabs__panel { background: var(--bg2); }

/* ================================================================
   8. La sección, con el fondo del sitio
   ----------------------------------------------------------------
   ESTO es lo que más delataba el cambio de página y se me había pasado:
   La base del motor pinta .sec-reservas con un degradado verde oscuro,
   así que la MISMA tarjeta blanca quedaba sobre verde oscuro acá y sobre
   fondo claro en el home. La banda oscura era el corte, no la tarjeta.
   ================================================================ */
#reservas.sec-reservas {
  background: var(--bg);
  border-top: none;
  border-bottom: none;
}
/* La base del motor también deja los <p> de la sección en blanco casi
   puro (pensados para la banda oscura). Sobre claro serían invisibles. */
#reservas p { color: var(--tx2); }

/* ================================================================
   9. La barra del día, sin controles vacíos
   ================================================================ */
/* Con un día vacío no queda ningún control en la barra del día (sin envío
   por día, sin contraer, sin quitar): un contenedor vacío no debe ocupar
   lugar ni dejar un hueco en la línea. */
#gtBooking .gt-day__acts:empty { display: none; }

/* ================================================================
   10. Los campos, con la receta de index-4
   ----------------------------------------------------------------
   La receta del home (que es la de estilos.css y de reserva-light.css):
   fondo --bg —fuera del blanco de la tarjeta, por eso se lee como caja—,
   borde de 1.5px --bo, radio --rs, 16px de texto y el verde SÓLO en el
   borde al enfocar. El builder usaba fondo blanco sobre tarjeta blanca
   (caja invisible), borde de 1px y un anillo verde al enfocar.
   ================================================================ */

/* ---- El campo de lugar: una sola caja, con el inversor adentro ---- */
/* La caja es el propio control, NO la fila: el punto y la línea de
   trayectoria viven en la sangría de .gt-node__row (26px, que es también la
   del rótulo), así que la fila no puede llevar borde — quedaría el punto
   adentro y la línea afuera.
   Adentro de la caja van el valor, el chip, la × y el inversor ⇅ —igual que
   .gt-light__field del home. */
#gtBooking .gt-loc__input,
#gtBooking .gt-loc__value,
#gtBooking .gt-loc__value--sel {
  background: var(--bg);
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  min-height: 43px;
  font-size: 16px;
  color: var(--tx);
  transition: border-color var(--t);
}
#gtBooking .gt-loc__input { padding: 11px 14px; }
/* Con acciones adentro, el aire de la derecha es el del home. */
#gtBooking .gt-loc__value { padding: 8px 6px 8px 14px; }
#gtBooking .gt-loc__input:focus { border-color: var(--vm); box-shadow: none; }
#gtBooking .gt-loc__value:focus,
#gtBooking .gt-loc__value:focus-within { border-color: var(--vm); }
/* Vacío y cargado se distinguen por el color del texto, como en el home. */
#gtBooking .gt-loc__input::placeholder { color: var(--tx2); opacity: 0.75; }
#gtBooking .gt-loc__label { font-size: 0.92rem; color: var(--tx); }
#gtBooking .gt-loc__actions { gap: 2px; }

/* ---- Iconos de campo: los del home ---- */
#gtBooking .gt-loc__ic,
#gtBooking .gt-time__clear {
  width: 26px; height: 26px;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--tx2);
  font-size: 0.85rem;
  transition: all var(--t);
}
#gtBooking .gt-loc__ic:hover,
#gtBooking .gt-time__clear:hover { color: var(--vp); background: rgba(8, 80, 65, 0.07); }
#gtBooking .gt-loc__ic--del:hover { color: #b3261e; background: rgba(179, 38, 30, 0.07); }
#gtBooking .gt-loc__ic--dead { border: none; background: transparent; opacity: 0.4; }
/* El inversor, con la piel del home, y ya adentro de la caja. */
#gtBooking .gt-inv {
  width: 26px; height: 26px;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--vm);
  font-size: 0.9rem;
  transition: all var(--t);
}
#gtBooking .gt-inv:hover:not(:disabled) { background: var(--vc); color: var(--vp); transform: none; }

/* ---- Fecha y hora ---- */
/* No se toca el padding ni el alto: la barra del día entra en una línea
   justa y esos valores están calibrados para eso. Sólo el idioma. */
#gtBooking .gt-datebox,
#gtBooking .gt-timebox {
  background: var(--bg);
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  transition: border-color var(--t);
}
#gtBooking .gt-datebox:focus-within,
#gtBooking .gt-timebox:focus-within { border-color: var(--vm); box-shadow: none; }
#gtBooking .gt-datebox--empty .gt-datebox__txt,
#gtBooking .gt-timebox--empty .gt-timebox__txt { color: var(--tx2); opacity: 0.75; }
#gtBooking .gt-datebox__ic,
#gtBooking .gt-timebox__ic { color: var(--tx2); }

/* ---- Pasajeros y equipaje de la barra meta ---- */
#gtBooking .gt-qty {
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  background: var(--bg);
}
#gtBooking .gt-qty__btn { background: transparent; color: var(--vp); }
#gtBooking .gt-qty__btn:hover { background: var(--vc); color: var(--vp); }
#gtBooking .gt-equip__btn {
  background: var(--bg);
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  color: var(--tx);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  transition: border-color var(--t);
}
#gtBooking .gt-equip__btn:hover { border-color: var(--vm); }
/* Los chips neutros venían con blanco al 5%: invisible sobre blanco. */
#gtBooking .gt-chip { background: var(--bg2); border-color: var(--bo); color: var(--tx2); }

/* ---- Vuelta a ---- */

#gtBooking .gt-return__sel {
  background:
    var(--bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555550' d='M5 6 0 0h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid var(--bo);
  border-radius: var(--rs);
  color: var(--tx);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  transition: border-color var(--t);
}
#gtBooking .gt-return__sel:focus { border-color: var(--vm); box-shadow: none; }

/* ================================================================
   11. "Ida y vuelta": interruptor, no píldora de texto
   ----------------------------------------------------------------
   Binario de dos estados, y en la tarjeta del home todo lo binario se
   resuelve con un control, no con una frase que cambia. El botón conserva
   su texto (es su nombre accesible) pero se dibuja como riel + perilla: el
   riel va en ::before y la perilla en ::after, así los 44px de área táctil
   no agrandan el dibujo.
   ================================================================ */
#gtBooking .gt-ret__row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Alineado con la caja del campo: la sangría de la cadena, la misma que
     llevan el rótulo, la fila del nodo y el retorno. Dentro de la fila de
     "Agregar destino" no lleva sangría propia: la fila ya la tiene. */
  margin: 8px 0 0 var(--site-chain);
}
#gtBooking .gt-addrow .gt-ret__row { margin: 0; }
#gtBooking .gt-ret__label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tx2);
}
#gtBooking .gt-ret__row .gt-ret {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  border: none; background: none;
  font-size: 0; color: transparent;
  cursor: pointer;
}
#gtBooking .gt-ret__row .gt-ret::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 24px;
  border-radius: 999px;
  background: var(--bg2);
  box-shadow: inset 0 0 0 1px var(--bo);
  transition: background var(--t), box-shadow var(--t);
}
#gtBooking .gt-ret__row .gt-ret::after {
  content: '';
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform var(--t);
}
#gtBooking .gt-ret__row .gt-ret:hover::before { box-shadow: inset 0 0 0 1px var(--vm); }
#gtBooking .gt-ret__row .gt-ret--on::before { background: var(--vm); box-shadow: none; }
#gtBooking .gt-ret__row .gt-ret--on::after { transform: translate(20px, -50%); }

/* ================================================================
   12. Estados: error, aviso e info, con las recetas del home
   ----------------------------------------------------------------
   reservar-2 no carga reserva-light.css, así que estas tres —que son
   puro color de evento— venían con la paleta del builder: el anillo de
   error salmón, el aviso verde oscuro con borde dorado y el ⓘ con fondo
   blanco al 6% (invisible sobre blanco).
   ================================================================ */
#gtBooking .gt-err {
  animation: gtShake 0.4s ease;
  border-color: #b3261e !important;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.22) !important;
}
/* El aviso del motor cuelga del <body>, no de #gtBooking. */
.gt-toast {
  background: var(--vp);
  border: none;
  color: #fff;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
#gtBooking .gt-ii {
  /* Icono solo: sin aro ni fondo. El aro dibujaba un segundo círculo
     alrededor del círculo del glifo. */
  background: none;
  border: none;
  color: var(--tx2);
}
#gtBooking .gt-ii:hover,
#gtBooking .gt-ii:focus-visible,
#gtBooking .gt-ii--open { color: var(--vm); background: none; }
#gtBooking .gt-ii__tip {
  background: #fff;
  border: 1px solid var(--bo);
  color: var(--tx);
  font-family: 'DM Sans', sans-serif;
  box-shadow: var(--shh);
}
#gtBooking .gt-ii__tip::after { border-top-color: #fff; }
/* El globito se centra sobre su icono y, al lado del precio —que está contra
   el borde derecho—, se salía de la pantalla: eso genera scroll horizontal
   en móvil aunque esté invisible. Anclado a la derecha de su bloque, entra. */
#gtBooking .gt-meta__total-v .gt-ii__tip {
  left: auto;
  right: -8px;
  transform: translateY(4px);
}
#gtBooking .gt-meta__total-v .gt-ii:hover .gt-ii__tip,
#gtBooking .gt-meta__total-v .gt-ii:focus-visible .gt-ii__tip,
#gtBooking .gt-meta__total-v .gt-ii--open .gt-ii__tip { transform: translateY(0); }
#gtBooking .gt-meta__total-v .gt-ii__tip::after {
  left: auto;
  right: 12px;
  transform: none;
}

/* ---------- Mobile ---------- */
/* Una sola perilla para la cadena: de acá salen la sangría del rótulo, la del
   campo, la de la vuelta, la de las píldoras y la posición de la línea. */
@media (max-width: 768px) {
  #gtBooking .gt-builder { --site-chain: 24px; }
}
/* En pantallas angostas las dos píldoras no entran lado a lado sin recortar
   el texto: se apilan, y siguen midiendo lo mismo. */
@media (max-width: 480px) {
  #gtBooking .gt-addrow .gt-add { flex: 1 1 100%; }
}

/* ================================================================
   13. La línea de trayectoria, centrada en su franja
   ----------------------------------------------------------------
   La franja libre va del borde de la tarjeta al borde del campo origen, y la
   forman el aire del cuerpo (--site-body-x) más la sangría de la cadena
   (--site-chain). La línea y los puntos se centran en ESA franja: centrados
   sólo en la sangría quedaban pegados al campo, y todo el aire de la
   izquierda se leía como un margen olvidado.

   Centro de la franja = (aire + sangría) / 2, medido desde el borde de la
   tarjeta. La línea y los puntos viven dentro del cuerpo, que ya está
   corrido el aire, así que se les resta esa parte; y a cada uno, media
   medida propia (1px la línea, 4px el punto) para centrarlo de verdad.
   ================================================================ */
#gtBooking .gt-route::before {
  left: calc(var(--site-chain) / 2 - var(--site-body-x) / 2 - 1px);
}
#gtBooking .gt-node__dot {
  left: calc(var(--site-chain) / 2 - var(--site-body-x) / 2 - 4px);
}
/* El punto de la vuelta se mide contra su propia fila, que ya arranca
   sangrada: media franja hacia la izquierda. */

/* El nodo de "volver a otro lugar" traía su propio desplazamiento (borde
   punteado + márgenes) que dejaba su punto fuera de la línea. La marca se
   conserva: ese punto y su rótulo van en dorado. */


/* El formulario ya tiene su propio botón de WhatsApp: el flotante tapaba
   contenido y llevaba al mismo destino dos veces. */
.wa-float { display: none; }

/* ================================================================
   Barra del día: la MISMA con el día abierto o contraído
   ----------------------------------------------------------------
   Primera línea: día, fecha, hora y controles. Segunda: el recorrido, que se
   ve mientras se construye, con el importe del día al final. Antes cada estado
   tenía su propio formato y al contraer cambiaba todo el aspecto de la tarjeta.
   ================================================================ */
#gtBooking .gt-day__bar {
  /* Dos columnas: las dos líneas (día/fecha/hora y recorrido+importe) a la
     izquierda, y la columna de iconos a la derecha abarcando las dos. Así los
     controles apilados no estiran la barra. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top acts"
    "itin acts";
  align-items: center;
  gap: 6px 10px;
  padding-top: 14px;
}
#gtBooking .gt-day__top {
  grid-area: top;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}
#gtBooking .gt-day__num { margin-right: 2px; }
#gtBooking .gt-day__acts { grid-area: acts; margin-left: auto; }
#gtBooking .gt-day__itin {
  grid-area: itin;
  display: flex;
  /* El importe se alinea con la PRIMERA línea del recorrido: si el recorrido
     envuelve en dos o tres líneas, el precio no se va al medio. */
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
#gtBooking .gt-day__route {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--tx2);
  line-height: 1.3;
}
#gtBooking .gt-day__route:empty { display: none; }
/* El importe cierra la línea del recorrido: el mismo formato que la fecha y la
   hora (tamaño y peso), jerarquizado por color y posición, no por una caja. */
#gtBooking .gt-day__price {
  flex: none;
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vp);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Móvil: la columna de iconos baja a la fila del recorrido, así la línea de
   día/fecha/hora usa todo el ancho y entra sin partirse. Va acá, después de la
   regla base: si no, la base (misma especificidad, más abajo) la taparía. */
/* Móvil: la línea de día/fecha/hora usa TODO el ancho (los iconos bajan a la
   fila del recorrido). Los iconos quedan apilados en todo el proyecto: ver la
   nota de .gt-day__ctrls (en fila no entran). */
@media (max-width: 768px) {
  #gtBooking .gt-day__bar {
    grid-template-areas:
      "top top"
      "itin acts";
  }
}

/* Panel de enviado: aparece después de abrir WhatsApp, con el enlace a mano
   (la ventana puede estar bloqueada) y el pedido copiable. */
.gt-sent {
  margin: 12px 0 0; padding: 14px 16px;
  background: rgba(29, 158, 117, 0.08);
  border: 1px solid rgba(29, 158, 117, 0.35);
  border-radius: 12px;
}
.gt-sent__ok { margin: 0 0 4px; font-weight: 600; color: var(--vp, #085041); display: flex; gap: 8px; align-items: center; }
.gt-sent__ok i { color: var(--vm, #1D9E75); }
.gt-sent__alt { margin: 0 0 10px; font-size: 0.86rem; color: var(--tx2, #555550); }
.gt-sent__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-sent__b {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 13px; border-radius: 10px; border: 1px solid var(--vm, #1D9E75);
  background: var(--vm, #1D9E75); color: #fff; font: inherit; font-size: 0.9rem;
  line-height: 1.1; text-decoration: none; cursor: pointer;
}
.gt-sent__b--ghost { background: transparent; color: inherit; border-color: rgba(0, 0, 0, 0.18); }
@media (max-width: 480px) { .gt-sent__b { flex: 1 1 100%; } }