/* ==========================================================================
   WIDGET DE RESERVAS — Teoti Sky Tours
   Basado en el sistema Vann (§1.3 del reporte técnico) adaptado a la marca.
   ========================================================================== */

.teoti-widget {
  --tw-primary:      #0B1F3A;
  --tw-primary-d:    #14294D;
  --tw-primary-soft: #F5EBD1;
  --tw-accent:       #C8A046;
  --tw-accent-d:     #A8842E;
  --tw-ink:          #1E293B;
  --tw-muted:        #64748B;
  --tw-faint:        #94A3B8;
  --tw-line:         #E7E9EF;
  --tw-panel:        #FAF7F0;
  --tw-error:        #C53030;

  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tw-ink);

  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--tw-line);
  border-radius: var(--radius, 12px);
  padding: 1.6rem;
  box-shadow: 0 4px 20px rgba(11, 31, 58, 0.06);
}

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

.teoti-loading {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tw-muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Cabecera de la experiencia
   -------------------------------------------------------------------------- */

.tw-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--tw-line);
}

.tw-head img {
  width: 84px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

.tw-head-body h3 {
  margin: 0 0 3px;
  font-family: var(--font-display, inherit);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tw-primary);
}

.tw-meta {
  font-size: 13px;
  color: var(--tw-muted);
}

/* --------------------------------------------------------------------------
   Calendario
   -------------------------------------------------------------------------- */

.tw-cal-wrap {
  margin-top: .2rem;
}

/* ---- Cabecera del mes ----
   El nombre del mes manda: es el dato que se lee primero. Las
   flechas quedan a los lados, agrupadas, para que el ojo no salte. */
.tw-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tw-line);
}

.tw-cal-nav strong {
  font-family: var(--font-display, inherit);
  font-size: 16px;
  font-weight: 700;
  color: var(--tw-primary);
  text-transform: capitalize;
  letter-spacing: -.01em;
}

.tw-cal-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--tw-primary);
  background: #fff;
  border: 1px solid var(--tw-line);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tw-cal-btn:hover:not(:disabled) {
  background: var(--tw-panel);
  border-color: var(--tw-accent);
  box-shadow: 0 0 0 3px rgba(200, 160, 70, .14);
}

.tw-cal-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

/* ---- Rejilla ----
   Sobre un GRIS más oscuro que el blanco de los días. La tarjeta que
   envuelve el calendario es blanca y el día libre también, así que sin
   este fondo lo único que separaba un día de otro era un borde de 1px:
   a un metro de la pantalla la rejilla se disolvía en una mancha. Con
   el gris detrás, cada día disponible se lee como una ficha suelta y
   los no disponibles se funden con el fondo, que es justo lo que son. */
.tw-cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
  background: #E7EAF0;
  border-radius: 12px;
  padding: 6px;
}

.tw-cal th {
  padding: 4px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Sobre gris, --tw-faint quedaba en un susurro. */
  color: var(--tw-muted);
}

.tw-cal td {
  padding: 0;
  text-align: center;
}

/* Altura cómoda en vez de proporción cuadrada: en una columna
   estrecha, el cuadrado encoge la celda hasta que el número queda
   diminuto. Con min-height el día se lee igual de bien en móvil que
   en escritorio, y llega al objetivo táctil de 44 px (WCAG 2.5.5). */
.tw-day {
  min-height: 42px;
  display: grid;
  place-items: center;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  border: 1px solid transparent;
  user-select: none;
}

/* Día no disponible: se apaga, no se tacha.
   La raya encima de media rejilla ensuciaba el calendario entero y
   sugería "cancelado" cuando solo significa "no se puede elegir". */
.tw-day.tw-muted {
  color: #C3CBD6;
  cursor: not-allowed;
}

/* Día libre: fondo blanco con borde, no un relleno azul.
   Antes cada día disponible iba pintado de azul claro y el mes
   entero se veía como una mancha; lo que destaca ahora es lo
   elegido, que es lo que de verdad importa mirar. */
.tw-day.tw-avail {
  color: var(--tw-primary);
  font-weight: 600;
  background: #fff;
  border-color: #D5DEEC;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease,
              color .14s ease, box-shadow .14s ease;
}

.tw-day.tw-avail:hover,
.tw-day.tw-avail:focus-visible {
  background: #EDF2FA;
  border-color: var(--tw-primary);
  box-shadow: 0 0 0 3px rgba(11, 31, 58, .1);
}

.tw-day.tw-sel {
  background: var(--tw-primary);
  border-color: var(--tw-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(11, 31, 58, .28);
}

.tw-day.tw-sel:hover {
  background: var(--tw-primary);
  color: #fff;
}

/* Hoy: un punto discreto bajo el número. Ubica sin competir con la
   selección, que es el estado que tiene que ganar visualmente. */
.tw-day.tw-today {
  position: relative;
}

.tw-day.tw-today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tw-accent, #C8A046);
}

.tw-day.tw-sel.tw-today::after { background: rgba(255, 255, 255, .85); }

.tw-cal-note {
  margin-top: 14px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tw-muted);
  background: var(--tw-panel);
  border-radius: 10px;
  border-left: 3px solid var(--tw-accent, #C8A046);
}

.tw-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--tw-muted);
}

/* --------------------------------------------------------------------------
   Horarios
   -------------------------------------------------------------------------- */

.tw-slots-title {
  margin: 1.4rem 0 .7rem;
  font-family: var(--font-display, inherit);
  font-size: 14px;
  font-weight: 700;
  color: var(--tw-primary);
  /* capitalize ponía mayúscula en cada palabra ("11 De Julio"); solo hace
     falta en la primera letra del día. */
  text-transform: none;
}
.tw-slots-title::first-letter { text-transform: uppercase; }

/* Instrucción del paso. La rejilla de horas por sí sola no dice que haya que
   tocar una: el pulso del borde llama la atención pero no explica qué hacer.
   Borde discontinuo y no relleno sólido para que se lea como una indicación
   y no como otro botón más entre los horarios. */
.tw-slots-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 12px;
  background: var(--tw-panel);
  border: 1px dashed var(--tw-accent);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tw-primary);
}
.tw-slots-cta::before {
  content: "↓";
  font-size: 15px;
  line-height: 1;
  color: var(--tw-accent);
  flex-shrink: 0;
}

/* Horarios en dos columnas: suelen ser dos por experiencia y en fila ocupan
   la mitad de alto, así el bloque no empuja al resto de la ficha. */
/* auto-fit: con dos o más horarios se reparten en fila; con uno solo, ese
   ocupa todo el ancho en vez de quedarse a media caja. */
.tw-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.tw-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px;
  font: inherit;
  text-align: left;
  color: var(--tw-ink);
  background: #fff;
  border: 1px solid var(--tw-line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.tw-slot:hover:not(.tw-full) {
  border-color: var(--tw-accent);
  background: var(--tw-panel);
  transform: translateY(-1px);
}

/* Micro pulso del borde sobre el primer horario disponible tras elegir fecha. */
@keyframes tw-pulso-borde {
  0%   { border-color: var(--tw-accent); box-shadow: 0 0 0 0 rgba(200, 160, 70, .45); }
  70%  { border-color: var(--tw-accent); box-shadow: 0 0 0 6px rgba(200, 160, 70, 0); }
  100% { border-color: var(--tw-line);   box-shadow: 0 0 0 0 rgba(200, 160, 70, 0); }
}

.tw-slot.tw-pulse {
  animation: tw-pulso-borde .85s ease-out 2;
}

.tw-slot > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tw-slot .t {
  font-size: 15px;
  font-weight: 700;
  color: var(--tw-primary);
}

.tw-slot small {
  font-size: 12px;
  color: var(--tw-muted);
}

.tw-arrow {
  font-size: 16px;
  color: var(--tw-accent);
}

.tw-slot.tw-full {
  opacity: .5;
  cursor: not-allowed;
}

.tw-slot.tw-full .tw-arrow {
  color: var(--tw-faint);
}

/* --------------------------------------------------------------------------
   Modal de reserva
   -------------------------------------------------------------------------- */

.tw-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(11, 31, 58, .55);
  backdrop-filter: blur(3px);
  animation: tw-fade .18s ease;
}

.tw-modal {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  color: #1E293B;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(11, 31, 58, .3);
  animation: tw-rise .22s ease;
}

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

@keyframes tw-fade {
  from { opacity: 0; }
}

@keyframes tw-rise {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---- Cabecera del modal ---- */

.tw-m-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 1.1rem 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, #14294D, #0B1F3A);
  flex-shrink: 0;
}

.tw-m-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #C8A046;
  background: rgba(255, 255, 255, .1);
  border-radius: 11px;
}

.tw-m-title {
  flex: 1;
  min-width: 0;
}

.tw-m-title h4 {
  color: #fff;
  margin: 0 0 2px;
  font-family: var(--font-display, inherit);
  font-size: 16px;
  font-weight: 700;
}

.tw-m-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .72);
}

.tw-m-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}

.tw-m-close:hover {
  background: rgba(255, 255, 255, .24);
}

/* ---- Cuerpo: formulario + resumen ---- */

.tw-m-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.tw-m-main {
  padding: 1.3rem;
  overflow-y: auto;
}

.tw-m-side {
  padding: 1.3rem;
  background: var(--tw-panel, #FAF7F0);
  border-left: 1px solid #E7E9EF;
  overflow-y: auto;
}

.tw-sec {
  margin-bottom: 1.5rem;
}

.tw-sec:last-child {
  margin-bottom: 0;
}

.tw-sec > h5 {
  margin: 0 0 .7rem;
  font-family: var(--font-display, inherit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748B;
}

/* ---- Selector de cantidad ---- */

.tw-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
  background: #FAF7F0;
  border: 1px solid #E7E9EF;
  border-radius: 11px;
}

.tw-qty-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tw-qty-label strong {
  font-size: 14px;
  font-weight: 600;
  color: #0B1F3A;
}

.tw-qty-label span {
  font-size: 12px;
  color: #64748B;
}

.tw-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 3px;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 9px;
}

.tw-stepper button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  color: #0B1F3A;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease;
}

.tw-stepper button:hover:not(:disabled) {
  background: #F5EBD1;
}

.tw-stepper button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.tw-stepper .val {
  min-width: 26px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0B1F3A;
}

/* ---- Campos ---- */

/* --------------------------------------------------------------------------
   Cada pasajero, en UNA línea

   Apilar rótulo + etiqueta + campo daba tres renglones por persona: un globo
   de seis plazas eran dieciocho renglones y el botón de reservar quedaba a un
   scroll largo de distancia. Y sobraba sitio: en escritorio la caja es ancha
   y esos tres renglones ocupaban una columna estrecha en el centro.

   Rótulo a la izquierda, campo a la derecha, misma línea. La etiqueta se
   oculta A LA VISTA —lo que hay que escribir ya lo dice el marcador de
   posición del campo— pero se queda en el DOM: los lectores de pantalla la
   necesitan para anunciar el input.
   -------------------------------------------------------------------------- */
.tw-passenger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 10px 13px;
  margin-bottom: 9px;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 11px;
}

.tw-passenger > h5 {
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #C8A046;
}

/* El asterisco de obligatorio lo llevaba la etiqueta; como ahora está
   oculta a la vista, pasa al rótulo. La condición coincide EXACTA con la
   del JS: lleva `tw-required` la etiqueta de todo pasajero que no sea el
   asiento opcional. */
.tw-passenger:not(.tw-passenger--opt) > h5::after {
  content: " *";
  color: #C53030;
}

/* El contenedor de campos ocupa la segunda columna, a la derecha del
   rótulo. Sirve tanto si es un .tw-grid2 (con peso) como un div suelto. */
.tw-passenger > div {
  grid-column: 2;
  margin: 0;
}

/* El aviso de peso sí va a lo ancho: es un texto para leer, no un campo. */
.tw-passenger > .tw-weight-note {
  grid-column: 1 / -1;
  margin-top: 2px;
}

/* Oculta a la vista pero NO para lectores de pantalla: display:none o
   visibility:hidden dejarían el campo sin nombre accesible. */
.tw-passenger .tw-field > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cabecera de cada unidad (modo per_unit): agrupa los asientos que viajan
   juntos, para que se lea "esta cuatrimoto lleva a estos dos". */
.tw-unit-head {
  margin: 14px 0 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #E7E9EF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0B1F3A;
}
.tw-unit-head:first-child { margin-top: 4px; }

/* El asiento opcional se ve secundario: si se queda vacío, no pasa nada. */
.tw-passenger--opt {
  background: #FAFBFC;
  border-style: dashed;
}
.tw-passenger--opt > h5 { color: #94A3B8; }

.tw-opt-tag {
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #94A3B8;
}

.tw-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Pasajeros en pantalla estrecha

   La fila de una línea es la de arriba, común a todas las anchuras. Aquí solo
   se aprieta lo que no cabe en un teléfono: menos aire alrededor, el rótulo
   un punto más chico, y nombre y peso uno debajo del otro —dos columnas de
   70px no se pueden escribir.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .tw-passenger {
    column-gap: 10px;
    padding: 9px 11px;
    margin-bottom: 7px;
  }

  .tw-passenger > h5 { font-size: 11px; }

  /* Con el rótulo comiéndose parte del ancho, nombre y peso uno debajo del
     otro respiran más que dos columnas de 70px. */
  .tw-passenger .tw-grid2 {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .tw-passenger .tw-field input { padding: 8px 10px; }
}

/* ---- Aviso de peso sobre el umbral ---- */

.tw-weight-note {
  margin-top: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: #92400E;
  background: #FEF6E7;
  border: 1px solid #F5D9A0;
  border-radius: 8px;
}

.tw-weight-note[hidden] {
  display: none;
}

.tw-sec-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748B;
}

.tw-sum-note {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #92400E;
  background: #FEF6E7;
  border: 1px solid #F5D9A0;
  border-radius: 8px;
}

.tw-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.tw-field:last-child {
  margin-bottom: 0;
}

.tw-grid2 .tw-field {
  margin-bottom: 0;
}

.tw-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
}

.tw-required::after {
  content: " *";
  color: #C53030;
}

.tw-field input {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: #1E293B;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tw-field input:focus {
  outline: 0;
  border-color: #C8A046;
  box-shadow: 0 0 0 3px rgba(200, 160, 70, .16);
}

.tw-field input.tw-invalid {
  border-color: #C53030;
  background: #FEF6F6;
}

.tw-field input.tw-invalid:focus {
  box-shadow: 0 0 0 3px rgba(197, 48, 48, .14);
}

/* ---- Opciones adicionales ---- */

.tw-addon {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #E7E9EF;
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.tw-addon:hover {
  border-color: #C8A046;
}

.tw-addon.tw-on {
  background: #FDFBF5;
  border-color: #C8A046;
}

.tw-addon.tw-addon-invalid {
  border-color: #C53030;
  background: #FEF6F6;
}

.tw-check {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #fff;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  transition: background .15s ease, border-color .15s ease;
}

.tw-addon.tw-on .tw-check {
  background: #C8A046;
  border-color: #C8A046;
}

.tw-addon-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---- Extra por persona: se elige cuántas personas lo llevan ---- */

/* La fila entera ya no alterna nada: el control es el sumador.

   Rejilla de dos columnas en vez de flex, para que la descripción
   pueda cruzarlas por debajo. Con flex compartía columna con el nombre
   y una frase larga —«tu entrada al hotel sería el vie 4 sep 2026, la
   noche antes del vuelo»— caía en seis renglones de tres palabras
   apretados contra el sumador. Abajo y a todo lo ancho se lee de una
   pasada. */
.tw-addon--qty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 11px;
  row-gap: 5px;
  cursor: default;
}

.tw-addon-nota {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.4;
  color: #64748B;
}

.tw-addon-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.tw-addon-stepper {
  flex-shrink: 0;
}

/* En un teléfono no caben dos columnas: el nombre, el precio con el
   sumador y la nota se apilan, cada uno a todo lo ancho.
   `flex-wrap` ya no sirve —la fila es una rejilla—, así que se pasa a
   una sola columna. */
@media (max-width: 560px) {
  .tw-addon--qty {
    grid-template-columns: minmax(0, 1fr);
  }

  .tw-addon-right {
    width: 100%;
    justify-content: space-between;
    margin-top: 4px;
  }
}

.tw-addon-body strong {
  font-size: 14px;
  font-weight: 600;
  color: #0B1F3A;
}

.tw-addon-body small {
  font-size: 12.5px;
  line-height: 1.4;
  color: #64748B;
}

.tw-addon-price {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0B1F3A;
  white-space: nowrap;
}

.tw-addon-price sup {
  font-size: 10px;
  font-weight: 500;
  color: #94A3B8;
}

.tw-addon-qty {
  width: 74px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  color: #1E293B;
  border: 1px solid #E7E9EF;
  border-radius: 7px;
}

.tw-addon-qty:focus {
  outline: 0;
  border-color: #C8A046;
  box-shadow: 0 0 0 3px rgba(200, 160, 70, .16);
}

.tw-addon.req .tw-addon-body strong::after {
  content: " (obligatorio)";
  font-size: 11px;
  font-weight: 500;
  color: #C53030;
}

/* ---- Resumen lateral ---- */

.tw-sum-exp {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #E7E9EF;
}

.tw-sum-exp img {
  width: 62px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
}

.tw-sum-exp div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tw-sum-exp strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #0B1F3A;
}

.tw-sum-exp span {
  font-size: 12px;
  color: #64748B;
}

.tw-summary .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 13.5px;
  color: #64748B;
}

.tw-summary .row strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1E293B;
  white-space: nowrap;
}

.tw-summary .row.sub {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #E7E9EF;
}

.tw-summary .row.tot {
  margin-top: 6px;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0B1F3A;
  border-top: 1.5px solid #0B1F3A;
}

.tw-summary .row.tot strong {
  font-size: 18px;
  font-weight: 800;
  color: #0B1F3A;
}

/* ---- Pie del modal ---- */

.tw-m-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 1rem 1.3rem;
  background: #fff;
  border-top: 1px solid #E7E9EF;
}

.tw-foot-error {
  display: none;
  width: 100%;
  padding: 8px 11px;
  font-size: 13px;
  color: #C53030;
  background: #FEF6F6;
  border: 1px solid #F3C9C9;
  border-radius: 8px;
}

.tw-foot-error.show {
  display: block;
}

.tw-foot-total {
  flex: 1;
  font-size: 13.5px;
  color: #64748B;
}

.tw-foot-total strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0B1F3A;
}

.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #0B1F3A;
  background: linear-gradient(135deg, #C8A046, #A8842E);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tw-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(200, 160, 70, .32);
}

.tw-btn:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* ---- Confirmación ---- */

.tw-ok {
  padding: 2.6rem 1.6rem;
  text-align: center;
  overflow-y: auto;
}

.tw-ok-ico {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.1rem;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2E7D5B, #246347);
  border-radius: 50%;
}

.tw-ok h3 {
  margin: 0 0 .5rem;
  font-family: var(--font-display, inherit);
  font-size: 21px;
  font-weight: 800;
  color: #0B1F3A;
}

.tw-ok p {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 14px;
  color: #64748B;
}

.tw-code {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 11px 24px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #0B1F3A;
  background: #F5EBD1;
  border: 1px dashed #C8A046;
  border-radius: 10px;
}

/* Nota bajo el código de reserva en la pantalla de éxito. */
.tw-ok-nota {
  margin-top: 1rem;
  font-size: 13px;
  line-height: 1.55;
  color: #5A6B80;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .tw-m-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .tw-m-main,
  .tw-m-side {
    overflow: visible;
  }

  .tw-m-side {
    border-left: 0;
    border-top: 1px solid #E7E9EF;
  }
}

@media (max-width: 560px) {
  .teoti-widget {
    padding: 1.1rem;
  }

  .tw-modal-backdrop {
    padding: 0;
  }

  .tw-modal {
    max-width: none;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }

  .tw-grid2 {
    grid-template-columns: 1fr;
  }

  .tw-m-foot {
    position: sticky;
    bottom: 0;
  }

  .tw-btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teoti-widget *,
  .tw-modal-backdrop,
  .tw-modal,
  .tw-modal * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .tw-slot:hover:not(.tw-full),
  .tw-btn:hover:not(:disabled) {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   SweetAlert2 — ajuste a la identidad de la marca.
   Su contenedor va en z-index 1060, por encima del modal de reserva (1000).
   -------------------------------------------------------------------------- */

.tw-swal {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  border-radius: 16px;
  padding: 1.6rem 1.4rem 1.4rem;
}

.tw-swal .swal2-title {
  font-family: var(--font-display, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #0B1F3A;
}

.tw-swal .swal2-html-container {
  font-size: 14.5px;
  line-height: 1.55;
  color: #475569;
}

/* A22 — objetivo táctil mínimo de 44px en los botones del diálogo. */
.tw-swal-confirm,
.tw-swal-cancel {
  min-height: 44px;
  padding: 0 1.3rem;
  margin: 0 5px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.tw-swal-confirm {
  color: #0B1F3A;
  background: #C8A046;
}

.tw-swal-confirm:hover {
  background: #B58F38;
}

.tw-swal-cancel {
  color: #475569;
  background: #fff;
  border-color: #CBD5E1;
}

.tw-swal-cancel:hover {
  background: #F1F5F9;
}

.tw-swal-confirm:focus-visible,
.tw-swal-cancel:focus-visible {
  outline: 2px solid #0B1F3A;
  outline-offset: 2px;
}

.tw-swal-toast {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
}