/* ============================================================
   V4.171.0 — LAS REGLAS DE MEDIDA DE LA CASA
   ============================================================
   Pedido de Gonza (20/08, con cuatro capturas de la V4.170.0):
   "para el costo tenés que poner reglas de medidas y de diseño en
   la versión celular y en la versión de PC para que esto se
   solucione de una vez".

   Tiene razón y las capturas lo demuestran: cada barra fija y cada
   grilla venía eligiendo sus propios números, así que arreglar una
   pantalla no arreglaba la de al lado. Estas cuatro reglas son de
   cumplimiento obligatorio y `pruebas/reglas_de_medida.js` las
   vigila: si alguien escribe un número suelto, la batería falla.

   ── 1 · LAS MEDIDAS TIENEN NOMBRE, NO NÚMERO ────────────────
   La altura de la barra de navegación, de la barra de la ficha y
   del piso seguro del teléfono viven acá abajo, UNA vez. Nadie
   vuelve a escribir 64, 62 ni 96 a mano: si mañana la navegación
   mide distinto, se cambia en un lugar y toda la app acompaña.

   ── 2 · LO FIJO SE ANCLA AL PISO DE SU VENTANA ──────────────
   La tienda vive adentro de un iframe cuyo marco YA termina arriba
   de la barra de navegación (V4.168.0). Una barra de adentro que
   descuenta la navegación otra vez está descontando dos veces: eso
   fue el hueco blanco de la mini-barra y es lo que hoy sube la
   barra del wizard arriba del contenido. Adentro de la tienda,
   `bottom: 0` y el safe-area; la navegación no existe.

   ── 3 · LO QUE TAPA, RESERVA ────────────────────────────────
   Toda pantalla con una barra fija encima reserva su altura con
   `padding-bottom`. Sin eso, la barra siempre tapa el último
   bloque — y el último bloque suele ser el botón que continúa.

   ── 4 · NADA SE POSICIONA POR nth-child ─────────────────────
   La causa del hueco de las capturas: el mosaico escondía las
   fotos chicas con `nth-child(n+4)`. Cuando aparecieron el botón
   de la galería y el lápiz de Gerencia, los hijos se corrieron,
   se escondieron las DOS fotos y la fila de 92px quedó reservada
   y vacía. Por eso lo veía Gerencia y el pasajero no. Un selector
   por posición se rompe solo el día que alguien agrega un botón:
   se selecciona por CLASE, y ninguna grilla declara altura fija
   para contenido que puede no estar (fila `auto`).
   ============================================================ */
:root {
  /* V4.209.0 (D-2408-D) — el color de la acción destacada, decisión
     firmada de Gonza (25/08): violeta, "en lo importante, no en todo".
     El dueño del hex es disenio.js (color.destacado); esta variable es
     su único espejo del lado CSS, para los botones que viven en clases
     (el wizard). Regla 1: las medidas tienen nombre, no número. */
  --color-accion-destacada: #0072D6; /* V4.379.0 — celeste vivo (cuadro de Gonzalo 06/10) */
  --alto-nav-sistema: 64px;   /* la barra de abajo del sistema, celular */
  --alto-barra-ficha: 62px;   /* precio + botón de la ficha */
  --alto-barra-wizard: 62px;  /* total + Siguiente del wizard */
  --piso-seguro: env(safe-area-inset-bottom);
  /* V4.182.0 — a qué altura se pega la caja de compra de la ficha.
     Ver la nota en `.ficha-caja` de por qué esto tiene nombre. */
  --tope-caja-ficha: 18px;
}

/* ============================================================
   NAFULL TUR — SISTEMA DE GESTIÓN
   responsive.css — Adaptación a celular (2026-07-09)
   ============================================================
   El sistema usa estilos "en línea" (objetos de JS) en casi todos
   los componentes -- por eso, para adaptar a pantalla chica sin
   reescribir toda la app, se agrega esta hoja aparte con reglas que
   solo se activan por debajo de cierto ancho de pantalla, usando
   clases puntuales agregadas a los elementos que más se
   apretaban (nav, comparaciones en columnas, padding general).

   El !important es necesario a propósito: un estilo en línea
   siempre le gana a una regla de CSS normal, así que sin !important
   estas reglas no harían nada en la práctica.
   ============================================================ */

@media (max-width: 768px) {
  /* Nav principal -- menos aire, y las pestañas se pueden deslizar
     de costado en vez de amontonarse todas apretadas en varias
     líneas. */
  .nav-principal {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .nav-tabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .nav-tabs-scroll::-webkit-scrollbar {
    height: 4px;
  }
  .nav-tab-item {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .nav-usuario-texto {
    display: none !important; /* el mail largo del usuario ocupa mucho lugar en pantalla chica -- se saca, el rol se ve en Mi Panel igual */
  }

  /* Comparaciones y paneles de 2 columnas -- se apilan en 1 sola
     columna, así cada tarjeta usa el ancho completo en vez de
     quedar comprimida. */
  .grid-responsive {
    grid-template-columns: 1fr !important;
  }

  /* Padding general de cada módulo -- se achica para aprovechar
     mejor el ancho chico de un celular. */
  .app-body-responsive {
    padding: 14px !important;
  }

  /* Cabeceras internas de cada módulo -- menos padding lateral. */
  .app-header-responsive {
    padding: 16px 18px !important;
    flex-wrap: wrap;
  }

  /* Tablas o filas anchas (Dashboard, listados) -- en vez de
     comprimirse hasta ser ilegibles, se pueden deslizar de costado. */
  .tabla-scroll-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Botones -- un poco más altos, más fáciles de tocar con el dedo. */
  button {
    min-height: 38px;
  }

  /* Punto pedido 2026-07-09: pulido inspirado en Travexa -- tarjetas
     más redondeadas y con más aire entre ellas en pantalla chica, se
     siente menos "apretado" y más amigable al tocarlo con el dedo. */
  section, .bloque {
    border-radius: 10px !important;
  }

  /* El panel de contactos del Chat y el de conversación, uno debajo
     del otro en vez de codo a codo -- en compu quedan bien lado a
     lado, en celular no entran los dos juntos. */
  .chat-panel-doble {
    flex-direction: column !important;
  }
  .chat-panel-contactos {
    width: 100% !important;
  }

  /* Inputs más altos, más fáciles de tocar y de leer lo que se
     escribe. */
  input, select, textarea {
    font-size: 16px !important; /* evita que el navegador haga zoom automático al tocar un campo en iPhone */
    min-height: 40px;
  }
  textarea { min-height: 70px; }

  /* Punto pedido 2026-07-10: filas de botones (Financiero, Voucher,
     Crear Reserva) que en compu van todos en una línea, en celular
     se acomodan solos en varias líneas en vez de desbordar la
     pantalla de costado. */
  .fila-botones-responsive {
    flex-wrap: wrap !important;
  }

  /* Tarjetas de resumen (Dashboard, Clientes) -- más chicas y con
     menos padding en celular, para que entren más por fila sin
     quedar gigantes. */
  .tarjeta-resumen-responsive {
    padding: 12px 14px !important;
    font-size: 11.5px !important;
  }

  /* Login y Registro -- menos padding lateral en la tarjeta, letra
     un poco más chica en el título para que no se corte. */
  .login-tarjeta-responsive {
    padding: 24px 20px !important;
    max-width: 100% !important;
  }

  /* ---------------------------------------------------------------
     REGLA GENERAL PEDIDA POR GONZALO (2026-07-12):
     en el celular, lo que no entra a lo ancho va ABAJO -- nunca
     amontonado ni cortado contra el borde. Todo centrado y con aire.
     --------------------------------------------------------------- */

  /* Filas de a dos (selectores de comparación, nombre + botones, etc.)
     -> se apilan una debajo de la otra y ocupan todo el ancho. */
  .fila-responsive {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Ningún campo se sale de la pantalla: los select e input siempre
     entran completos en vez de cortarse contra el borde. */
  .fila-responsive select,
  .fila-responsive input,
  .grid-responsive select,
  .grid-responsive input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Los botones de una fila apilada quedan cómodos y centrados en vez
     de apretados contra el texto. */
  .fila-responsive > div {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .fila-responsive > div > button {
    flex: 1 1 auto !important;
    padding: 9px 12px !important;
  }

  /* Nada se pega al borde de la pantalla ni genera scroll horizontal. */
  body {
    overflow-x: hidden !important;
  }
}

/* ============================================================
   AUDITORÍA MÓVIL INTEGRAL — V1.12.4 (2026-07-20)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { width: 100%; max-width: 100%; margin: 0; }
img, svg, canvas, video { max-width: 100%; height: auto; }

/* Controles segmentados consistentes: Grupal/A medida, Viaje/Pagos y Costos. */
.control-segmentado {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: #e4e8f5 !important;
  max-width: 100%;
}
.control-segmentado > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* Shell y navegación */
  .nav-principal { align-items: center !important; }
  .nav-principal > img { flex: 0 0 auto; }
  .nav-tabs-scroll { order: 3; width: 100%; }
  .nav-principal > div:last-of-type { margin-left: auto !important; }

  /* Todos los módulos respetan el viewport. */
  #root, #root > div, main, section, article, form { max-width: 100% !important; }
  [style*="min-width"] { min-width: 0 !important; }
  [style*="width:"] { max-width: 100%; }

  /* Solo las grillas marcadas como responsive bajan a una columna.
     No se toca cualquier grid del sistema: eso rompía calendarios,
     tableros y selectores de imágenes. */
  .grid-responsive, .mobile-stack-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="display: flex"] { max-width: 100%; }

  /* Formularios */
  input, select, textarea {
    width: 100%;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  label { max-width: 100%; overflow-wrap: anywhere; }

  /* Controles superiores iguales, centrados y sin cortes. */
  .control-segmentado {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .control-segmentado > button {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* Tablas: no deformar columnas; deslizar dentro de su bloque. */
  table { border-collapse: collapse; }
  table th, table td { white-space: nowrap; }
  section > div[style*="overflow-x"], .tabla-scroll-mobile {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Barras de acciones y botones largos.
     V3.4.0 — Esta regla también alcanzaba a `[style*="justify-content:
     space-between"]`. Era inofensiva (solo envolvía) pero era una SEGUNDA
     pasada sobre el mismo selector, y las pasadas duplicadas son las que
     terminaron en las seis capas contradictorias de la V3.2.1. El envolver
     lo cubre la regla única de la V3.3.0; acá queda solo la clase. */
  .fila-botones-responsive {
    flex-wrap: wrap !important;
  }
  button { max-width: 100%; }

  /* Textos largos, identificadores y correos nunca salen del borde. */
  p, span, b, strong, small, pre, code, td, th {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  pre { white-space: pre-wrap !important; }

  /* Modales y tarjetas fijas. */
  [role="dialog"], [style*="position: fixed"] > div {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
  }
}

@media (max-width: 420px) {
  .app-body-responsive { padding: 10px !important; }
  .app-header-responsive { padding: 13px 12px !important; }
  .nav-principal { padding: 9px 10px !important; }
  .control-segmentado > button { font-size: 11.5px !important; }
}

/* ============================================================
   CIERRE MÓVIL FINAL — V1.14.4
   Regla: contenido centrado, sin desborde lateral; todo lo que no
   entra baja a la línea siguiente y conserva una lectura cómoda.
   ============================================================ */
@media (max-width: 768px) {
  html, body, #root { overflow-x: clip !important; }

  /* Contenedor principal centrado y con margen uniforme. */
  .app-body-responsive,
  main,
  #root > div > div:not(.nav-principal) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Tarjetas, formularios y bloques nunca exceden el viewport. */
  section, article, form, fieldset,
  [style*="border-radius"], [style*="box-shadow"] {
    max-width: 100% !important;
  }

  /* Solo las filas marcadas para responsive se apilan. Aplicarlo a
     todos los flex deformaba fichas, calendarios y botones. */
  .fila-responsive, .fila-botones-responsive, .mobile-wrap-flex {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .fila-responsive > *, .fila-botones-responsive > *, .mobile-wrap-flex > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ============================================================
     ACÁ ESTABA LA CAUSA DE CASI TODO — CORREGIDO EN V3.4.0
     ============================================================
     La regla decía:

         .fila-botones-responsive,
         .fila-responsive,
         [style*="justify-content: space-between"] {
           justify-content: center !important;
           align-items: stretch !important;
         }

     El tercer selector agarraba **toda fila escrita con `space-between`**
     —hay 27 archivos que la usan— y le daba vuelta la instrucción:
     `space-between` quiere decir "separalos a los extremos" y esto lo
     cambiaba por "juntalos en el medio". El programador pedía una cosa y
     la hoja de estilos hacía la contraria.

     De ahí salían, todas juntas:
       · "Historial interno" pegado a "+ Nota", "Horarios" a "+ Agregar",
         "Cursos" a "+ Nuevo curso", "Info empresa" a "Editar" — se ven
         encimados porque están empujados al centro, uno contra otro.
       · **"SeñaU$D 60"** sin espacio: la fila de la seña es un
         `space-between` entre la palabra y el importe.
       · Los títulos de tarjeta que aparecían centrados mientras el texto
         de abajo iba a la izquierda.
       · La lista de Contactos del chat centrada, con cada renglón
         arrancando en un lugar distinto — y eso que `filaHilo` tiene
         `textAlign: 'left'` escrito a mano.
       · Y `align-items: stretch` era lo que estiraba la etiqueta
         CONFIRMADA en una pastilla verde de cuatro centímetros de alto.

     Las dos clases que quedan SÍ piden estar centradas a propósito: son
     grupos de botones de acción, no filas de contenido. Lo que se saca es
     el selector que adivinaba.
     ============================================================ */
  /* V3.4.4 — `.fila-responsive` sale de acá.
     Quedaban las dos clases porque las dos "piden estar centradas a
     propósito". Era cierto para UNA sola: `.fila-botones-responsive` es
     literalmente un grupo de botones, y ahí centrar y emparejar alturas
     está bien. `.fila-responsive` es otra cosa —una fila que se adapta— y
     se usa en trece archivos sobre filas de CONTENIDO: la cabecera de la
     reserva, las tablas de costos, la planilla de la salida.

     Ahí el `align-items: stretch` estiraba lo que no tenía que estirarse
     (la etiqueta PRE RESERVA quedó de la altura de toda la tarjeta) y el
     `justify-content: center` juntaba en el medio lo que estaba escrito
     para ir separado. Es el mismo bug que sacamos en la V3.4.0,
     sobreviviendo por la puerta de al lado.

     `.fila-responsive` conserva lo suyo: ocupa el ancho y sus hijos se
     reparten (`flex: 1 1 150px`, más abajo). Nada de imponer alineación. */
  .fila-botones-responsive {
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .fila-responsive {
    width: 100% !important;
  }

  /* Botones de acción: completos, legibles y centrados. */
  .fila-botones-responsive > button,
  .fila-responsive > button,
  .fila-responsive > div,
  form button {
    flex: 1 1 150px !important;
  }
  /* V3.2.1 — Esta regla decía `text-align: center` y `white-space: normal`
     para TODOS los botones. Dos problemas:
       · centraba el texto de cualquier botón, incluidas las tarjetas de
         "Para hoy" y de Mis ventas, que son botones con contenido a la
         izquierda. Por eso se veían con el texto en el medio y un hueco
         gigante al costado.
       · `white-space: normal !important` **anulaba** el `nowrap` que se puso
         en la V2.41 para que el texto no se partiera letra por letra. La
         regla vieja le ganaba a la nueva por ser `!important` y estar antes.
     Se deja solo el interlineado, que sí hace falta. */
  button { line-height: 1.25; }

  /* Navegación secundaria: se envuelve y queda centrada, sin corte. */
  .control-segmentado,
  [role="tablist"] {
    justify-content: center !important;
    margin-inline: auto !important;
  }

  /* Tablas quedan contenidas en su propio scroll, nunca en la página. */
  table { width: max-content; min-width: 100%; }
  .tabla-scroll-mobile,
  [style*="overflow-x: auto"] {
    max-width: 100vw !important;
    overscroll-behavior-inline: contain;
  }

  /* Modales centrados con separación real de los cuatro bordes. */
  [style*="position: fixed"] {
    padding: 12px !important;
  }
  [role="dialog"],
  [style*="position: fixed"] > div {
    width: min(100%, 560px) !important;
    margin: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* Evita que identificadores, precios o nombres largos empujen el layout. */
  h1, h2, h3, h4, p, span, label, small, strong, b, code {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Imágenes y adjuntos nunca salen del bloque. */
  img, input[type="file"] { max-width: 100% !important; }
  input[type="file"] { overflow: hidden; }
}

@media (max-width: 480px) {
  .app-body-responsive { padding: 10px !important; }
  section, article, form { margin-inline: auto !important; }
  .fila-botones-responsive > button,
  .fila-responsive > button,
  form button { flex-basis: 100% !important; }
}


/* V4.369.0 — el chip corto del calendario existe sólo en el celular. */
.chip-cal-corto { display:none; }

/* ============================================================
   V1.15.2 — MOBILE ESTABLE
   Calendario mensual real + formularios sin columnas angostas.
   ============================================================ */
@media (max-width: 768px) {
  /* V3.2.1 — Centraba los títulos de TODA sección. Con el criterio nuevo
     —todo alineado a la izquierda, un solo eje de lectura— sobra. */
  .app-header-responsive { justify-content: flex-start; }
  form, fieldset, table, .tabla-scroll-mobile,
  input, select, textarea, label { text-align: left; }

  /* Calendario tipo almanaque: siempre 7 columnas compactas. */
  body .calendario-nav-mobile {
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto auto !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
  }
  body .calendario-nav-mobile > div {
    text-align:center !important;
    min-width:0 !important;
    font-size:20px !important;
  }
  body .calendario-nav-mobile button {
    width:auto !important;
    min-width:40px !important;
    padding:8px 7px !important;
    font-size:12px !important;
    flex:none !important;
  }
  body .calendario-encabezados-mobile,
  body .calendario-mes-mobile {
    display:grid !important;
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    gap:3px !important;
    width:100% !important;
  }
  body .calendario-encabezados-mobile > div {
    text-align:center !important;
    font-size:10px !important;
    padding:3px 0 !important;
  }
  body .calendario-mes-mobile > div {
    min-width:0 !important;
    min-height:56px !important;
    height:56px !important;
    padding:3px !important;
    border-radius:6px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }
  body .calendario-mes-mobile button {
    width:100% !important;
    min-height:0 !important;
    padding:2px !important;
    font-size:7px !important;
    line-height:1.05 !important;
    flex:none !important;
    overflow:hidden !important;
  }
  /* V4.369.0 — el chip corto (origen + lugares) en el celular; el largo
     queda para la computadora. A 7px no se leía nada. */
  body .calendario-mes-mobile .chip-cal-largo { display:none !important; }
  body .calendario-mes-mobile .chip-cal-corto { display:block !important; font-size:10px !important; font-weight:700 !important; line-height:1.2 !important; white-space:nowrap !important; }

  /* Generador de flyer: vista previa y controles uno debajo del otro. */
  body .flyer-armado-mobile {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  body .flyer-preview-mobile, body .flyer-datos-mobile {
    width:100% !important;
    min-width:0 !important;
  }
  body .flyer-preview-box-mobile {
    width:min(100%,320px) !important;
    height:auto !important;
    aspect-ratio:9/16 !important;
    margin:0 auto !important;
  }
  body .flyer-datos-mobile ul {
    padding-left:20px !important;
    width:100% !important;
  }
  body .flyer-datos-mobile li {
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  body .flyer-datos-mobile button {
    width:100% !important;
  }
}


/* ============================================================
   V1.15.3 — CRITERIO VISUAL ÚNICO
   Contenedores centrados; contenido operativo alineado a la izquierda.
   ============================================================ */
@media (max-width: 768px) {
  .app-body-responsive { width:100% !important; max-width:760px !important; margin-inline:auto !important; }
  .app-header-responsive, .app-header-responsive h1, .app-header-responsive h2,
  section > h1, section > h2, article > h1, article > h2 {
    text-align:left !important; justify-content:flex-start !important;
  }
  section, article, form, fieldset { width:100% !important; max-width:100% !important; }
  .flyer-armado-mobile { align-items:start !important; }
  .flyer-preview-mobile { align-items:center !important; }
  .flyer-datos-mobile { text-align:left !important; }
  .flyer-datos-mobile .fila-botones-responsive,
  .flyer-datos-mobile [style*="display: flex"] { width:100% !important; }
  .calendario-encabezados-mobile, .calendario-mes-mobile { min-width:0 !important; }
}

/* V1.16 — Banco de imágenes organizado */
@media (max-width: 760px) {
  .banco-imagenes-v116 > section { padding: 14px !important; }
  .banco-imagenes-v116 section > div[style*="repeat(3"] { grid-template-columns: 1fr !important; }
  .banco-imagenes-v116 section > div[style*="2fr 1fr"] { grid-template-columns: 1fr !important; }
  .banco-imagenes-v116 button { max-width: 100%; }
}

/* ============================================================
   CATÁLOGO — LA GRILLA DE TARJETAS (V2.7.0)
   ============================================================
   Gonzalo, 25/07/2026: "te pedí que aparezcan cuatro imágenes en vez de
   tres; me generó el espacio pero me siguen apareciendo tres".

   El problema era `auto-fill` con `minmax`: el navegador decide cuántas
   entran según el ancho real, y en una pantalla de notebook entraban
   tres. Acá se fija la cantidad por tamaño de pantalla en vez de
   dejarlo librado.
   ============================================================ */
/* Definición única más abajo, en "GRILLA DEL CATÁLOGO". Acá había una
   segunda copia con los mismos valores: dos bloques compitiendo por lo
   mismo es la forma más rápida de que un cambio no tenga efecto. */

/* ============================================================
   PANTALLAS VIEJAS AL NIVEL DE LAS NUEVAS (V2.7.0)
   ============================================================
   "Cuando ponés cotizar viaje a medida lo manda a generar un pedido, y
   es fea esa estética. Toda la estética que teníamos antes tiene que
   parecerse más a lo nuevo, con botones más grandes, más legible."

   Estas reglas suben el piso de las pantallas que todavía no migraron
   al sistema de diseño, sin tener que reescribirlas una por una.
   ============================================================ */
.pantalla-vieja button,
.pantalla-vieja input,
.pantalla-vieja select,
.pantalla-vieja textarea {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13.5px;
}
.pantalla-vieja button {
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.pantalla-vieja input,
.pantalla-vieja select,
.pantalla-vieja textarea {
  padding: 10px 11px;
  border-radius: 9px;
  border: 1px solid #E3EAEF;
}
.pantalla-vieja label {
  font-size: 12.5px;
  line-height: 1.5;
}
.pantalla-vieja h2 { font-family: Outfit, Arial, sans-serif; font-size: 17px; font-weight: 800; color: #1a2e6e; }
.pantalla-vieja h3 { font-family: Outfit, Arial, sans-serif; font-size: 15px; font-weight: 700; color: #1a2e6e; }


/* ============================================================
   GRILLA DEL CATÁLOGO — V2.7.0
   ============================================================
   Antes usaba `auto-fill` con un ancho mínimo, y el navegador decidía
   cuántas tarjetas entraban. Gonzalo pidió 4 y le seguían apareciendo 3:
   con `auto-fill` el resultado depende del ancho exacto de la ventana,
   así que "poné 4" no se podía garantizar.

   Ahora la cantidad es explícita por tamaño de pantalla. Es aburrido
   pero es lo único que hace que se vea igual en todas las computadoras.
   ============================================================ */
/* V2.12.0 — CENTRADO, no "de costado" (Gonzalo, 26/07/2026), cuando la
   grilla era de columnas fijas y una fila corta dejaba columnas muertas.
   V4.97.0 — REGLA NUEVA, aprobada por Gonzalo en la maqueta Vidriera
   Pareja (17/08, con sus capturas): con el flex de ahora el centrado
   producía LO CONTRARIO de lo que buscaba — una tarjeta sola flotando en
   el medio de la fila ("desparejo, desprolijo"). Las filas incompletas
   quedan a la IZQUIERDA, como Despegar: la grilla siempre arranca del
   mismo borde y el ojo no salta. */
/* ============================================================
   V4.105.0 — LA VIDRIERA ANCHA (maqueta aprobada por Gonzalo):
   la grilla de la TIENDA es propia (.grilla-vidriera) y en
   escritorio va a UNA columna con tarjetas ANCHAS: la foto a la
   izquierda ocupando todo el alto y el resto a la derecha, como
   Despegar. En el celular la tarjeta se apila como siempre. La
   grilla-catalogo del B2B no se toca. La capa del agente vive
   adentro del cuerpo: la tarjeta ancha la muestra igual (suma,
   nunca cambia).
   ============================================================ */
/* V4.106.0 — CALCADO DE LA MAQUETA (pestaña 1): tarjeta de TRES
   columnas en escritorio — foto 300px | cuerpo | COLUMNA DE PRECIO
   210px con su borde a la izquierda. En tablet dos tarjetas apiladas
   por fila; en el celular una, con el precio abajo. */
/* ============================================================
   V4.385.0 — LA TARJETA VERTICAL (Gonzalo, 07/10, con captura de Like
   Travel: "entre la foto y la info del paquete hay mucho espacio en blanco…
   creo que así es la manera"). Reemplaza la tarjeta ancha de la V4.105/106:
   sin el filtro de la izquierda la fila ancha quedaba medio vacía.
   La foto ocupa TODA la tarjeta, oscurecida abajo; encima: la región en su
   color, qué es (grupal/paquete · micro/avión), el destino, los datos, el
   "desde" y las cuotas sin tarjeta; la flecha redonda abre el viaje.
   Cuatro por fila en la compu, dos en tablet, una en el celular. Los datos y
   la capa del vendedor son LOS MISMOS: sólo cambia cómo se acomodan.
   ============================================================ */
.grilla-vidriera { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; align-items: stretch; }
.grilla-vidriera > * { min-width: 0; max-width: none; }
.tarjeta-viaje { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; isolation: isolate; transition: transform .18s, box-shadow .18s; }
.tarjeta-viaje:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 36, 104, .22); }
.tarjeta-viaje .tv-foto { position: absolute !important; inset: 0; height: auto; z-index: -1; }
/* sin foto cargada: el degradé de la casa, oscuro, para que el texto blanco se lea igual */
.tarjeta-viaje .tv-foto:not(:has(img)) { background: linear-gradient(160deg, #1573d0 0%, #0a2468 70%) !important; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 52, .05) 0%, rgba(6, 18, 52, .15) 38%, rgba(6, 18, 52, .78) 70%, rgba(6, 18, 52, .94) 100%); pointer-events: none; }
.tarjeta-viaje [data-tv="region"] { top: 14px !important; bottom: auto !important; left: 14px !important; z-index: 1; }
.tarjeta-viaje [data-tv="medio"] { top: 50px !important; left: 14px !important; z-index: 1; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-cuerpo { padding: 0 18px; background: transparent; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-cuerpo h2 { color: #fff !important; min-height: 0 !important; font-size: clamp(22px, 1.9vw, 26px) !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-cuerpo p, .tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-cuerpo span { color: rgba(255, 255, 255, .9) !important; background: transparent !important; border-color: rgba(255, 255, 255, .45) !important; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-precio { display: flex; flex-direction: column; padding: 8px 76px 18px 18px; border: 0 !important; text-align: left; align-items: flex-start; background: transparent; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-precio > div:first-child span { color: #fff !important; }
.tarjeta-viaje .tv-ver { position: absolute; right: 16px; bottom: 18px; width: 50px !important; height: 50px; padding: 0 !important; border-radius: 50% !important; background: #fff !important; color: #0a2468 !important; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.tarjeta-viaje .tv-ver-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tarjeta-viaje:hover .tv-ver { background: #00b4f0 !important; color: #fff !important; }
/* V4.387.0 — LA TARJETA DEL VENDEDOR (adentro del Cotizador): la foto arriba,
   190px, y debajo los datos sobre blanco con la capa del vendedor. Encima de
   la foto sólo quedan los chips de región y de qué es. */
.tarjeta-viaje--vendedor { justify-content: flex-start; min-height: 0; padding-top: 190px; background: #fff; }
.tarjeta-viaje--vendedor .tv-foto { inset: 0 0 auto 0 !important; height: 190px !important; z-index: 0; }
.tarjeta-viaje--vendedor .tv-cuerpo { padding: 12px 16px 0; }
.tarjeta-viaje--vendedor .tv-precio { padding: 6px 16px 16px; }
.tarjeta-viaje--vendedor .tv-ver { top: 160px; bottom: auto; }
@media (max-width: 640px) {
  .grilla-vidriera { grid-template-columns: 1fr; }
  .tarjeta-viaje { min-height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .tarjeta-viaje, .tarjeta-viaje:hover { transition: none; transform: none; } }

.grilla-catalogo {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* V2.26.0 — `stretch` es lo que hace que todas las tarjetas de una fila
     midan lo mismo. Sin esto cada una medía según su contenido y el precio
     y la comisión quedaban a distinta altura. */
  align-items: stretch;
  gap: 14px;
}

.grilla-catalogo > * {
  flex: 0 1 calc((100% - 3 * 14px) / 4);
  max-width: calc((100% - 3 * 14px) / 4);
}

/* Los cortes bajaron en la V2.7.0. Estaban en 1180 y Gonzalo seguía viendo
   tres: con el navegador en zoom —normal para leer más cómodo— una pantalla
   de 1440 se comporta como una de 1150 y caía al tramo de tres. Con el corte
   en 1000 las cuatro sobreviven al zoom. */
@media (max-width: 1000px) {
  .grilla-catalogo > * {
    flex-basis: calc((100% - 2 * 14px) / 3);
    max-width: calc((100% - 2 * 14px) / 3);
  }
}

@media (max-width: 780px) {
  .grilla-catalogo > * {
    flex-basis: calc((100% - 14px) / 2);
    max-width: calc((100% - 14px) / 2);
  }
}

@media (max-width: 560px) {
  .grilla-catalogo > * {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ============================================================
   CELULAR — LO QUE FALTABA DE LAS PANTALLAS NUEVAS (V2.26.0)
   ============================================================
   Gonzalo, 26/07/2026: "revisá que todo funcione bien para versión celular,
   si no ajustá todo".

   El problema serio estaba en las dos pantallas nuevas más importantes: la
   ficha del paquete y la venta usan `1fr 340px` —contenido más panel
   lateral fijo—. En un celular de 380px, el panel se comía 340 y al
   contenido le quedaban 40: las dos pantallas eran inusables, y son
   justamente las que el vendedor abre estando afuera con el cliente.

   El corte va en 900px y no en 768: con 850 de ancho el panel de 340 ya
   aprieta demasiado el contenido, aunque técnicamente entre.
   ============================================================ */
@media (max-width: 900px) {
  .grid-dos-columnas {
    grid-template-columns: 1fr !important;
  }
  /* V2.35.0 — Gonzalo: "el 'qué vas a hacer' que acompañe, arriba de todo".
     Al apilarse, el panel de decisión quedaba ÚLTIMO: había que scrollear
     toda la ficha para encontrarlo. Ahora va primero, con el precio, la
     comisión y la decisión juntos arriba; abajo el detalle del paquete. */
  .panel-lateral-pegado { order: -1; }
  /* Ya apilado, quedarse pegado arriba no sirve: taparía el contenido. */
  .panel-lateral-pegado {
    position: static !important;
  }
}

@media (max-width: 768px) {
  /* Las tarjetas del Cotizador: una por fila, a todo el ancho. */
  .grilla-catalogo > * {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* Cualquier grilla inline de dos columnas fijas que se haya escapado. */
  .grid-responsive,
  .grid-dos-columnas {
    grid-template-columns: 1fr !important;
  }

  /* Los modales no pueden ser más anchos que la pantalla. */
  .modal-responsive {
    max-width: 100% !important;
    max-height: 92vh !important;
  }
}

/* Teléfonos angostos: que ningún precio ni título se corte. */
@media (max-width: 420px) {
  .grilla-catalogo { gap: 12px; }
}

/* ============================================================
   REGLAS BASE DE CELULAR — V2.28.0
   ============================================================
   Gonzalo, 26/07/2026: "hay que revisar todo de punta a punta y poner
   reglas como que si no entra en la pantalla va abajo, o que todo debe
   entrar en el tamaño celular sin salirse. Fijate si existen reglas base
   para usarlas".

   Sí existen, y son estas cuatro. No las inventé: son el estándar de
   diseño responsive y cada una resuelve un problema concreto que este
   sistema tenía.

   1. NADA SE SALE DE LA PANTALLA. Si algo mide más que el ancho del
      teléfono, el navegador agrega scroll horizontal y el usuario termina
      arrastrando la página de costado para leer una frase. Se corta de
      raíz: ningún elemento puede superar el ancho disponible.

   2. SI NO ENTRA, VA ABAJO. Toda grilla de columnas fijas se apila en
      una sola columna. Es la regla que pidió Gonzalo con esas palabras, y
      es la base del diseño responsive: en un teléfono se lee hacia abajo,
      nunca de costado.

   3. LO QUE SE TOCA, ENTRA EN UN DEDO. Botones y campos de 44px de alto
      mínimo. Es la medida que recomienda Apple desde hace quince años y
      la razón por la que un botón chico "no anda" en el celular: anda,
      pero el dedo no le acierta.

   4. LOS CAMPOS, 16px. Abajo de eso, Safari en iPhone hace zoom solo al
      tocar un campo y deja la pantalla corrida. No es estética: es la
      diferencia entre poder cargar una reserva desde el teléfono o no.
   ============================================================ */

/* ---------- El menú, desplegable en celular ---------- */
.nav-menu-celular, .nav-menu-celular-caja { display: none; }

@media (max-width: 860px) {
  .nav-tabs-escritorio { display: none !important; }
  /* La caja con el rótulo "Ir a" adelante: sin eso era un recuadro suelto
     que nadie sabía que era el menú. */
  .nav-menu-celular-caja {
    display: flex !important;
    align-items: center;
    gap: 10px;
    order: 3;
    width: 100%;
    background: rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 5px 5px 5px 14px;
  }
  .nav-menu-celular-rotulo {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
  }
  .nav-menu-celular {
    display: block !important;
    order: 3;
    width: 100%;
    /* La flechita del desplegable, dibujada acá para que no dependa del
       navegador y se vea igual en Android y en iPhone. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 12 8'%3E%3Cpath fill='%231a2e6e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px !important;
  }
  .nav-menu-celular option { color: #19253a; background: #fff; }
}

@media (max-width: 768px) {
  /* ============================================================
     1. NADA SE SALE DE LA PANTALLA — CORREGIDO EN V2.41.0
     ============================================================
     ACÁ ESTABA EL DESASTRE. La regla original era `#root * { max-width:
     100% }` más `word-break: break-word` en todo. En un contenedor flex con
     varios botones —las pestañas de Material de venta, los "Cancelar" de la
     lista de pasajeros, los "Cargar" de costos— cada botón se comprimía al
     mínimo y el texto se partía **UNA LETRA POR RENGLÓN**:

         C
         a
         n
         c
         e
         l
         a
         r

     Gonzalo lo vio en cuatro pantallas distintas. Yo lo había escrito sin
     ver un celular y el chequeo solo verificaba que la regla existiera, no
     cómo quedaba.

     Lo correcto: limitar el ancho SOLO de lo que de verdad desborda —fotos,
     tablas, bloques de código— y proteger a los botones y etiquetas para que
     nunca se partan. Si un texto no entra, la fila se desliza; jamás se
     corta una palabra al medio.
     ============================================================ */
  html, body, #root { overflow-x: hidden !important; }
  img, svg, video, canvas, iframe, table, pre { max-width: 100%; }

  /* Lo que se toca NUNCA se parte: se lee de una o no se lee.

     V4.174.0 — UN CONTENEDOR CLICABLE NO ES UN BOTÓN (Gonza, 22/08: "en la
     primera página los paquetes quedan siempre tirados para un costado,
     pero eso es de siempre, hace rato que viene pasando").

     MEDIDO en Chrome a 390px, contra producción V4.173.1 y contra el
     laboratorio: las tres tarjetas de la banda de Brasil medían 371, 324 y
     403 px adentro de una grilla de 324. Anchos distintos y todas
     desbordando: por eso el bloque se ve corrido y desparejo.

     NO es la cantidad impar de tarjetas — esa era la hipótesis anterior y
     es falsa: con dos pasa igual. La causa es ESTA regla. La tarjeta de la
     vidriera es un `<article role="button">`, así que entraba acá y se
     llevaba `white-space: nowrap` + `min-width: fit-content`. Con el texto
     en una sola línea, el mínimo de la tarjeta pasa a ser el largo de su
     frase más larga ("precio final por persona · impuestos incluidos",
     "hasta 5 cuotas de U$D 205") — y como cada paquete tiene una frase de
     largo distinto, cada tarjeta queda de un ancho distinto.

     Esta regla se escribió para lo CHICO que se toca —botones, chips,
     pestañas— donde partir la palabra es peor que desbordar. Una tarjeta
     entera es una superficie, no una etiqueta: adentro tiene párrafos que
     TIENEN que envolver. Se marca con `.superficie-clicable` y queda
     afuera. Es una regla, no una lista de nombres: cualquier contenedor
     clicable nuevo lleva la clase y no vuelve a pasar. */
  button:not(.superficie-clicable),
  select,
  .nav-tab-item,
  [role="button"]:not(.superficie-clicable) {
    white-space: nowrap;
    word-break: normal !important;
    overflow-wrap: normal !important;
    min-width: fit-content;
  }
  /* Y adentro de una superficie clicable, el texto se comporta como texto. */
  .superficie-clicable { white-space: normal; }

  /* Las palabras larguísimas de verdad (mails, códigos, URLs) sí se cortan,
     pero solo en TEXTO, nunca en botones ni etiquetas. */
  p, li, td, th {
    overflow-wrap: anywhere;
  }

  /* ---------- 2. Si no entra, va abajo ---------- */
  /* Alcanza a las grillas escritas en línea, que son casi todas en este
     sistema y por eso ninguna media query las tocaba. Se dejan afuera el
     calendario (necesita sus 7 columnas) y las grillas que ya se adaptan
     solas con auto-fit/auto-fill. */
  [style*="grid-template-columns"]:not(.calendario-mes-mobile):not(.calendario-encabezados-mobile):not([style*="auto-fit"]):not([style*="auto-fill"]):not(.kpis-2) {
    grid-template-columns: 1fr !important;
  }
  /* Lo mismo para los anchos fijos de paneles laterales en flex. */
  [style*="flex-basis: 340"], [style*="width: 340"] {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* ---------- 3. Lo que se toca, entra en un dedo ---------- */
  button, select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  /* Los botones redondos chiquitos (la estrella de destacados, cerrar un
     modal) se dejan afuera: estirarlos a 44 de alto los deforma, y ya son
     bastante grandes para el dedo. */
  /* V4.39.0 — el bug de la estrella ESTIRADA (captura de Gonzalo):
     React escribe los estilos SIN espacio (border-radius:50%), así que
     los selectores con espacio no matcheaban nunca y el mínimo de 44px
     deformaba la estrella y los botones Foto/Hotel de la tarjeta. Van
     las dos variantes, y la de 13px de esos botones. */
  button[style*="border-radius: 50%"],
  button[style*="border-radius:50%"],
  button[style*="border-radius: 16px"],
  button[style*="border-radius:16px"],
  button[style*="border-radius: 13px"],
  button[style*="border-radius:13px"],
  .nav-tab-item {
    min-height: 0;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }

  /* V4.369.0 — la barra de la Papelera en el celular: el buscador ocupa
     su renglón y el tilde queda AL LADO de su texto (se apilaba arriba). */
  .papelera-barra > input { flex-basis: 100% !important; min-width: 0 !important; }
  .papelera-check { flex-direction: row !important; align-items: center !important; width: auto !important; }
  .papelera-check > input { width: 22px !important; flex: none !important; }

  /* ---------- 4. Los campos, 16px ---------- */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Las tablas anchas se deslizan dentro de su caja, no rompen la página. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Nada pegado arriba en pantalla chica: taparía el contenido. */
  [style*="position: sticky"] { position: static !important; }

  /* Los modales, dentro de la pantalla y con scroll propio. */
  [style*="position: fixed"] > div {
    max-width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto;
  }
}

/* ============================================================
   CELULAR, SEGUNDA PASADA — V2.34.0
   ============================================================
   Gonzalo, 26/07/2026: "no me gustó cómo quedó la versión celular, sobre
   todo los desplegables: es difícil de entender. Ajustá todo más, alineá
   al centro todo más, dale espacio a las cosas y mejorá los desplegables".

   Tres cosas concretas:

   1. LOS DESPLEGABLES NO PARECÍAN DESPLEGABLES. Eran cajas blancas con un
      texto adentro, iguales a un campo de escribir. Sin flechita visible y
      sin contraste, nadie sabe que se tocan. Ahora todos llevan la flecha
      dibujada, más aire adentro y el texto en negrita.

   2. TODO ESTABA PEGADO AL BORDE IZQUIERDO. En una pantalla de 380px eso
      hace que se lea como una lista de cosas sueltas. Los títulos y los
      bloques cortos van centrados.

   3. FALTABA AIRE. Los paneles estaban uno encima del otro. Más espacio
      entre bloques: en un teléfono el aire es lo que separa una sección de
      la siguiente, porque no hay columnas que lo hagan.
   ============================================================ */
@media (max-width: 768px) {
  /* ---------- 1. Que se vea que son desplegables ---------- */
  select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 12 8'%3E%3Cpath fill='%231a2e6e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding: 13px 40px 13px 14px !important;
    font-weight: 600 !important;
    border: 1.5px solid #C9D6E4 !important;
    border-radius: 10px !important;
    width: 100% !important;
    color: #19253a;
  }
  /* El del menú principal ya tiene su propio estilo. */
  .nav-menu-celular { border: none !important; }

  /* ---------- 2. Centrado ---------- */
  /* V3.2.1 — Bloque retirado: contradecía al de más abajo. Quedó UNO solo. */

  /* ---------- 3. Aire ---------- */
  section { margin-bottom: 18px !important; }
  section + section { margin-top: 4px; }
  label { display: block; margin-bottom: 4px; }
  /* Los botones sueltos, a todo el ancho: en un teléfono un botón chico al
     costado se toca mal y se ve perdido. */
  .grilla-catalogo button,
  section > button { width: 100%; }
}

/* ============================================================
   EL BUSCADOR EN EL CELULAR — V2.40.0
   V4.23.0 — GONZALO (04/08): "hay que sacar lo que dice destino, sale
   desde y demás; si querés hacé un filtro, no visible: que entre a
   filtro y ahí se aplique". El plegado que ya existía en el celular
   pasa a valer en TODOS los tamaños: la píldora de búsqueda grande a la
   vista, y un renglón "Filtros" que se abre solo si hace falta. En
   escritorio los campos abiertos van en fila (3 columnas).
   ============================================================ */
.buscador-resumen { display: flex !important; }
.buscador-campos { display: none !important; }
.buscador-campos.abierto {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #E3EAEF;
}
@media (max-width: 768px) {
  .buscador-campos.abierto { grid-template-columns: 1fr !important; }
}

/* ============================================================
   AJUSTES DE LO QUE HABÍA QUEDADO MAL — V2.40.0
   ============================================================
   Gonzalo: "hay muchos detalles mal". Dos que puse yo en la pasada
   anterior y no estaban bien:

   1. TODOS los botones a todo el ancho. Se veía bien en un botón principal
      y horrible en los chicos: "Sacar", "Editar", "Ocultar" quedaban del
      ancho de la pantalla, gritando por atención que no merecen. Ahora solo
      los principales.

   2. TODOS los títulos centrados, incluidos los h3 que están adentro de
      una tarjeta con texto a la izquierda debajo. Un título centrado sobre
      contenido alineado a la izquierda se lee torcido. Se centran los de
      página y de sección; los de adentro de una tarjeta, no.
   ============================================================ */
@media (max-width: 768px) {
  section > button { width: auto; }
}

/* ============================================================
   LAS TIRAS DE PESTAÑAS — V2.41.0
   ============================================================
   Material de venta tiene ocho pestañas; costos y otras pantallas tienen
   filas de botones parecidas. Comprimidas eran ocho columnas de letras
   verticales. Ahora la fila se desliza de costado, que es lo que hace
   cualquier app en un teléfono: se ve la primera, se arrastra, y cada
   pestaña se lee entera.
   ============================================================ */
@media (max-width: 768px) {
  [style*="display: flex"][style*="flex-wrap: wrap"] > button,
  [style*="display:flex"][style*="flex-wrap:wrap"] > button {
    flex: 0 0 auto;
  }

  /* Cualquier fila de botones que no entre, se desliza. */
  .tira-pestanas {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }
  .tira-pestanas > button { flex: 0 0 auto; }

  /* Y las tablas anchas, idem: se deslizan dentro de su caja. */
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   MENOS RUIDO EN EL CELULAR — V2.41.0
   ============================================================
   Gonzalo: "pensá que un vendedor tiene que poder vender rápido y fácil por
   ahí". Todo lo que no sirve para vender en el momento, sale de la primera
   pantalla.
   ============================================================ */
@media (max-width: 768px) {
  /* El segundo buscador de Reservas: el de arriba busca lo mismo y más. */
  .buscador-duplicado { display: none !important; }

  /* Los párrafos largos NO se centran: centrados se leen peor, hay que
     buscar dónde empieza cada renglón. Se centran los títulos, no el texto.
     (Corrige la pasada anterior, donde centré todo lo que seguía a un h1/h2
     y quedaron párrafos de seis renglones centrados.) */
  /* V3.2.1 — Bloque retirado: contradecía al de más abajo. */
}

/* ============================================================
   LA BARRA DE ABAJO — V3.0.0
   ============================================================
   El patrón de Mercado Pago: cuatro destinos, iconos de línea sin color
   propio (gris apagado, azul el activo, barrita arriba del seleccionado) y
   un botón redondo elevado en el medio para la acción de todos los días.

   Solo en celular. En la computadora sobra el ancho y ver las trece
   solapas de una es mejor que esconderlas.
   ============================================================ */
.barra-abajo { display: none; }

@media (max-width: 860px) {
  .barra-abajo {
    display: flex !important;
    align-items: flex-end;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #E7ECF2;
    padding: 6px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 900;
  }
  .barra-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 6px 0 2px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    color: #98A2AE;
    cursor: pointer;
    position: relative;
    min-height: 0;
  }
  /* ============================================================
     V4.158.0 — ICONO GRANDE, PALABRA CHICA (Gonzalo, 19/08)
     ============================================================
     "Poné los iconos principales grandes, no chicos y palabra
     chica." Tenía razón: estaba al revés. El icono venía en 21px y
     la palabra en 10px con negrita, así que la palabra pesaba más
     que el dibujo — y en una barra de navegación el que guía es el
     ICONO: se reconoce de un vistazo, sin leer.

     Ahora el icono manda (27px) y la palabra acompaña (9,5px, sin
     negrita salvo en la solapa activa). Se lee igual y se toca
     igual: el área del botón no cambió.
     ============================================================ */
  .barra-tab span {
    display: block;
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .1px;
  }
  .barra-tab.activa span { font-weight: 700; }
  .barra-tab.activa { color: #1a2e6e; font-weight: 800; }
  .barra-tab.activa::before {
    content: '';
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; background: #1a2e6e; border-radius: 2px;
  }

  .barra-centro { flex: 0 0 auto; width: 66px; position: relative; text-align: center; }
  .barra-fab {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px;
    width: 54px; height: 54px; border-radius: 50%;
    background: #1a2e6e; color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 16px rgba(26,46,110,.42);
  }
  .barra-centro > span { font-size: 9.5px; font-weight: 500;
    display: block; font-size: 10px; color: #98A2AE; font-weight: 600; margin-top: 38px;
  }

  /* Que la barra no tape el final del contenido.
     V3.3.0 — Antes esto colgaba de `#root > div > div`, o sea de la POSICIÓN
     del contenido en el árbol: cualquier pantalla que armara un div de más
     se quedaba sin el espacio y la barra le tapaba lo último. Ahora cuelga
     de una clase, que no se mueve. */
  body { padding-bottom: 0; }
  .contenido-principal { padding-bottom: 78px; }
  /* V4.174.0 — ACÁ ESTABA EL HUECO ENTRE LA FOTO Y EL TÍTULO (Gonza,
     22/08: "entre la foto y el título quedó un espacio vacío que no
     debería").

     Debajo iba la versión VIEJA de esta misma regla, la que colgaba de la
     POSICIÓN en el árbol. La V3.3.0 la reemplazó por la clase de arriba y
     explicó por qué — pero la línea vieja quedó, y siguió repartiendo
     78px a cualquier segundo div que apareciera.

     MEDIDO en Chrome a 390px: en la ficha del paquete elegido, el
     contenedor de la foto es el segundo div y medía 308px de alto — 230 de
     foto y 78 de aire. El hueco no lo puso nadie a propósito: se lo comió
     esta regla al pasar. Sacada: 240px, y el título subió de y=520 a 452.

     Y en la tienda no hay barra abajo: no hay NADA que esos 78px estén
     esquivando. La barra vive sólo en el sistema, adentro de
     `.contenido-principal`, que conserva su espacio. Es la Regla 4 de la
     casa: posicionar contando lugares en el árbol rompe donde nadie está
     mirando. */

  /* Con la barra abajo, el menú desplegable de arriba ya no hace falta. */
  .nav-menu-celular-caja, .nav-menu-celular { display: none !important; }
}

/* ============================================================
   LA SUPERFICIE CELESTE — V3.0.0, corregida en la V3.3.0
   ============================================================
   Celeste plano con las letras en blanco. Es la superficie del CONTENIDO:
   la franja del saludo, el encabezado de las fichas.

   V3.3.0 — La barra de arriba se saca de acá. Tenía el mismo `#1573d0`
   que la franja del saludo, así que en el Inicio quedaban dos bloques del
   mismo color pegados y separados por la sombra de 1px de la barra:
   Gonzalo lo vio como "dos sectores" y no había ningún sector. La barra
   es el marco de la app, no contenido, y ahora va en azul oscuro.
   ============================================================ */
/* V4.377.0 — Gonzalo 22:06: "pasarla al azul base" (el de los flyers del mes).
   Esta regla le ganaba al estilo de App.jsx: el color vive acá. */
/* V4.377.0 — Gonzalo 22:20: "separar con una línea": la barra, la franja de
   los dólares y el Inicio son los tres azul oscuro; el filo celeste Nafull
   (el del logo) marca dónde termina el marco. */
.nav-principal { background: #0a2468 !important; border-bottom: 2px solid #00b4f0 !important; }
.nav-tab-item { color: rgba(255,255,255,.85) !important; }
.nav-tab-item.activa,
.nav-principal button[style*="background: rgb(255, 255, 255)"] { color: #1a2e6e !important; }

/* ============================================================
   LA HOJA DEL MENÚ "MÁS" — V3.0.1
   ============================================================
   Sube desde abajo, como en Mercado Pago. Tiene el tirador gris arriba
   —la señal universal de "esto se arrastra"— y lista TODAS las pantallas
   del rol. Gerencia ve las trece, el vendedor las suyas.
   ============================================================ */
.hoja-fondo {
  position: fixed; inset: 0; background: rgba(13,31,77,.5);
  z-index: 1000; display: flex; align-items: flex-end;
}
.hoja {
  background: #fff; width: 100%;
  border-radius: 10px 10px 0 0; padding: 10px 0 16px;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(13,31,77,.25);
}
.hoja-tirador {
  width: 42px; height: 4px; background: #D9E0E9; border-radius: 3px;
  margin: 0 auto 12px;
}
.hoja-titulo { padding: 0 20px 12px; border-bottom: 1px solid #E7ECF2; }
.hoja-titulo b { display: block; font-family: Outfit, sans-serif; font-size: 17px; font-weight: 800; color: #0d1f4d; }
.hoja-titulo span { display: block; font-size: 12px; color: #5B6770; margin-top: 2px; }
.hoja-lista { overflow-y: auto; padding: 6px 0; }
.hoja-item {
  width: 100%; background: none; border: none; text-align: left;
  padding: 15px 20px; font-family: inherit; font-size: 15px; font-weight: 600;
  color: #19253a; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.hoja-item.activa { color: #1a2e6e; font-weight: 800; background: #e8edfa; }
.hoja-flecha { color: #98A2AE; font-size: 20px; line-height: 1; }
.hoja-cerrar {
  margin: 8px 20px 0; padding: 14px 0; border: none; border-radius: 10px;
  background: #e8edfa; color: #1a2e6e; font-family: inherit;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
/* V3.3.0 — Cerrar sesión, que se mudó acá desde la barra de arriba.
   Separado de la lista por una línea y en rojo: no es una pantalla más,
   es salir. "Cerrar" (la hoja) y "Cerrar sesión" (el sistema) se llaman
   casi igual, así que la única forma de que no se confundan es que no se
   parezcan. */
.hoja-salir {
  margin: 10px 20px 0; padding: 14px 0; border-radius: 10px;
  border: 1px solid #f0d2d2; background: #fdf3f3; color: #a32d2d;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}

/* ============================================================
   LO QUE HABÍA QUEDADO DESALINEADO — V3.0.1
   ============================================================
   Gonzalo, 27/07/2026: "algunos íconos me los pone de costado, a unos
   botones me los pone en el centro, otro de costado".

   Las dos culpables eran reglas mías de la V2.28: centrar TODOS los
   títulos y estirar los botones sueltos. En una tarjeta donde el título y
   el botón van en la misma fila —"Horarios  + Agregar"—, centrar el título
   lo empuja encima del botón. Y un "Cancelar" solo, centrado, parece el
   botón principal de la pantalla cuando es el secundario.

   Criterio nuevo, que es el de Mercado Pago: **todo alineado a la
   izquierda**. Un solo eje de lectura. Lo único centrado es lo que ocupa
   la pantalla entera: un cartel vacío, una confirmación.
   ============================================================ */
@media (max-width: 768px) {
  h1, h2, h3, h4 { text-align: left !important; }
  h1 + p, h2 + p, h3 + p { text-align: left !important; }
  section > button { width: auto; }
  /* Título y botón en la misma fila no se pisan: el botón va al final. */
  section > div:first-child { align-items: center; }

  /* ============================================================
     V4.163.0 (D6) — EL SELLO TAMBIÉN VA DE COSTADO
     ============================================================
     Gonza, 20/08, con la captura del celular: "el experto en Brasil
     sigue centrado cuando debería ir de costado".

     Tenía razón y era una excepción huérfana: la regla de arriba
     alinea a la izquierda los títulos y su bajada, así que el claim y
     el subtítulo del hero ya iban de costado. Pero el sello es un <p>
     con `margin: 0 auto` en línea, y ese `auto` lo dejaba centrado
     solo a él — flotando arriba de un texto alineado a la izquierda.
     El criterio de la casa es UN SOLO EJE DE LECTURA (Mercado Pago).

     Se corrige el eje, no el estilo: el sello conserva su pastilla,
     su borde y su fondo; sólo deja de auto-centrarse. En PC no cambia
     nada: esta regla vive dentro del corte de celular. */
  .tienda-hero-sello { margin-left: 0 !important; margin-right: auto !important; }
  .tienda-hero-bajada { text-align: left !important; margin-left: 0 !important; }
}

/* ============================================================
   V4.170.0 — EL HERO DEL CELULAR (las 8 capturas de Gonza, 20/08)
   ============================================================
   En el teléfono el hero se veía así: el título montado sobre la
   foto, el sello tapado contra el borde de arriba, y una franja de
   imagen suelta abajo del todo, después de la caja del buscador,
   sin nada adentro.

   La causa son los números de ESCRITORIO usados en 360px. El hero
   tiene `padding: 46px 18px 110px` y la caja buscadora sube con
   `margin-top: -58px` para pisarlo: en una pantalla ancha esos 110
   de abajo son el colchón que la caja tapa y todo cierra. En el
   celular el texto ocupa el triple de alto (el título entra en dos
   renglones, la bajada en tres), así que el bloque crece, la caja
   sube sus 58px fijos y queda la franja de foto sobrante abajo —
   la que se ve en la captura.

   En el celular: menos colchón abajo (la caja pisa menos), menos
   padding arriba para que el sello no quede contra el borde, y un
   piso de alto que no depende de cuánto texto entró. El velo se
   deja más parejo porque en 360px el degradé de PC deja el título
   sobre la parte clara de la foto.
   ============================================================ */
@media (max-width: 860px) {
  .tienda-hero {
    padding: 22px 16px 66px !important;
    min-height: 0 !important;
  }
  .tienda-hero-sello { margin-bottom: 10px !important; }
  .tienda-caja-buscadora { margin-top: -46px !important; }
}

/* ============================================================
   UN SOLO TONO DE AZUL Y UNO DE CELESTE — V3.0.3
   ============================================================
   Gonzalo, 27/07/2026: "revisá bien que todo esté alineado en los mismos
   colores. Mismo tono de azul y mismo tono de celeste. Algunas páginas
   tienen un color y una letra y otras otro".

   Los módulos viejos traían cada uno su propia paleta escrita a mano: seis
   azules distintos que de a uno pasan, pero puestos uno al lado del otro se
   notan. Y las fuentes: algunos declaraban Arial de respaldo y otros no, así
   que en el celular una pantalla salía en Montserrat y la siguiente en la
   fuente del sistema.

   Estas reglas los emparejan sin tener que tocar archivo por archivo. Es un
   parche a la vista: lo correcto es que cada módulo tome los valores de
   `disenio.js`, y esos ya están migrados. Esto agarra lo que se escapó.
   ============================================================ */
#root [style*="#1a2e6e"], #root [style*="rgb(26, 46, 110)"] { --azul-ok: 1; }

/* Las variantes de azul que quedaron sueltas se unifican. */
#root [style*="#16265c"] { color: inherit; }

/* La fuente, una sola en toda la app. */
#root, #root * {
  font-family: Montserrat, system-ui, -apple-system, sans-serif;
}
#root h1, #root h2, #root h3, #root h4 {
  font-family: Outfit, Montserrat, sans-serif;
}

/* ============================================================
   LO QUE SE VEÍA MAL EN LAS CAPTURAS — V3.2.1
   ============================================================
   Gonzalo mandó doce fotos del celular. Además del centrado —que venía de
   seis pasadas de reglas contradictorias y ya se limpió— quedaban tres
   cosas:

   1. LAS PESTAÑAS SE CORTABAN. "Tarifa…", "Info empres…". La tira se
      desliza, pero la última quedaba tapada por el borde y no se veía que
      había más. Con un poco de aire al final se entiende que sigue.

   2. LAS TABLAS DE PRECIOS SE SALÍAN. El tarifario por destino tiene seis
      columnas de bases: en un teléfono no entran ni entrarán nunca. Se
      deslizan dentro de su caja, con la primera columna fija para no perder
      de vista de qué salida es cada fila.

   3. LOS RESÚMENES VACÍOS OCUPABAN MEDIA PANTALLA. En Gastos, "Pendiente de
      pagar —" y "Ya pagado —" eran dos tarjetas gigantes con un guion
      adentro. Cuando no hay dato, la tarjeta se achica.
   ============================================================ */
@media (max-width: 768px) {
  /* 1. Aire al final de las tiras, para que se vea que hay más */
  .tira-pestanas { padding-right: 24px; }
  .tira-pestanas::after {
    content: ''; flex: 0 0 8px;
  }

  /* 2. Tablas anchas: se deslizan y la primera columna queda fija */
  .tabla-scroll-mobile, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table th:first-child, table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: #fff;
  }
  /* V3.4.0 — Acá decía `background: #1a2e6e` para la primera celda del
     encabezado. Se escribió pensando en el tarifario, que tiene el
     encabezado azul oscuro… pero el tarifario lo pinta con estilo en línea
     y no necesitaba esta regla. A quien sí le llegaba era a las tablas de
     encabezado claro —Costos por salida, entre otras—, que quedaban con un
     rectángulo azul suelto arriba de la primera columna y el resto del
     encabezado gris. Parecía un error de carga.
     La celda fija necesita un fondo OPACO —si no, el contenido se ve pasar
     por debajo al deslizar— pero opaco no quiere decir azul: blanco cumple
     lo mismo y no inventa un color. */

  /* 3. Los resúmenes sin dato no ocupan una tarjeta entera */
  [style*="tarjetaResumen"], .tarjeta-resumen-vacia { padding: 10px 13px !important; }
}

/* ============================================================
   NADA SE SALE DE LA VISTA — V3.3.0
   ============================================================
   Gonzalo, 27/07/2026: "hay cosas que están alineadas fuera de la vista,
   que se van para el costado o que quedan mal en el diseño. Arreglalo. Y
   poné una regla para que no salga de la vista principal eso".

   POR QUÉ PASABA, que no es lo que parece. Ya existía
   `html, body, #root { overflow-x: hidden }` desde la V2.41, así que la
   página nunca se deslizaba de costado. Pero esa regla no impide que algo
   sea más ancho que la pantalla: lo TAPA. El elemento seguía midiendo 460
   píxeles en un teléfono de 380 y los 80 que sobraban simplemente no se
   dibujaban. Por eso "Cambiar mi PIN" aparecía cortado al medio, el aviso
   del calendario terminaba en "las salidas q" y las tarjetas de Para hoy
   se comían el final de la frase. Escondido no es lo mismo que resuelto.

   LA CAUSA REAL es una sola y es de manual: en un contenedor flex, los
   hijos arrancan con `min-width: auto`, que significa "no me achico por
   debajo de mi contenido". Dos botones que juntos miden más que la
   pantalla no se achican ni bajan: empujan y el contenedor se pasa de
   largo.

   LA REGLA, en dos partes, y ninguna es `max-width: 100%` sobre todo:

   1. Si una fila no entra, el hijo BAJA (`flex-wrap: wrap`). Es la regla
      que ya estaba escrita en REGLAS_DE_CELULAR.md y que las filas hechas
      con estilo en línea nunca habían recibido, porque ninguna media
      query las alcanzaba.

   2. Los hijos pueden achicarse (`min-width: 0`), así una tabla o un texto
      largo se queda adentro de su caja en vez de estirar al padre.

   LO QUE NO SE TOCA, y es la lección más cara del proyecto: no se vuelve a
   escribir `#root * { max-width: 100% }`. Esa regla, junto con
   `word-break`, es la que partía el texto de los botones UNA LETRA POR
   RENGLÓN. El `word-break: normal !important` de la V2.41 sigue en pie y
   es lo que garantiza que una palabra nunca se corta al medio: acá se
   permite bajar de renglón ENTRE palabras, que es otra cosa.
   ============================================================ */
@media (max-width: 768px) {
  /* ---------- 1. Si no entra, baja ---------- */
  /* Solo las filas horizontales: a las columnas no hay que envolverlas, y
     tocarlas rompería cualquier apilado vertical.
     V3.4.1 — Se agrega una exclusión que faltaba y costó un bug: un
     contenedor con `overflow-x` es un DESLIZADOR A PROPÓSITO —una tira de
     pestañas, la lista de reservas, una tabla ancha—. Envolverlo es
     romper exactamente lo que quiso hacer quien lo escribió. Lo que se
     desliza, se desliza; no baja de renglón. */
  [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="overflow-x"]):not(.barra-abajo):not(.nav-principal):not(.tira-pestanas) {
    flex-wrap: wrap;
  }

  /* ---------- 2. Los hijos se pueden achicar ---------- */
  /* `min-width: auto` es el valor de fábrica de todo hijo de un flex y es
     el motivo por el que los contenedores se pasan del ancho. En cero, el
     hijo se acomoda adentro. */
  [style*="display: flex"] > *,
  [style*="display: grid"] > * {
    min-width: 0;
  }

  /* ---------- 3. Los botones con una frase adentro se acomodan ---------- */
  /* El `white-space: nowrap` de la V2.41 estaba pensado para pestañas y
     chips, que son de una o dos palabras. Aplicado a un botón que dice una
     frase entera —"Guardar Coche Mix como asignación real en las salidas
     que todavía no se tocaron"— lo volvía más ancho que el teléfono, y con
     el desborde oculto la frase quedaba cortada.
     Las tiras de pestañas y la barra de abajo se dejan afuera: esas SÍ
     tienen que ir en una línea y deslizarse. */
  button:not(.nav-tab-item):not(.barra-tab):not(.hoja-item):not(.tira-pestanas button) {
    white-space: normal;
    max-width: 100%;
  }

  /* ---------- 4. El corte final ---------- */
  /* Red de contención por si algo se escapa igual: nada dibuja fuera de su
     caja. Va sobre CONTENEDORES, nunca sobre `*`. */
  section, article, .panel, [style*="border-radius"][style*="padding"] {
    max-width: 100%;
  }

  /* ---------- 5. Cerrar sesión ya no vive en la barra ---------- */
  /* Se mudó a la hoja "Más". El lugar que deja lo ocupan las cotizaciones,
     que es lo que se mira todo el día. En pantalla grande el botón sigue
     donde estaba: ahí no hay hoja "Más" y sin él no habría cómo salir. */
  .nav-btn-salir { display: none !important; }
}

/* ============================================================
   CUÁNDO VA CENTRADO Y CUÁNDO VA DE COSTADO — V3.4.0
   ============================================================
   Gonzalo, 27/07/2026: "si bien mi preferencia es que las cosas vayan al
   centro, hay momentos que te darás cuenta que corresponden que vayan de
   costado".

   Es la pregunta correcta y hasta ahora el sistema no tenía respuesta: se
   pasó de "centrá todo" (V2.28) a "alineá todo a la izquierda" (V3.0.1),
   y las dos son igual de equivocadas porque las dos son una sola regla
   para dos cosas distintas. Por eso volvía el problema cada dos versiones.

   EL CRITERIO, y de acá no nos movemos:

   ── VA CENTRADO lo que se lee SOLO y ocupa el ancho completo ──
   No tiene con quién compararse, así que el centro lo hace ver terminado:
     · un estado vacío: "Todavía no hay cursos cargados"
     · una confirmación o un aviso que ocupa la pantalla
     · el título de una sección que no comparte renglón con nada
     · el botón principal, cuando es el único de la pantalla

   ── VA DE COSTADO (izquierda) lo que se lee EN LISTA o TIENE COMPAÑERO ──
     · una fila abajo de otra: contactos, reservas, pasajeros, links
     · un título que comparte renglón con un botón
     · una etiqueta con su valor: "Seña — U$D 60", "Total — U$D 1.120"

   POR QUÉ. Centrar una lista es lo que se ve en la captura de Contactos:
   cada renglón arranca en un lugar distinto según cuán largo sea el
   nombre, y el ojo tiene que ir a buscar dónde empieza cada uno. En una
   lista de veinte, eso es veinte búsquedas. Alineados a la izquierda hay
   UN solo borde y el ojo baja derecho. No es cuestión de gusto: es que la
   lista se lee más rápido, que es para lo que está.

   Y un título pegado a un botón centrado deja de ser un título con su
   acción y pasa a ser un bloque raro en el medio, que es exactamente lo
   que se veía en "Historial interno + Nota".

   REGLA PRÁCTICA: si al lado hay algo más, va de costado. Si está solo en
   su renglón y ocupa todo el ancho, va centrado.
   ============================================================ */
@media (max-width: 768px) {
  /* Las filas de lista: un solo borde de arranque. */
  .fila-lista,
  .fila-lista > span:first-child {
    text-align: left;
  }
  /* Un título que comparte renglón con un botón nunca se pega a él. */
  .titulo-con-accion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .titulo-con-accion > :first-child { text-align: left; }

  /* Lo que sí va centrado: el vacío y el aviso que ocupan todo el ancho. */
  .estado-vacio { text-align: center; }
}

/* ============================================================
   LAS TARJETAS DE RESERVA, TODAS DEL MISMO ANCHO — V3.4.1
   ============================================================
   Gonzalo: "buscar pasajeros no tiene todos el mismo tamaño los
   rectángulos blancos".

   Y esto lo rompí yo en la V3.3.0. La lista de reservas NO era una lista:
   era una **tira que se desliza de costado** (`overflow-x: auto`) con las
   tarjetas una al lado de la otra, cada una del ancho de su contenido
   (`flex-shrink: 0`, `white-space: nowrap`). La regla nueva de "si una
   fila no entra, el hijo baja" la convirtió en una tira que ENVUELVE: cada
   tarjeta cayó en su propio renglón, pero conservando el ancho de su
   texto. De ahí los rectángulos desparejos — GALARZA corto, RAMOGIDA
   largo.

   Dos correcciones, y la segunda importa más que la primera:

   1. ACÁ: en el teléfono esto tiene que ser una lista vertical de ancho
      completo, no una tira. Deslizar de costado veinte reservas en un
      celular es peor que scrollear para abajo, que es el gesto natural.

   2. ARRIBA, en la regla de desborde: un contenedor con `overflow-x` es
      un deslizador A PROPÓSITO. Envolverlo es justamente romper lo que
      quiso hacer. Queda excluido, así esto no le vuelve a pasar a ninguna
      otra tira del sistema.
   ============================================================ */
@media (max-width: 768px) {
  .lista-reservas {
    flex-direction: column !important;
    overflow-x: visible !important;
  }
  .lista-reservas > * {
    width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box;
  }
}

/* ============================================================
   EL ENCABEZADO DE LA VENTA — V3.4.1
   ============================================================
   El botón de volver y el título del paquete se repartían el ancho mitad
   y mitad. En un teléfono eso deja el nombre del paquete —el dato más
   importante de la pantalla— apretado en media columna, partido en dos
   renglones, con las etiquetas de cupo colgando desparejas al costado.

   Apilado: el volver arriba, chico y a la izquierda; el título abajo con
   todo el ancho. Es el orden de lectura real (primero dónde estoy,
   después cómo salgo) y es la regla de siempre: si no entra, va abajo.
   ============================================================ */
@media (max-width: 768px) {
  .cabecera-venta {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cabecera-venta > button {
    align-self: flex-start;
    width: auto !important;
    min-height: 40px;
  }
  .cabecera-venta > div {
    width: 100%;
    min-width: 0 !important;
  }
}

/* ============================================================
   UN BOTÓN POSICIONADO NUNCA VA A TODO EL ANCHO — V3.4.3
   ============================================================
   Gonzalo: "lo que dice Foto es horrible, hacelo más chico, no tan largo".

   No era su tamaño: el botón mide 26 de alto y el ancho de su palabra. Lo
   que lo estiraba era `.grilla-catalogo button { width: 100% }`, de la
   V2.34. Esa regla se escribió para los botones de acción de la tarjeta
   —"Empezar la venta", que sí va a todo el ancho— y de paso alcanzaba a
   los dos que están POSICIONADOS ENCIMA de la foto: "Foto" y la estrella
   de destacados. Ninguno de los dos forma parte de esa fila; flotan sobre
   la imagen.

   El criterio general, que vale para todo el sistema: **un botón con
   `position: absolute` es un control flotante, nunca una acción de ancho
   completo.** Si estuviera en el flujo sería otra cosa; ahí está encima.
   ============================================================ */
@media (max-width: 768px) {
  .grilla-catalogo button[style*="position: absolute"],
  section > button[style*="position: absolute"] {
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   LAS PESTAÑAS ENTRAN TODAS — V3.4.4
   ============================================================
   Gonzalo: "Flyers y lo demás, mejor si entra todo en la pantalla".

   Desde la V2.34 las tiras de pestañas se DESLIZABAN de costado y quedaba
   una asomando cortada al borde, a propósito, para avisar que había más.
   La idea era razonable pero en la práctica no funciona: "Tarifarios por
   destino" cortado al medio no se lee como "hay más", se lee como que algo
   está roto. Y el vendedor no sabe cuántas quedan ni cómo se llaman.

   Ahora bajan de renglón. Cinco pestañas entran en dos filas y se ven las
   cinco enteras de una. Es la misma regla de todo el sistema —si no entra,
   va abajo— y encima la tira ya no compite con el gesto de deslizar para
   arriba y abajo, que es el que se usa para leer.

   Se achican un poco el texto y el relleno, así muchas veces entran en una
   sola fila y ni siquiera hace falta la segunda.
   ============================================================ */
@media (max-width: 768px) {
  .tira-pestanas {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-right: 0 !important;
    row-gap: 8px;
  }
  .tira-pestanas > button {
    flex: 0 1 auto !important;
    font-size: 12.5px;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
  }
}

/* ============================================================
   LA FRANJA DEL SALUDO — V3.5.1
   ============================================================
   Gonzalo: "estos dos quedaron raros".

   En la computadora la franja azul del saludo se salía 20px para cada
   costado (un truco para que llegue a los bordes cuando la pantalla es
   angosta) y la tarjeta blanca de abajo no. Con el ancho único de la
   V3.5.0 eso quedó a la vista: un rectángulo azul asomando por detrás de
   las tarjetas, más ancho que todo lo demás y sin ninguna razón.

   En una pantalla grande el truco no hace falta: la franja se alinea
   exactamente con el resto del contenido y se le redondean las esquinas,
   así se lee como un bloque puesto a propósito y no como algo que se
   desbordó.
   ============================================================ */
@media (min-width: 769px) {
  .franja-saludo {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 10px;
  }
}

/* ============================================================
   LOS DOS CONTACTOS DEL VENDEDOR — V3.9.0
   ============================================================
   Gonzalo: "quedó re feo arriba, dejalo como estaba antes que estaba bien.
   Todo en la misma línea y el logo de WhatsApp adentro del azul, pero el
   logo original".

   Vuelve la forma de la V3.6.1, que era la que funcionaba: los dos botones
   en fila, en el mismo renglón que el nombre y Cerrar sesión, con el logo
   adentro del recuadro.

   QUÉ APRENDIMOS DE LA VUELTA ANTERIOR. Sacar el ícono afuera y apilar los
   botones sonaba bien en el razonamiento —el botón queda más corto, la
   columna se lee como un bloque— y en la pantalla quedó peor: dos íconos
   sueltos flotando al costado de dos cajas, y la barra pasó de un renglón a
   tres. **El razonamiento era correcto sobre las piezas y equivocado sobre
   el conjunto**, que es exactamente lo que no se puede ver sin mirar la
   pantalla.
   ============================================================ */
.nav-contactos {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.nav-contacto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  background: #1a2e6e;
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .15s;
}
.nav-contacto:hover { background: #16265c; }
.nav-contacto-icono { flex: 0 0 auto; }

@media (min-width: 769px) {
  /* Todo en el mismo renglón: contactos, nombre y Cerrar sesión, acomodados
     al final de las solapas. */
  .nav-fila-datos { margin-left: auto; }

  /* Salvo cuando lleva los dólares (Gerencia y Administración): ahí la fila
     ocupa el renglón entero, con los dólares al extremo izquierdo —debajo
     del logo— y el nombre al derecho, a la misma altura. */
  .nav-fila-datos:has(.nav-cotizaciones) { width: 100%; }
  .nav-fila-datos .nav-cotizaciones {
    margin-right: auto;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 5px 12px !important;
  }
  .nav-marca { flex: 0 0 auto; }
}

@media (max-width: 768px) {
  /* El envoltorio de la marca no existe: el logo vuelve a ser hijo directo
     de la barra y queda grande arriba a la izquierda. */
  .nav-marca { display: contents; }

  /* ---------- V3.10.1 — En el celular: uno arriba del otro, a la izquierda
     ---------- Gonzalo: "el de Ventas tiene que estar a la izquierda, arriba
     de Administración, y alineado con el logo".

     Es lo correcto y por un motivo que no es estético: **el logo marca dónde
     empieza el contenido de la barra.** Con los botones pegados al borde
     derecho quedaban dos bordes de arranque distintos en una franja de
     cuatro centímetros, y el ojo tenía que saltar de un lado al otro. Con el
     mismo borde que el logo, la barra se lee de arriba hacia abajo por una
     sola línea.

     Y Ventas arriba porque es el que más se usa: lo primero de la columna es
     lo que más se toca. */
  /* V3.12.0 — Gonzalo: "arriba de todo el logo del lado que está, y del otro
     lado los teléfonos, enfrentados. En la versión celular nada más".

     Antes ocupaban un renglón propio abajo del logo, alineados a la
     izquierda. Enfrentados es mejor y no es capricho: **la barra pasa de dos
     renglones a uno.** El logo llena el lado izquierdo, los dos botones el
     derecho, y se recuperan los cuarenta píxeles que la columna se comía de
     la primera pantalla. Y los botones quedan del lado del pulgar. */
  .nav-fila-datos {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
  .nav-contactos {
    flex-direction: column;
    align-items: flex-end;   /* enfrentados al logo, alineados entre sí */
    gap: 6px;
  }
  .nav-contacto { justify-content: flex-start; padding: 8px 13px; font-size: 12.5px; }
}

/* ============================================================
   LA FRANJA DEL SALUDO — V3.5.1
   ============================================================
   Gonzalo: "estos dos quedaron raros".

   En la computadora la franja azul del saludo se salía 20px para cada
   costado (un truco para que llegue a los bordes cuando la pantalla es
   angosta) y la tarjeta blanca de abajo no. Con el ancho único de la
   V3.5.0 eso quedó a la vista: un rectángulo azul asomando por detrás de
   las tarjetas, más ancho que todo lo demás y sin ninguna razón.

   En una pantalla grande el truco no hace falta: la franja se alinea
   exactamente con el resto del contenido y se le redondean las esquinas,
   así se lee como un bloque puesto a propósito y no como algo que se
   desbordó.
   ============================================================ */
@media (min-width: 769px) {
  .franja-saludo {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 10px;
  }
}

/* ============================================================
   LAS DOS SOLAPAS, DEL MISMO ANCHO — V3.11.0
   ============================================================
   Gonzalo, desde Gerencia: "estaría bueno, solo en la versión PC, que
   'Viaje y pasajeros' y 'Pagos' tengan el mismo tamaño, el de pasajeros
   diría yo".

   Cada botón medía lo que medía su texto, así que "Viaje y pasajeros"
   quedaba casi el triple de ancho que "Pagos". Cuando dos botones son la
   misma clase de cosa —dos vistas de la misma reserva, ni una más
   importante que la otra— el tamaño distinto dice algo que no es cierto:
   que uno pesa más.

   Igualados al más ancho, el control se lee como lo que es: un interruptor
   de dos posiciones.

   Solo en pantalla grande. En el celular hacerlos iguales gastaría la mitad
   del ancho en aire alrededor de la palabra "Pagos", y ahí el ancho es lo
   que falta.
   ============================================================ */
@media (min-width: 769px) {
  /* V3.12.0 — `flex: 1 1 0` con `min-width` no alcanzaba: el contenedor es
     `inline-flex`, así que su ancho lo define el contenido, y el botón de
     texto más largo seguía empujando. `min-width` pone un piso, no un techo.
     Un ancho fijo e igual para los dos es la única forma de que midan lo
     mismo de verdad: 220px entra "Viaje y pasajeros" con el ícono y sobra
     aire parejo alrededor de "Pagos". */
  .control-segmentado > button {
    width: 220px;
    flex: 0 0 220px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
}

/* ============================================================
   LA SEGUNDA FILA DE LA BARRA — V3.11.0
   ============================================================
   Gonzalo, mirando la pantalla de la computadora: "la franja que abarca el
   dólar y la sesión hacela en azul y más fina, y dejemos más grueso en
   celeste lo de arriba".

   La barra tenía dos filas del mismo celeste y del mismo grosor, y las dos
   cosas que llevan no son la misma clase de cosa. Arriba está la marca y la
   navegación: eso es a dónde voy, se usa todo el tiempo y merece el lugar.
   Abajo están las cotizaciones, el nombre y Cerrar sesión: eso es contexto
   —quién soy, cómo está el dólar— que se mira de reojo.

   Dos pesos distintos con la misma altura y el mismo color hacían que la
   barra pareciera el doble de alta de lo necesario. Con la segunda fila más
   fina y en azul oscuro, la barra vuelve a leerse como una sola cosa con un
   pie, y se recuperan casi treinta píxeles de la primera pantalla.

   El azul oscuro es el mismo `#16265c` que ya usa la franja del saludo: no
   se inventa un color nuevo para esto.
   ============================================================ */
@media (min-width: 769px) {
  .nav-fila-datos:has(.nav-cotizaciones) {
    /* V3.14.0 — Antes decía solo `width: 100%` y quedaba un pedazo celeste a
       la derecha, al lado de Cerrar sesión.

       El motivo: `width: 100%` de un hijo se mide contra el ANCHO INTERNO
       del padre, o sea sin sus 24px de relleno de cada lado. Los márgenes
       negativos lo corrían 24 a la izquierda, pero el ancho seguía siendo 48
       más corto que la barra. Por eso faltaba justo del lado derecho.

       `calc(100% + 48px)` le devuelve esos 48: arranca 24 antes y termina 24
       después, o sea exactamente en los dos bordes de la barra. */
    width: calc(100% + 48px);
    box-sizing: border-box;
    margin: 6px -24px -13px;
    padding: 5px 24px;
    background: #16265c;
    border-radius: 0;
  }
  /* Adentro de la franja oscura, la caja de los dólares ya no necesita su
     propio fondo: sería una caja dentro de otra del mismo color. */
  .nav-fila-datos:has(.nav-cotizaciones) .nav-cotizaciones {
    background: transparent !important;
    padding: 0 !important;
  }
}

/* ============================================================
   LA LISTA DE RESERVAS EN LA COMPUTADORA — V3.11.0
   ============================================================
   Gonzalo: "anda medio raro, cuando me paso sobre una reserva y aprieto
   click no lo hace bien".

   No puedo ver el video, así que esto no es un diagnóstico cerrado — pero
   hay un sospechoso claro y vale la pena sacarlo del medio igual.

   En la computadora la lista seguía siendo una TIRA que se desliza de
   costado (`overflow-x: auto`), con las tarjetas al ancho de su contenido.
   En el celular la pasamos a lista vertical en la V3.4.1, pero en pantalla
   grande quedó como estaba.

   Un contenedor que se desliza se lleva mal con el click: si el mouse se
   mueve un pixel entre que se aprieta y se suelta, el navegador lo
   interpreta como un arrastre y **el click no llega nunca**. Con el
   trackpad de una notebook eso pasa seguido. El síntoma es exactamente
   "aprieto y no hace bien".

   Y encima no hacía falta: en una pantalla ancha las tarjetas entran de a
   varias por renglón. Ahora envuelven, todas del mismo ancho, sin nada que
   arrastrar.
   ============================================================ */
@media (min-width: 769px) {
  .lista-reservas {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

/* ============================================================
   LA LISTA DE RESERVAS ES UNA LISTA, Y SE DESLIZA SOLA — V3.12.0
   ============================================================
   Gonzalo: "me muestra muchísimas reservas, tendría que mostrarlo más como
   lista, y de última que tenga una barra de subir y bajar solo para ese
   sector dentro de la página".

   Con setenta reservas cargadas, las tarjetas en dos columnas ocupaban seis
   pantallas y empujaban todo lo demás para abajo. El buscador quedaba
   arriba de todo y el detalle de la reserva elegida, invisible: para pasar
   de una a otra había que scrollear la página entera dos veces.

   Dos cambios, y el segundo es el que resuelve:

   1. **Una por renglón.** Una reserva es una fila de datos —nombre, estado,
      destino, código—, no una ficha. En columnas, el ojo tiene que decidir
      en cada salto si sigue a la derecha o abajo; en una sola columna baja
      derecho.

   2. **Su propio deslizador.** El bloque tiene una altura máxima y se
      desliza por dentro. Así el buscador de arriba y el detalle de abajo
      quedan SIEMPRE a la vista, y la lista no le come la pantalla al resto.
      Es la diferencia entre una lista y un listado: una se recorre sin
      perder de vista dónde estás parado.

   La altura sale de mostrar unas cinco reservas: suficiente para elegir sin
   deslizar en el caso normal, y acotado cuando hay setenta.
   ============================================================ */
.lista-reservas {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow-x: visible !important;
  overflow-y: auto;
  max-height: 340px;
  padding-right: 4px;
  scrollbar-width: thin;
}
.lista-reservas > * {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  box-sizing: border-box;
  flex: 0 0 auto !important;
}
/* Un deslizador discreto: se ve que está, no compite con el contenido. */
.lista-reservas::-webkit-scrollbar { width: 8px; }
.lista-reservas::-webkit-scrollbar-thumb {
  background: #c9d3e8; border-radius: 4px;
}
.lista-reservas::-webkit-scrollbar-track { background: transparent; }


/* ============================================================
   AIRE ENTRE LA BARRA Y EL SALUDO — V3.12.0
   ============================================================
   Gonzalo: "que la barra azul de abajo del celeste llegue hasta el final, y
   dejá una diferencia entre eso y la barra azul de abajo. No mucho, pero que
   se note".

   El problema es el que ya conocemos con otra cara: la fila oscura de la
   barra y la franja del saludo son del mismo azul y estaban pegadas, así que
   volvían a leerse como UN bloque partido al medio. Es exactamente lo que
   arreglamos en la V3.3.0 entre el celeste y el celeste.

   La solución no es cambiarles el color —los dos merecen el oscuro— sino
   dejar ver el fondo de la página entre medio. Diez píxeles alcanzan: no es
   un espacio, es una línea de respiro que dice "acá termina el marco y
   empieza la pantalla".
   ============================================================ */
@media (min-width: 769px) {
  .franja-saludo { margin-top: 10px !important; }
}

/* ============================================================
   LA TIRA DE CUATRO FOTOS DE LA FICHA — V3.25.0
   ============================================================
   Gonzalo: "que las ponga una al lado de la otra o en cuadrada, como creas
   mejor teniendo en cuenta esta versión y la celular".

   Las dos, según la pantalla, y por el mismo motivo de siempre:

   · **Computadora: las cuatro en fila.** Debajo de una portada ancha, una
     tira pareja de cuatro se lee como acompañamiento y deja que la portada
     siga siendo la protagonista. Apiladas de a dos le robarían altura a lo
     que sigue.

   · **Celular: 2 x 2.** Cuatro en fila en un teléfono de 380px dan
     miniaturas de 85 píxeles: ahí no se ve una habitación ni una playa, se
     ve un color. En 2 x 2 quedan de 170 y se miran de verdad.

   No es una versión reducida del diseño: es el mismo bloque acomodado a la
   forma de cada pantalla.
   ============================================================ */
.galeria-cuatro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #e7ecf2;
  padding-top: 4px;
}

/* ============================================================
   Y CUANDO SON MENOS DE CUATRO — V3.28.0
   ============================================================
   Gonzalo, 28/07/2026: que muestre las que haya, parejas.

   Antes, con menos de cuatro no se mostraba ninguna. La razón era que
   `repeat(4, 1fr)` con dos fotos deja dos columnas vacías: una fila
   incompleta, que se ve peor que no tener nada.

   Pero el problema nunca fue mostrar dos fotos: era mostrarlas en una
   grilla de cuatro. Con tantas columnas como fotos, dos ocupan medio y
   medio, tres ocupan un tercio cada una, y la fila queda igual de pareja
   que con cuatro. La regla se cumple; lo que cambia es cómo.
   ============================================================ */
.galeria-cuatro[data-cuantas="1"] { grid-template-columns: 1fr; }
.galeria-cuatro[data-cuantas="2"] { grid-template-columns: repeat(2, 1fr); }
.galeria-cuatro[data-cuantas="3"] { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .galeria-cuatro { grid-template-columns: repeat(2, 1fr); }
  /* En el teléfono, una sola va a todo el ancho y tres van en fila: en
     2 x 2 la tercera quedaría sola en la segunda fila, que es justamente
     el hueco que estamos tratando de evitar. */
  .galeria-cuatro[data-cuantas="1"] { grid-template-columns: 1fr; }
  .galeria-cuatro[data-cuantas="3"] { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   V4.16.0 — LOS DESTINOS, LADO A LADO (Gonzalo, 04/08/2026)
   ============================================================
   "Poné un destino al lado del otro con el título arriba, porque si no
   se hace muy largo todo. A esto me refiero con simplificar siempre."

   Cada destino es un bloque del ancho de SUS tarjetas (n1..n4 = cuántas
   tiene, tope 4) y los bloques fluyen y se centran. La cuenta repite la
   unidad de .grilla-catalogo (1/4 del ancho con gap 14) para que una
   tarjeta mida LO MISMO acá que en la vidriera: n2 = dos unidades + un
   gap, n3 = tres + dos gaps. Los cortes responsive son los mismos de la
   grilla (1000 / 780 / 560): en cada tamaño, el bloque que no entra
   pasa a ancho completo y sus tarjetas vuelven al reparto estándar. */
.grilla-destinos {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 14px;
  justify-content: center;
  align-items: flex-start;
}
.bloque-destino { min-width: 0; }
.bloque-destino.n1 { flex: 0 1 calc((100% - 3 * 14px) / 4); }
.bloque-destino.n2 { flex: 0 1 calc(2 * (100% - 3 * 14px) / 4 + 14px); }
.bloque-destino.n3 { flex: 0 1 calc(3 * (100% - 3 * 14px) / 4 + 28px); }
.bloque-destino.n4 { flex: 0 1 100%; }
/* Adentro de un bloque angosto, las tarjetas se reparten el bloque en
   partes iguales (el bloque YA mide n unidades, así que cada tarjeta
   queda del tamaño estándar). El n4 usa el reparto normal de la grilla:
   con 5 o más salidas tiene que envolver en filas de 4, no achicarse. */
.bloque-destino.n1 .grilla-catalogo > *,
.bloque-destino.n2 .grilla-catalogo > *,
.bloque-destino.n3 .grilla-catalogo > * {
  flex: 1 1 0;
  max-width: none;
  min-width: 0;
}
@media (max-width: 1000px) {
  .bloque-destino.n1 { flex-basis: calc((100% - 2 * 14px) / 3); }
  .bloque-destino.n2 { flex-basis: calc(2 * (100% - 2 * 14px) / 3 + 14px); }
  .bloque-destino.n3, .bloque-destino.n4 { flex-basis: 100%; }
}
@media (max-width: 780px) {
  .bloque-destino.n1 { flex-basis: calc((100% - 14px) / 2); }
  .bloque-destino.n2, .bloque-destino.n3, .bloque-destino.n4 { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .bloque-destino { flex-basis: 100% !important; }
  /* En el celular las tarjetas se apilan SIEMPRE: dos tarjetas apretadas
     lado a lado en una pantalla angosta no se pueden leer. */
  .bloque-destino .grilla-catalogo > * {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   LA PÁGINA DEL SERVICIO — V4.25.0 → V4.30.0 (Gonzalo, 04/08)
   ============================================================
   V4.30.0 — LA UNIFICACIÓN FINAL: "estructura del B2B, estética del
   B2C". La estructura del B2B es decisión escrita de Gonzalo (V2.37):
   "la foto, la decisión, y después el paquete — se acabó el panel al
   costado". La caja de compra va ARRIBA, a todo el ancho, como el
   "¿Qué vas a hacer?" del vendedor; el contenido abajo en una sola
   columna; el mapa al final. Igual en las dos vidrieras.
   ============================================================ */
/* V4.88.0 — VUELVE EL PANEL A LA DERECHA (Gonzalo, 17/08, con la ficha
   de Despegar al lado: "el panel de precio fijo que te sigue mientras
   bajás"). La decisión vieja de una sola columna se reemplaza: en
   escritorio la ficha es DOS columnas — el contenido a la izquierda y
   la caja de compra pegajosa a la derecha, siempre a la vista. En el
   celular todo se apila como hasta hoy: la caja primero. */
/* ============================================================
   V4.107.0 — EL MOSAICO DE FOTOS DE LA FICHA (maqueta, pestaña 2):
   la grande ocupa 2 filas a la izquierda; hasta 4 chicas a la
   derecha en 2x2. Con menos de 2 chicas no hay mosaico (la clase no
   se pone y la grande queda sola, ancho completo, como siempre).
   En el celular: la grande arriba y las chicas en una fila de a dos.
   ============================================================ */
/* V4.107.0 — EL MOSAICO DE LA FICHA.
   V4.109.0 — CALCADO FINO de la maqueta (pestaña 2): la grande a la
   izquierda (dos filas) y DOS chicas apiladas a la derecha — no cuatro
   en 2x2. El resto de las fotos vive detrás de "Ver las N fotos". */
/* V4.174.0 — LA FOTO, ENCUADRADA SIEMPRE (Gonza, 22/08: "la foto de
   arriba queda mal, como cortada en los bordes").

   MEDIDO a 390px: con dos fotos chicas o más el contenedor lleva
   `.ficha-mosaico` y tiene su margen; con UNA sola foto no llevaba ninguna
   clase y quedaba a sangre — de borde a borde, pegada al header y con el
   redondeo de 12px cayéndose fuera de la vista, mientras todo lo de abajo
   respeta 16px. Por eso se lee "cortada".

   El encuadre (ancho, margen, aire) pasa a `.ficha-fotos`, que está
   SIEMPRE. `.ficha-mosaico` queda para lo único que le es propio: la
   grilla de varias fotos. Una foto sola y un mosaico se ven igual de
   encuadrados porque el encuadre ya no depende de cuántas fotos haya. */
.ficha-fotos { max-width: 1120px; margin: 0 auto; padding: 14px 16px 0; }
.ficha-mosaico { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 210px 130px; gap: 8px; }
.ficha-mosaico .mosaico-grande { grid-row: 1 / span 2; margin: 0 !important; height: auto !important; }
.ficha-mosaico .mosaico-chica { display: block; }
/* V4.131.0 — LAS FOTOS AL ANCHO DE LA PÁGINA (captura de Gonzalo,
   18/08): la grilla de la ficha crece a 1280 desde la V4.100 pero el
   mosaico quedó clavado en 1120 — en monitores grandes las fotos se
   veían más angostas que el contenido de abajo. El mosaico acompaña
   SIEMPRE el mismo ancho que .ficha-grid, en cada corte. */
@media (min-width: 1380px) {
  .ficha-fotos { max-width: 1280px; }
  .ficha-mosaico { grid-template-rows: 240px 150px; }
}
@media (max-width: 860px) {
  /* V4.171.0 — REGLA 4. Antes: `grid-template-rows: 200px 92px` y
     `.mosaico-chica:nth-child(n+4) { display: none }`. Con el botón de
     la galería y el lápiz de Gerencia en el medio, las dos chicas caían
     en la posición 4 y 5 y se escondían LAS DOS — pero los 92px de la
     segunda fila seguían reservados. Ese era el hueco blanco de las
     capturas, y sólo lo veía quien tiene el lápiz.
     Ahora: la tercera en adelante se esconde por HERMANDAD DE CLASE
     (no le importa qué otros elementos haya en el medio) y la fila es
     `auto`: si no hay chicas, no ocupa nada. */
  .ficha-fotos { padding: 10px 12px 0; }
  .ficha-mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: 200px auto; }
  .ficha-mosaico .mosaico-grande { grid-row: 1; grid-column: 1 / span 2; }
  .ficha-mosaico .mosaico-chica { height: 92px; }
  .ficha-mosaico .mosaico-chica ~ .mosaico-chica ~ .mosaico-chica { display: none; }
}

/* ============================================================
   V4.104.0 — LA MINI-BARRA PEGAJOSA DE LA FICHA (maqueta aprobada):
   fija arriba, escondida hasta pasar el hero (340px), con el viaje,
   la salida, el precio VIGENTE de la base elegida y el botón que
   baja a la caja de compra. En el celular se compacta: la info del
   viaje se esconde y quedan precio y botón, siempre a mano.
   ============================================================ */
.ficha-minibarra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-bottom: 1px solid #dfe7f2;
  box-shadow: 0 2px 12px rgba(20, 36, 92, .10);
  padding: 9px 18px;
  transform: translateY(-110%); transition: transform .25s ease;
}
.ficha-minibarra.visible { transform: translateY(0); }
.ficha-minibarra .minibarra-info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ficha-minibarra .minibarra-info b { font: 700 13.5px 'Outfit', sans-serif; color: #2c3a4b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-minibarra .minibarra-info span { font: 500 11.5px 'Outfit', sans-serif; color: #6b7a90; }
.ficha-minibarra .minibarra-precio { margin-left: auto; text-align: right; line-height: 1.25; white-space: nowrap; }
.ficha-minibarra .minibarra-precio span { display: block; font: 500 10.5px 'Outfit', sans-serif; color: #6b7a90; }
.ficha-minibarra .minibarra-precio b { font: 800 18px 'Outfit', sans-serif; color: #2c3a4b; }
.ficha-minibarra .minibarra-boton {
  font: 700 13px 'Outfit', sans-serif; background: #1573d0; color: #fff;
  border: none; border-radius: 9px; padding: 10px 16px; cursor: pointer; white-space: nowrap;
}
@media (max-width: 640px) {
  .ficha-minibarra { padding: 8px 12px; gap: 10px; }
  .ficha-minibarra .minibarra-info { display: none; }
  .ficha-minibarra .minibarra-precio { margin-left: 0; text-align: left; flex: 1; }
  .ficha-minibarra .minibarra-boton { margin-left: auto; }
}

/* ============================================================
   V4.166.0 — LA BARRA "RESERVAR MI LUGAR" DEJA DE IR Y VENIR
   ============================================================
   Gonza, 20/08, con la captura de la ficha en PC: "es como una barra
   que aparece y desaparece en base a la posición, es incómodo; o hay
   que dejarlo fijo o sacarlo".

   Se decidió una cosa distinta para cada pantalla, porque el problema
   es distinto:

   · EN PC LA BARRA SOBRA. La caja de precios de la derecha ya está a
     la vista todo el tiempo, con el mismo precio y el mismo botón. La
     barra decía lo mismo dos veces, y encima entrando y saliendo.
   · EN EL CELULAR NO HAY CAJA A LA DERECHA, así que la barra es la
     única forma de tener el precio y el botón siempre a mano. Queda
     FIJA ABAJO desde el primer momento —la barra de total pegada de
     la maqueta Despegar—, sin depender del scroll.

   El JS que la mostraba a los 340px sigue existiendo y no molesta: en
   PC el elemento no se dibuja, y en el celular las dos posiciones
   (`visible` o no) apuntan al mismo lugar. Se saca en la limpieza de
   la ficha, no acá: hoy toca UNA cosa.
   ============================================================ */
@media (min-width: 861px) {
  .ficha-minibarra { display: none !important; }
}
@media (max-width: 860px) {
  /* Abajo, no arriba: arriba pisaba el encabezado de la tienda. La
     franja de abajo es la del wizard (64–120px), declarada en
     `pruebas/candados_de_la_casa.js` — por eso arranca en 64. */
  .ficha-minibarra {
    /* V4.168.0 — pegada AL PISO de su ventana. La V4.166.0 le dejó
       64px para no pisar la barra de navegación del sistema, pero esa
       barra vive AFUERA del iframe: adentro, esos 64px eran un hueco
       blanco. Ahora el marco termina justo arriba de la navegación
       (ver el bloque del marco), así que el piso del iframe YA es el
       lugar correcto. Con la tienda abierta sola (sin marco), el
       safe-area sigue cubriendo la franja del teléfono. */
    top: auto; bottom: 0;
    border-bottom: none; border-top: 1px solid #dfe7f2;
    box-shadow: 0 -2px 12px rgba(20, 36, 92, .10);
    padding-bottom: calc(9px + var(--piso-seguro));
    transform: translateY(0);           /* fija desde el arranque */
  }
  /* V4.171.0 — REGLA 3: la barra de la ficha tapaba el renglón de la
     salida ("Sale el 31/10/2026…") en las capturas de Gonza. El
     contenido reserva su altura. */
  .ficha-grid:not(.ficha-wizard) { padding-bottom: calc(var(--alto-barra-ficha) + 24px + var(--piso-seguro)) !important; }
  .ficha-minibarra.visible { transform: translateY(0); }
}

/* V4.107.0 — LOS MÓDULOS DE LA FICHA (maqueta, pestaña 2): cada bloque
   —Elegí tu salida, Tu transporte, Tu viaje— es una tarjeta blanca con
   borde y su título adentro, sobre el lienzo. Calcado de .modulo de la
   maqueta aprobada.
   V4.109.0 — CALCO FINO (Gonzalo: "se iba a parecer a Despegar/Almundo"):
   los valores pasan a ser los de .seccionF de la PESTAÑA 2 (radio 14,
   padding 16/18) — los de antes venían del .modulo de la pestaña 3, que
   es otra tarjeta. Y el h2 lleva el subrayado celeste de la maqueta. */
.ficha-modulo {
  background: #fff; border: 1px solid #E3EAEF; border-radius: 10px;
  padding: 16px 18px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(10, 37, 64, .05);
}
.ficha-modulo > h2:first-of-type { margin-top: 0 !important; }
.ficha-modulo h2 {
  display: inline-block; border-bottom: 2px solid #1573d0; padding-bottom: 4px;
}

/* V4.109.0 — EL TÍTULO DE LA MAQUETA: debajo del mosaico, oscuro, con
   su renglón (badge de puntaje, estrellas, contexto y link al mapa). */
.ficha-titulo-bloque { margin: 14px 0 0; }
.ficha-titulo-h1 { margin: 0; font: 800 27px 'Outfit', sans-serif; color: #2c3a4b; letter-spacing: -.6px; }
.ficha-titulo-sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: #6b7a90; font: 500 13.5px 'Outfit', sans-serif; margin-top: 4px; }
.badge-punt { background: #1a2e6e; color: #fff; font: 800 12.5px 'Outfit', sans-serif; border-radius: 8px; padding: 3px 8px; }
.ficha-estrellas { color: #f5a623; letter-spacing: 1px; }
@media (max-width: 640px) { .ficha-titulo-h1 { font-size: 22px; } }

/* V4.109.0 — el botón de la maqueta sobre el mosaico: abre el visor. */
.ver-galeria {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  background: rgba(255,255,255,.95); border: none; border-radius: 10px;
  padding: 7px 14px; font: 600 12.5px 'Outfit', sans-serif; color: #2c3a4b;
  cursor: pointer; box-shadow: 0 2px 8px rgba(10,37,64,.18);
}

.ficha-grid { display: block; max-width: 860px; margin: 0 auto; }
.ficha-caja {
  background: #ffffff; border: 1.5px solid #1573d0; /* V4.109.0 — el
    borde celeste de la cajaPrecio de la maqueta (era gris) */
  border-radius: 10px;
  padding: 18px 18px 16px; box-shadow: 0 14px 40px rgba(10,37,64,.10);
  margin-bottom: 24px;
}
@media (min-width: 981px) {
  .ficha-grid { display: grid; max-width: 1120px; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
  .ficha-grid > * { grid-column: 1; }
  /* ============================================================
     V4.182.0 — LA CAJA SE PEGA IGUAL EN LOS DOS LADOS (Gonza, 23/08)
     ============================================================
     "Dependiendo de en cuál de los dos estés, si es cotizador o tienda,
     el de la derecha se mueve de manera diferente."

     Y era cierto. Acá decía `top: 72px`, un número heredado de cuando
     esta caja vivía en la ficha del SISTEMA, que sí tiene una barra fija
     de ese alto arriba. La tienda no tiene ninguna barra pegajosa: esos
     72px no estaban esquivando nada.

     El resultado eran dos comportamientos. En la tienda suelta, la caja
     se clava a 72px del borde de la ventana y arriba queda un hueco. En
     el Cotizador la tienda vive adentro de un marco que YA empieza
     debajo de la barra del sistema, así que esos 72px se suman a los que
     ocupa la barra y la caja queda todavía más abajo. Mismo CSS, dos
     lugares distintos.

     Ahora es una medida con nombre —regla 1 de la casa: las medidas
     tienen nombre, no número— y vale lo mismo en los dos, porque en los
     dos la caja tiene lo mismo encima: nada. Si algún día la tienda gana
     una barra fija, se cambia el valor en :root y las dos acompañan. */
  .ficha-grid > .ficha-caja { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: var(--tope-caja-ficha); margin-bottom: 0; }
}
/* V4.100.0 — captura de Gonzalo: en pantallas grandes sobraba costado
   vacío. La ficha crece a 1280 con la caja un toque más ancha; el
   ancho lo manda SOLO esta clase (el inline que la pisaba se fue). */
@media (min-width: 1380px) {
  .ficha-grid { max-width: 1280px; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; }
}

/* V4.99.0 — TARJETAS FANTASMA mientras carga la vidriera: la espera se
   ve viva (el patrón de las plataformas grandes). Solo la tienda. */
.tarjeta-fantasma {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 14px rgba(26,46,110,.06); padding-bottom: 16px;
  min-height: 440px; /* V4.385.0 — el alto de la tarjeta vertical */
}
.fantasma-foto { height: 168px; }
.fantasma-linea { height: 13px; border-radius: 7px; margin: 12px 15px 0; }
.fantasma-foto, .fantasma-linea {
  background: linear-gradient(90deg, #e8edf5 25%, #f4f7fb 50%, #e8edf5 75%);
  background-size: 200% 100%;
  animation: fantasma-brillo 1.3s ease-in-out infinite;
}
@keyframes fantasma-brillo {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* V4.97.0 — TU VIAJE EN UNA TARJETA con los checks a DOS columnas en
   escritorio (maqueta Vidriera Pareja: la lista apilada era
   kilométrica). En el celular, una columna como siempre. */
.ficha-checks { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .ficha-checks { grid-template-columns: 1fr; } }

/* V4.88.0 — LOS FILTROS LATERALES (la gramática de las tres): en
   escritorio el panel vive SIEMPRE a la izquierda de los resultados,
   pegajoso; en el celular sigue detrás del botón Filtros. */
.tienda-cuerpo { display: block; }
.filtros-lateral { display: none; }
.filtros-lateral.abierto { display: block; }
@media (min-width: 981px) {
  /* V4.379.0 — EL FILTRO APARECE SÓLO SI SE PIDE (Gonzalo, 06/10 17:30: "el filtro lateral no
     sé si debería estar; debería estar sólo cuando el pasajero lo quiere poner"). Cerrado, la
     lista usa todo el ancho; "Más filtros" lo abre a la izquierda como antes. */
  .tienda-cuerpo { display: block; }
  .tienda-cuerpo:has(.filtros-lateral.abierto) { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 22px; align-items: start; }
  /* V4.377.0 — Gonzalo 05/10: "el filtro de un costado queda quieto y los
     paquetes del otro se mueven" → elegido "que baje con la lista". Sin
     sticky: filtro y paquetes son una sola página (medía 833px, más que la
     pantalla, y pegado no se llegaba al final). */
  .filtros-lateral { display: none; position: static; }
  .filtros-lateral.abierto { display: block; }
  .solo-celular { display: none !important; }
}


/* El panel de filtros (PanelFiltros.jsx, V4.26.0): campos en fila en
   escritorio, apilados en el celular. Compartido por las dos vidrieras. */
.panel-filtros-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .panel-filtros-grilla { grid-template-columns: 1fr; } }

/* ============================================================
   V4.65.0 — LA LISTA DE PAQUETES DEL DESTINO (tienda, nivel 2).
   En el teléfono la tarjeta horizontal se apila: foto arriba a todo
   el ancho, datos al medio, precio abajo — misma regla que las
   tarjetas del Cotizador: nada se corta en ningún tamaño.
   ============================================================ */
@media (max-width: 720px) {
  .paquete-card { flex-direction: column !important; }
  .paquete-card .paquete-foto { width: 100% !important; height: 170px; }
  .paquete-card .paquete-precio {
    width: 100% !important; border-left: none !important;
    border-top: 1px solid #e6e2d8; text-align: left !important; padding-top: 12px !important;
  }
}

/* ============================================================
   V4.91.0 — LA REGLA DE LA FILA COMPLETA (maqueta v7, Gonzalo 17/08:
   "no me gusta que quede ese paquete solo abajo: mostrá 3 y listo").
   Cuando la grilla baja a 3 columnas, la 4ª tarjeta se esconde — vive
   detrás del "Ver más" de la sección. Nunca un paquete huérfano.
   En 2 columnas vuelven todas (2×2 = filas llenas). Y las tarjetas se
   levantan al pasar el mouse, como las tres plataformas.
   ============================================================ */
.grilla-catalogo > * { transition: box-shadow .15s ease, transform .15s ease; }
.grilla-catalogo > *:hover { box-shadow: 0 14px 34px rgba(10,37,64,.16); transform: translateY(-2px); }
@media (min-width: 781px) and (max-width: 1000px) {
  .grilla-catalogo > *:nth-child(n+4) { display: none; }
}

/* ============================================================
   V4.92.0 — LA TIRA DE ALIADOS "como pasando" (Gonzalo, 17/08).
   V4.384.0 — RETIRADA: Gonzalo (07/10) "cómo pasa mostrando los
   proveedores no me gusta, es feo". Los logos quedan quietos en "Con el
   respaldo de" (ver .respaldo-logo al final de este archivo).
   ============================================================ */

/* ============================================================
   V4.92.0 — LA CAMPANITA NO TAPA LA BARRA DE ABAJO (pendiente que
   Gonzalo marcó con captura): en el celular la barra inferior mide
   ~64px + safe-area, y la campana dorada quedaba ENCIMA de los
   botones de navegación. Sube justo por arriba de la barra.
   ============================================================ */
@media (max-width: 860px) {
  .campana-avisos { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
}

/* ============================================================
   V4.108.0 — EL MARCO DE LA VIDRIERA EN EL COTIZADOR (la vista única).
   V4.111.0 — DIRECTO: sin padding, sin borde, sin rótulo.
   V4.112.0 — UN SOLO SCROLL (captura de Gonzalo: quedaban DOS barras
   verticales —la página y la vidriera— y una horizontal de regalo,
   porque el marco vivía en el flujo y el 100vw no descuenta la barra).
   En ESCRITORIO el marco se CLAVA (fixed) debajo de la cabecera del
   sistema ocupando la ventana entera, y el cuerpo de atrás deja de
   scrollear (body.cotizador-directo): scrollea SOLO la vidriera, como
   una página normal. En el CELULAR sigue en el flujo (el teléfono no
   dibuja barras y la de abajo necesita su lugar), con 100dvh porque
   la barra de direcciones achica el alto real y 100vh miente.
   ============================================================ */
.cotizador-marco {
  display: flex; flex-direction: column;
  width: 100vw; margin-left: calc(50% - 50vw);
  height: calc(100vh - 118px);
  height: calc(100dvh - 118px);
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
/* ============================================================
   V4.168.0 — EL MARCO SE CLAVA TAMBIÉN EN EL CELULAR
   ============================================================
   Ocho capturas de Gonza del 20/08 (14:28), V4.166.0. La barra
   "Por persona · Reservar mi lugar" NO estaba abajo: flotaba en el
   MEDIO de la pantalla, tapando "Elegí tu fecha" y el 27/12. Y
   siempre en el mismo lugar, subiera o bajara.

   LA CAUSA, que explica media lista de esa tanda. La tienda vive
   adentro de un `<iframe>` (regla de seguridad V4.84: la tienda
   jamás se importa en el árbol del sistema). En ESCRITORIO el marco
   se clava (fixed) desde la V4.112.0 y por eso allá anda todo. En el
   CELULAR quedaba EN EL FLUJO, con un alto calculado a mano:
   `100dvh - 118px` menos 84px de padding.

   Y ahí está el problema: `position: fixed` adentro de un iframe se
   ancla al VIEWPORT DEL IFRAME, no a la pantalla del teléfono. Con
   el marco en el flujo, ese viewport no coincide con lo que se ve —
   así que la barra de la ficha, que pide `bottom: 64px`, aterriza a
   sesenta y pico por ciento de altura y se queda ahí. Lo mismo vale
   para cualquier cosa fija que la tienda dibuje adentro.

   Encima, un alto calculado a mano nunca acierta: la barra de
   direcciones del teléfono aparece y desaparece, y `100dvh` cambia
   abajo del cálculo. De ahí el hueco blanco que se ve en las tres
   capturas de la ficha.

   Clavando el marco también en el celular, el iframe pasa a medir
   EXACTAMENTE la ventana visible: lo fijo de adentro cae donde tiene
   que caer, el hueco desaparece, y no hay forma de que el contenido
   sea más ancho que el teléfono. El alto lo resuelve el navegador
   solo (top y bottom), no una cuenta.

   Arranca abajo de la cabecera REAL (`--cotizador-arriba`, que
   Catalogo mide al montar y al cambiar el tamaño) y termina arriba
   de la barra de navegación de abajo, 64px, la franja declarada en
   `pruebas/candados_de_la_casa.js`.
   ============================================================ */
@media (max-width: 860px) {
  .cotizador-marco {
    position: fixed;
    top: var(--cotizador-arriba, 118px); left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    width: auto; margin-left: 0; height: auto; padding-bottom: 0;
  }
  /* Una sola barra de scroll, la de la vidriera: la página de atrás
     ya no tiene nada que scrollear. */
  body.cotizador-directo { overflow: hidden; }
}
@media (min-width: 861px) {
  /* V4.112.1 — el top sale de la MEDIDA real de la cabecera (variable
     puesta por Catalogo al montar y al cambiar el tamaño); 118px es
     solo la red si la medida falla. Con el top fijo, una cabecera más
     alta (solapas envueltas, según el rol) quedaba TAPADA por el marco
     y el iframe se comía los clics del menú. */
  .cotizador-marco {
    position: fixed; top: var(--cotizador-arriba, 118px); left: 0; right: 0; bottom: 0;
    width: auto; margin-left: 0; height: auto; padding-bottom: 0;
  }
  /* La página de atrás no scrollea: una sola barra, la de la vidriera. */
  body.cotizador-directo { overflow: hidden; }
}

/* V4.123.0 — el botón Filtros es del CELULAR: en escritorio el riel
   de la izquierda ya está (V4.88/V4.110) y el chip quedaba flotando. */
/* V4.379.0 — retirado: "Más filtros" se ve también en la computadora (el riel ya no está siempre). */

/* ============================================================
   V4.128.0 — PROLIJIDAD CELULAR (las 8 capturas de Gonzalo, 19:04)
   ============================================================ */
@media (max-width: 980px) {
  /* Los 4 badges eran una PARED de tarjetas apiladas a lo alto:
     ahora van de a dos por fila, compactos. */
  .tienda-badges { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .tienda-badges > * { padding: 10px 12px !important; font-size: 12.5px !important; }
  /* ============================================================
     V4.169.0 — EL CIRCULITO VERDE ARRIBA Y EL TEXTO ABAJO
     ============================================================
     Gonza, 20/08: "el círculo verde arriba y el texto abajo hace 10
     proyectos jajaja". Diez proyectos porque nunca se buscó la causa,
     y la causa no está en el badge: está en la regla general del
     celular "si no entra, baja" (línea ~1412), que le pone
     `flex-wrap: wrap` a TODA fila horizontal. El punto mide 8px y el
     texto 302; juntos con el gap dan 319 en una caja de 304. Con
     wrap, el navegador prefiere bajar de renglón antes que achicar,
     así que el texto se va abajo y el puntito queda solo arriba.

     Acá el punto NO es una fila que pueda bajar: es la viñeta del
     renglón. Se le saca el wrap a ESTE caso —no a la regla general,
     que sigue estando bien para el resto— y el texto se achica y
     envuelve adentro, como cualquier viñeta. El punto se alinea con
     la PRIMERA línea, no con el centro de dos.
     ============================================================ */
  .tienda-badges > * { flex-wrap: nowrap !important; align-items: flex-start !important; }
  /* V4.387.0 — se fue la regla de "Volver al sistema": el botón ya no existe. */
  .tienda-badges > * > span:first-child { margin-top: 5px; }
  /* El buscador: el mes y el botón Buscar en una fila pareja,
     el botón a lo ancho abajo si no entra. */
  /* ============================================================
     V4.170.0 — EL BUSCADOR EN EL CELULAR (Gonza, 20/08: "el buscador
     de dónde quiero ir y mes de viaje es feo, hay que mejorarlo")
     ============================================================
     La píldora de PC es UNA fila con tres celdas separadas por líneas
     verticales: destino | mes | Buscar. En 360px esa fila envolvía
     como podía y quedaba lo de la captura: "MES DE VIAJE" con una
     raya al costado y MEDIA CAJA VACÍA a la derecha — el hueco que
     dejaba el botón al bajar de renglón, con el borde de la celda del
     mes todavía dibujado al lado de la nada.

     En el celular deja de ser una fila con celdas: son tres renglones
     apilados, separados por líneas HORIZONTALES, que es como se
     separan las cosas apiladas. Sin bordes verticales, no hay rayas
     colgando ni columnas fantasma. Cada campo ocupa el ancho entero.
     ============================================================ */
  .tienda-buscador-fila { display: block !important; }
  .tienda-buscador-fila > * {
    width: 100% !important; box-sizing: border-box;
    border-right: none !important;
    border-bottom: 1px solid #E3EAEF !important;
    min-width: 0 !important;
  }
  .tienda-buscador-fila > *:last-child { border-bottom: none !important; }
  /* ============================================================
     V4.171.0 — EL MES VUELVE A SER UN DESPLEGABLE DE VERDAD
     ============================================================
     La V4.170.0 quiso meter rótulo y valor en la misma línea y lo
     rompió: le puso al select `width: auto` y `text-align: right`,
     peleándose con la regla del celular que hace que TODO select se
     vea como desplegable (fondo blanco, borde, flechita, ancho
     completo). Ganaba la mía por venir después, así que el mes
     quedaba en 136px, con el valor pegado contra la flecha y sin
     pinta de que se pudiera tocar. Error mío y va escrito.

     Acá no se pelea con esa regla: el mes es un select como todos
     los del sistema, a lo ancho, con su flecha. El rótulo arriba,
     chiquito. Ocupa un renglón más y se puede usar, que es de lo
     que se trata. */
  .tienda-buscador-fila label { padding: 10px 14px !important; }
  .tienda-buscador-fila > button { min-height: 52px; }
  /* El conmutador agente/cliente centrado en el celular (a la
     derecha quedaba flotando contra el borde). */
  .tienda-conmutador-modo { justify-content: center !important; }
}

/* V4.129.0 — la campana de confirmaciones, SOLO campana en el celular
   (la píldora larga tapaba la barra de navegación de abajo). El
   numerito sigue; el texto vive en PC. Y sube un poco para no pisar
   la barra inferior de la app. */
@media (max-width: 980px) {
  .campana-avisos .campana-texto { display: none; }
  /* V4.158.0 — LA CAMPANA ES UN CÍRCULO Y NADA MÁS (Gonzalo, 19/08):
     "quiero que sea redondo el círculo sólo con la campanita". Sin
     número y sin texto: si está, es porque hay algo esperando. */
  .campana-avisos { border-radius: 50% !important; width: 52px !important; height: 52px !important; min-width: 52px; justify-content: center; align-items: center; padding: 0 !important; bottom: 86px !important; gap: 0 !important; }
}

/* ============================================================
   V4.131.0 — EL RIEL: ICONOS EN EL CELULAR, PALABRAS EN PC
   (pedido de Gonzalo, 18/08: "los iconos van bien para la versión
   celular como hace Despegar, pero en PC no van logos en los
   títulos: van las palabras que resalten"). En pantallas anchas
   la bola con el icono se esconde y quedan las PALABRAS grandes
   con el subrayado celeste en la activa — el patrón de solapas de
   Despegar en escritorio. El numerito pasa al lado de la palabra.
   ============================================================ */
.riel-cuantos-pc { display: none; }
@media (min-width: 861px) {
  .tienda-riel { justify-content: flex-start !important; gap: 0 !important; padding: 0 12px !important; }
  .tienda-riel .riel-bola { display: none !important; }
  .tienda-riel .riel-solapa { padding: 15px 20px 12px !important; min-width: 0 !important; border-bottom: 3px solid transparent; border-radius: 0; }
  .tienda-riel .riel-solapa-activa { border-bottom-color: #1573d0; }
  .tienda-riel .riel-palabra { font-size: 15.5px !important; }
  .tienda-riel .riel-solapa-activa .riel-palabra { color: #1573d0 !important; }
  .riel-cuantos-pc { display: inline; font-size: 12px; font-weight: 700; color: #6b7a90; }
}

/* ============================================================
   V4.134.0 — LA FICHA POR PASOS (maqueta V2), ETAPA A
   ============================================================
   Solo en el CELULAR: en PC la ficha ancha con la caja pegada a la
   derecha ya funciona y partirla la empeoraría (decisión de Gonzalo).
   El wizard esconde/muestra bloques que YA existen: no se movió una
   sola línea del motor de precios ni del pedido.
   ============================================================ */
/* ============================================================
   V4.299.0 — CADA PASO MUESTRA LO SUYO, Y EL 3 SON LOS EXTRAS
   ============================================================
   Gonza, 26/08, con cuatro capturas —tienda y Cotizador, PC y celular—:
   "en todos lados aparece, tenés que hacerlo desaparecer, solo va en su
   paso de extras".

   LA CAUSA, medida: la barra de pasos ofrecía TRES (TU VIAJE ·
   HABITACIÓN · EXTRAS) desde la V4.282.0, pero acá abajo sólo había
   reglas para el 1 y el 2. `[data-wiz="3"]` no se escondía NUNCA, así
   que el bloque de extras se dibujaba en los tres pasos. Y como el
   wizard vivía dentro de un `@media (max-width: 860px)`, en la PC no
   había pasos en absoluto: la ficha entera, con los extras en el medio
   del scroll.

   No era que "volvieran" los extras: era que nunca se habían ido de
   ningún lado salvo del bloque duplicado.

   AHORA: la regla es simétrica —cada paso esconde lo que no es suyo— y
   sale del `@media`, porque el paso 3 vale igual en las dos anchuras.
   Lo que se queda en los tres es `data-wiz="siempre"`: el resumen del
   viaje y la caja del precio.
   ============================================================ */
/* Paso 1 · TU VIAJE: la salida y la info del producto. */
.ficha-wizard[data-paso="1"] [data-wiz="2"],
.ficha-wizard[data-paso="1"] [data-wiz="3"] { display: none; }
/* Paso 2 · HABITACIÓN: la caja de decisión, sin distracciones. */
.ficha-wizard[data-paso="2"] [data-wiz="1"],
.ficha-wizard[data-paso="2"] [data-wiz="3"],
.ficha-wizard[data-paso="2"] [data-wiz="info"] { display: none; }
/* Paso 3 · EXTRAS: SOLO los extras. Es el pedido de Gonza, textual. */
.ficha-wizard[data-paso="3"] [data-wiz="1"],
.ficha-wizard[data-paso="3"] [data-wiz="2"],
.ficha-wizard[data-paso="3"] [data-wiz="info"] { display: none; }

@media (max-width: 860px) {

  /* La barra de pasos, calcada de la maqueta V2. */
  .wiz-pasos {
    display: flex; background: #fff; border-radius: 10px; overflow: hidden;
    margin: 0 0 12px; box-shadow: 0 2px 10px rgba(13, 31, 77, .07);
  }
  .wiz-paso {
    flex: 1; background: transparent; border: none; cursor: pointer;
    padding: 11px 4px 9px; font: 800 11px 'Outfit', sans-serif;
    letter-spacing: .3px; color: #6b7a90; border-bottom: 3px solid #dfe5f0;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .wiz-paso .wiz-num {
    display: inline-flex; width: 17px; height: 17px; border-radius: 50%;
    background: #dfe5f0; color: #6b7a90; align-items: center;
    justify-content: center; font-size: 10.5px;
  }
  .wiz-paso.wiz-activo { color: #14245c; border-bottom-color: #1573d0; }
  .wiz-paso.wiz-activo .wiz-num { background: #14245c; color: #fff; }
  .wiz-paso.wiz-hecho { color: #1f8a4c; }
  .wiz-paso.wiz-hecho .wiz-num { background: #1f8a4c; color: #fff; }

  /* La barra de abajo: el total siempre a la vista. Se apoya ARRIBA de
     la barra de navegación del sistema (lección de la campana V4.129). */
  /* V4.171.0 — REGLA 2. Descontaba la navegación del sistema desde
     ADENTRO del iframe, y el marco ya la descuenta afuera: se restaba
     dos veces y la barra terminaba flotando arriba del contenido, como
     en la captura del wizard (tapaba "¿Desde dónde salís?"). */
  .wiz-barra {
    position: fixed; left: 0; right: 0;
    bottom: 0; padding-bottom: calc(9px + var(--piso-seguro));
    z-index: 70; display: flex; align-items: center; gap: 12px;
    /* La navegación del sistema (z-index 900) sigue mandando arriba de
       todo: la barra del total nunca la tapa. */
    background: #fff; border-top: 1px solid #dfe7f2;
    box-shadow: 0 -4px 16px rgba(13, 31, 77, .12);
    padding: 9px 14px;
  }
  .wiz-barra-monto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .wiz-barra-monto span { font: 600 10.5px 'Outfit', sans-serif; color: #6b7a90; }
  .wiz-barra-monto b { font: 800 17px 'Outfit', sans-serif; color: #14245c; white-space: nowrap; }
  .wiz-btn {
    /* V4.209.0 (D-2408-D) — EL botón que empuja el paso de compra:
       la acción destacada de esta pantalla. Era un hex suelto. */
    margin-left: auto; background: var(--color-accion-destacada); color: #fff; border: none;
    border-radius: 10px; padding: 11px 22px; cursor: pointer;
    font: 700 14px 'Outfit', sans-serif;
  }
  /* REGLA 3 — lo que tapa, reserva. Con la medida por nombre. */
  .ficha-wizard { padding-bottom: calc(var(--alto-barra-wizard) + 34px + var(--piso-seguro)) !important; }
  /* V4.134.1 — LOS DOS CHOQUES QUE CAZÓ LA REVISIÓN, resueltos con la
     marca del body (la mini-barra y la campana viven FUERA del <main>:
     ningún selector de hermano las alcanzaba).
     (a) El precio no se muestra dos veces: con el total abajo, la
         mini-barra de arriba sobra.
     (b) La campana se sube POR ENCIMA de la barra del total — el mismo
         pisón que arreglamos en la V4.129, que volvía por otro lado. */
  body.tienda-wizard .ficha-minibarra { display: none !important; }
  /* V4.134.2 — la subida de la campana vive UNA sola vez, en el bloque
     de abajo (estaba escrita dos veces: si mañana cambia la altura de
     la barra, una de las dos queda vieja y nadie se entera). */
}

/* ============================================================
   V4.134.0 — LAS TRES FALLAS QUE APARECIERON EN LA REVISIÓN
   ============================================================
   1) La mini-barra de arriba + la barra de abajo = DOS precios en la
      misma pantalla. Se apaga desde React (el selector `~` no la
      alcanzaba: vive ANTES del main).
   2) La campana de confirmaciones (bottom 74/86px, V4.129) se montaba
      con la barra del total. Con el wizard sube por encima.
   3) En el paso 2 el pasajero no veía QUÉ había elegido: vuelve la
      barrita "Tu viaje a X" de la maqueta, con su link al paso 1.
   ============================================================ */
@media (max-width: 860px) {
  body.tienda-wizard .campana-avisos {/* V4.134.2 — una sola marca */
    bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  }
  .wiz-viaje {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    background: #fff; border-radius: 10px; padding: 10px 13px;
    margin: 0 0 10px; box-shadow: 0 2px 10px rgba(13, 31, 77, .07);
  }
  .wiz-viaje b { font: 800 14px 'Outfit', sans-serif; color: #14245c; }
  .wiz-viaje-detalle { font: 600 11.5px 'Outfit', sans-serif; color: #6b7a90; width: 100%; }
  .wiz-viaje-link {
    margin-left: auto; background: transparent; border: none; cursor: pointer;
    font: 700 12.5px 'Outfit', sans-serif; color: #1573d0; padding: 0;
  }
}

/* ============================================================
   V4.158.0 — LO QUE SE AGREGÓ EL 19/08, ADAPTADO AL CELULAR
   ============================================================
   Gonzalo: "revisá la estética y las formas porque lo vi y está
   todo mal". Tenía razón en el diagnóstico de fondo: TRES cosas
   que se agregaron ese día no tenían NINGUNA regla de celular.

   · Las ciudades de paso pasaron de 2 a 7 chips (el cambio que
     puso Rosario y Entre Ríos arriba, junto a las cabeceras). En
     380px, con el tamaño de PC, ocupan CINCO filas: empujan la
     fecha y el precio fuera de la pantalla.
   · El recorrido tipo línea de subte agrega otro bloque largo
     debajo, con el mismo alto que en PC.
   · Las fechas grandes no achican, y son cinco o seis por mes.

   No es que "se rompió": es que nació sin su versión de celular.
   ============================================================ */
@media (max-width: 640px) {
  /* Los chips de origen: más chicos, para que entren dos por fila
     y la fecha siga a la vista sin scrollear. */
  .ficha-cuerpo button[style*="border-radius: 999"],
  .ficha-caja button[style*="border-radius: 999"] {
    font-size: 12.5px !important;
    padding: 7px 12px !important;
  }

  /* El recorrido del micro: compacto. Es una referencia, no el
     protagonista de la pantalla. */
  .ficha-cuerpo [style*="recorrido"],
  .ficha-caja [style*="recorrido"] { padding: 10px 12px !important; }
}

@media (max-width: 430px) {
  /* En pantallas chicas de verdad, el nombre largo del punto de
     ascenso ("Paso de los Libres (Corrientes)") no puede dictar el
     ancho: se permite cortar en dos renglones antes que desbordar. */
  .ficha-cuerpo button[style*="border-radius: 999"] {
    font-size: 12px !important;
    padding: 6px 11px !important;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* V4.370.0 — la cabecera oscura del resumen de compra va de borde a
   borde de su caja (margen negativo). La regla general
   [style*="border-radius"] { max-width: 100% !important } la cortaba
   como una lengüeta corta en el celular. Esta va al final a propósito:
   misma especificidad, gana la última. */
.caja-cabecera-resumen { max-width: none !important; }

/* ============================================================
   V4.370.0 — LOS PASOS DE LA COMPRA TAMBIÉN TIENEN FORMA EN PC
   ============================================================
   El asistente (TU VIAJE · HABITACIÓN · EXTRAS) está prendido en las
   dos anchuras desde la V4.134, pero sus estilos vivían SÓLO adentro de
   @media (max-width: 860px). En la computadora la barra de pasos salía
   como tres botones grises sueltos y "Por persona … U$D 675 [Siguiente]"
   como texto plano al final de la página — el botón que hace avanzar la
   compra, perdido abajo de todo. Lo encontró el paneo del 05/10 mirando
   la foto (el detector no lo veía: no se escapa ni se tapa, sólo es feo).
   En PC: la misma barra de pasos, y el total con "Siguiente" pegado
   abajo de la columna mientras se baja (sticky), como una tarjeta.
   ============================================================ */
@media (min-width: 861px) {
  .wiz-pasos {
    display: flex; background: #fff; border-radius: 10px; overflow: hidden;
    margin: 0 0 14px; box-shadow: 0 2px 10px rgba(13, 31, 77, .07); max-width: 560px;
  }
  .wiz-paso {
    flex: 1; background: transparent; border: none; cursor: pointer;
    padding: 12px 6px 10px; font: 800 12.5px 'Outfit', sans-serif;
    letter-spacing: .3px; color: #6b7a90; border-bottom: 3px solid #dfe5f0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .wiz-paso .wiz-num {
    display: inline-flex; width: 19px; height: 19px; border-radius: 50%;
    background: #dfe5f0; color: #6b7a90; align-items: center;
    justify-content: center; font-size: 11px;
  }
  .wiz-paso.wiz-activo { color: #14245c; border-bottom-color: #1573d0; }
  .wiz-paso.wiz-activo .wiz-num { background: #14245c; color: #fff; }
  .wiz-paso.wiz-hecho { color: #1f8a4c; }
  .wiz-paso.wiz-hecho .wiz-num { background: #1f8a4c; color: #fff; }
  .wiz-viaje {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    background: #fff; border-radius: 10px; padding: 11px 14px;
    margin: 0 0 12px; box-shadow: 0 2px 10px rgba(13, 31, 77, .07);
  }
  .wiz-viaje b { font: 800 15px 'Outfit', sans-serif; color: #14245c; }
  .wiz-viaje-detalle { font: 600 12.5px 'Outfit', sans-serif; color: #6b7a90; width: 100%; }
  .wiz-viaje-link { margin-left: auto; background: transparent; border: none; cursor: pointer; font: 700 13px 'Outfit', sans-serif; color: #1573d0; padding: 0; }
  .wiz-barra {
    position: sticky; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #dfe7f2; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(13, 31, 77, .16); padding: 12px 16px; margin: 18px 0 0;
  }
  .wiz-barra-monto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .wiz-barra-monto span { font: 600 12px 'Outfit', sans-serif; color: #6b7a90; }
  .wiz-barra-monto b { font: 800 19px 'Outfit', sans-serif; color: #14245c; white-space: nowrap; }
  .wiz-btn {
    margin-left: auto; background: var(--color-accion-destacada); color: #fff; border: none;
    border-radius: 10px; padding: 12px 26px; cursor: pointer; font: 700 15px 'Outfit', sans-serif;
  }
}

/* ============================================================
   V4.377.0 — NINGÚN BOTÓN "WINDOWS 98" (Gonzalo, 05/10 21:13: "botones
   grises con letra negra")
   ============================================================
   Medido: casi todos eran el botón "Elegir archivo" de los campos para
   adjuntar comprobantes (Registrar pago, Cargar reserva, Pasajeros,
   Financiero…): el navegador lo dibuja gris con borde en relieve. Una regla
   para TODOS los campos de archivo, presentes y futuros. Y la red: un
   botón que alguien escriba sin estilo ni clase toma el secundario de la
   casa en vez del gris del navegador. */
input[type="file"] { font-family: inherit; font-size: 14px; color: #44506a; max-width: 100%; }
input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 14px; font-weight: 700; color: #1a2e6e;
  background: #ffffff; border: 1.5px solid #1573d0; border-radius: 10px;
  padding: 8px 14px; margin-right: 10px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #eef5ff; }
button:not([class]):not([style]) {
  font-family: inherit; font-weight: 700; color: #1a2e6e; background: #ffffff;
  border: 1.5px solid #bdc9df; border-radius: 9px; padding: 8px 13px; cursor: pointer;
}

/* ============================================================
   V4.377.0 — LAS FRANJAS DE AVISO EN EL CELULAR (revisión 06/10)
   ============================================================
   "Hay N pagos esperando…" va pegada arriba en todas las pantallas: en
   390 px ocupaba 120 px fijos. En el celular se ve el título y el botón
   en un renglón; el detalle queda para la compu. */
@media (max-width: 768px) {
  .franja-aviso { padding: 8px 12px !important; font-size: 13px !important; gap: 8px !important; line-height: 1.35 !important; }
  .franja-aviso > span { flex: 1 1 150px !important; min-width: 0 !important; }
  .franja-aviso .franja-detalle { display: none !important; }
  .franja-aviso button { padding: 7px 12px !important; font-size: 12.5px !important; }
}


/* ============================================================
   V4.379.0 — LA TIENDA A PANTALLA COMPLETA (maqueta aprobada por
   Gonzalo, 06/10 17:20–17:32: esquinas suaves e iguales, celeste vivo
   para las acciones, la foto manda, el filtro sólo si se pide)
   ============================================================ */
/* El título del banner del destino: el número vive acá (regla 5), no en la pantalla. */
.destino-banner-titulo { font-size: 56px; }
@media (min-width: 981px) {
  /* El hero gana alto: la foto es la que vende. */
  .tienda-hero:not(.tienda-hero-chico) { min-height: 430px !important; padding-top: 70px !important; padding-bottom: 130px !important; }
  .tienda-hero h1 { font-size: 54px !important; line-height: 1.04 !important; }
  .destino-banner-adentro { min-height: 380px !important; padding: 26px 40px 44px !important; }
  .destino-barra-filtros { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (min-width: 1500px) {
  .ficha-grid { max-width: 1400px; grid-template-columns: minmax(0, 1fr) 420px; gap: 34px; }
  .ficha-fotos { max-width: 1400px; }
  .ficha-mosaico { grid-template-rows: 280px 180px; }
}
@media (max-width: 760px) {
  .destino-banner-adentro { min-height: 240px !important; padding: 16px 16px 22px !important; }
  .destino-banner-titulo { font-size: 36px !important; }
  .destino-barra-filtros { padding: 10px 16px !important; gap: 12px !important; }
  .paquete-card .paquete-foto { height: 230px !important; min-height: 230px !important; }
  /* Las pastillas del destino en UN renglón que se desliza (no tres renglones). */
  .destino-barra-filtros [role="group"] { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; padding-bottom: 2px; }
  .destino-barra-filtros [role="group"] button, .destino-barra-filtros [role="group"] > span { flex: none; }
  /* Las pestañas Hotel / Destino arriba de la foto; "Ver las N fotos" se va en el celular:
     tocar la foto grande ya abre la galería. */
  .galeria-pestanas { top: 22px !important; left: 22px !important; }
  .ficha-fotos .ver-galeria { display: none !important; }
}

/* ============================================================
   V4.379.0 — LA VENTA EN EL CELULAR (manual de estilo, captura 06/10)
   ============================================================
   · Los pasos no se aprietan en cinco columnas de 70px: van en una fila
     que se desliza de costado, cada uno con su ancho.
   · Los datos que se cambian (pasajeros, bebés, habitación) son chips del
     tamaño de su texto, no renglones de pantalla entera. */
@media (max-width: 760px) {
  .pasos-venta {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pasos-venta::-webkit-scrollbar { display: none; }
  .pasos-venta > button {
    flex: 0 0 auto !important;
    min-width: 104px !important;
    padding-right: 12px !important;
    white-space: nowrap;
  }
  /* El resumen de arriba: el texto a todo el ancho y el TOTAL debajo, así
     los chips entran de a dos por renglón. */
  .barra-contrato > div:first-child { flex-basis: 100% !important; }
  /* El TOTAL ya está, grande, en el panel azul que viene justo debajo. */
  .barra-contrato > div:last-child:not(:first-child) { display: none; }
  .chips-venta > button {
    width: auto !important;
    flex: 0 0 auto;
    min-height: 38px;
  }
}


/* V4.380.0 — la franja de capacitación en el celular: botones chicos (el
   mínimo de 44 px de todo botón del celular la hacía de 70 px de alto). */
@media (max-width: 860px) {
  #franja-capacitacion button { min-height: 30px !important; padding: 3px 9px !important; font-size: 11.5px !important; }
}

/* ============================================================
   V4.384.0 — LOS LOGOS DE "CON EL RESPALDO DE"
   ============================================================
   Cada logo es una silueta (máscara): se pinta con el azul base de la casa
   y pasa a celeste al pasar el mouse (Gonzalo, 07/10). En el celular, sin
   mouse, quedan en azul. */
.respaldo-logo {
  display: block; flex: none; background-color: #0a2468;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: background-color .25s;
}
.respaldo-logo:hover { background-color: #1573d0; }
@media (prefers-reduced-motion: reduce) { .respaldo-logo { transition: none; } }

/* ============================================================
   V4.385.0 — LA WEB EN EL CELULAR
   ============================================================
   · Los puntitos del slider no son botones de 44 px de alto (la regla de
     tocar cómodo es para botones de verdad; acá el punto mide lo que se ve,
     y las flechas siguen estando).
   · El WhatsApp flotante en el celular es sólo el ícono: tapa menos.
   · El zócalo, más chico. */
.experiencia-punto { min-height: 0 !important; min-width: 0 !important; height: 10px !important; }
@media (max-width: 640px) {
  .whatsapp-flotante { padding: 13px !important; }
  .whatsapp-flotante-texto { display: none; }
  .tienda-zocalo > div { font-size: 12px !important; gap: 2px 14px !important; padding: 6px 12px !important; }
  .experiencia-slider button[aria-label="Anterior"], .experiencia-slider button[aria-label="Siguiente"] { width: 36px !important; height: 36px !important; }
}


/* ============================================================
   V4.400.0 — LA WEB EN EL CELULAR, ORDENADA (maqueta aprobada por
   Gonzalo, 15/10: "desordenado, poco estético o sin divisiones")
   ============================================================
   1. Arriba: logo y "Acceso agencias" en un renglón; el menú en UNA fila
      que se desliza (Inicio · En bus · En avión · Cruceros · A medida ·
      Quiénes somos); el zócalo en un renglón: horario y "Mi reserva".
   2. Las secciones con el mismo encabezado (ceja, título, raya amarilla,
      bajada), a la izquierda, separadas por una línea y fondos alternados.
   3. Expertos en Brasil: dos destinos por fila.
   4. La ficha del destino: una tarjeta "Elegí tu salida" con la etiqueta
      arriba y los botones en grilla de 3 (sin barra que se desliza).
   5. En avión/micro/cruceros: el tipo de viaje como control segmentado y
      "Filtros" | "Orden" en dos mitades parejas.
   6. Los logos del respaldo: tarjetas parejas de 3 por fila.
   En la computadora no cambia nada. */
.respaldo-celda { display: inline-flex; align-items: center; justify-content: center; }
.barra-titulo { display: none; }
@media (max-width: 760px) {
  /* 1 · Arriba */
  .tienda-cabecera-fila { flex-wrap: wrap !important; gap: 10px 12px !important; }
  .tienda-cabecera-marca { flex: 1 1 auto; }
  .tienda-cabecera-fila > [data-acceso="agencias"] { order: 2; padding: 9px 12px !important; font-size: 13px !important; min-height: 44px; }
  .tienda-menu { order: 3; flex: 1 0 100% !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 0 12px 2px; gap: 2px !important; }
  .tienda-menu::-webkit-scrollbar { display: none; }
  .tienda-menu { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } /* se ve que sigue */
  .tienda-menu > button { flex: none; white-space: nowrap; padding: 10px 12px !important; font-size: 15px !important; }
  .tienda-zocalo > div { justify-content: space-between !important; flex-wrap: nowrap !important; }
  .tienda-zocalo .zocalo-legajo, .tienda-zocalo .zocalo-24hs { display: none; }
  .tienda-zocalo .zocalo-horario { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* 2 · Las secciones */
  .seccion-web { margin: 0 -16px !important; width: auto !important; padding: 32px 16px 28px !important; text-align: left !important; border-top: 1px solid #E3EAEF; max-width: none !important; box-sizing: border-box; border-radius: 0 !important; }
  .seccion-respaldo { margin: 0 !important; }
  .seccion-sumate { background: #F5F8FC !important; border-left: none !important; border-right: none !important; border-bottom: none !important; display: block !important; }
  .seccion-sumate .sumate-qr { display: none; } /* en el celular el QR no sirve: ya está en el celular; queda el botón */
  .seccion-sumate a { display: flex !important; justify-content: center; min-height: 48px; align-items: center; margin-top: 16px; }
  .experiencia-slider { margin-top: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; }
  .tienda-contenido:has(> .seccion-sumate:last-child) { padding-bottom: 0 !important; }
  .tienda-pie { margin-top: 0 !important; }
  .seccion-respaldo .respaldo-celda:last-child:nth-child(3n + 1) { grid-column: 2; }
  .seccion-opiniones, .seccion-respaldo { background: #ffffff; }
  .seccion-ofertas, .seccion-expertos { background: #F5F8FC; }
  .seccion-web .ceja-seccion { color: var(--color-accion-destacada) !important; font-size: 12px !important; letter-spacing: .14em !important; text-align: left !important; }
  .seccion-web .titulo-seccion { font-size: 28px !important; line-height: 1.1 !important; color: #1a2e6e !important; text-align: left !important; margin: 6px 0 0 !important; }
  .seccion-web .titulo-seccion::after { content: ''; display: block; width: 48px; height: 4px; border-radius: 2px; background: #FFD400; margin-top: 10px; }
  .seccion-web .bajada-seccion { text-align: left !important; font-size: 14px !important; margin-top: 8px !important; }
  .seccion-web .grilla-vidriera { margin-top: 16px !important; }

  /* 3 · Expertos en Brasil */
  .seccion-expertos .sec-titulo { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: 16px !important; }
  .seccion-expertos .sec-titulo h2 { font-size: 28px !important; }
  .seccion-expertos .sec-titulo h2 > span[aria-hidden] { width: 48px !important; background: #FFD400 !important; }
  .seccion-expertos .destinos-elegi { margin-left: 0 !important; font-size: 15px !important; color: #5B6770 !important; font-weight: 600 !important; }
  .destinos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .destino-tarjeta > span:first-child { padding-top: 0 !important; height: 190px; }
  .destino-tarjeta > span:last-child { padding: 40px 10px 10px !important; }
  .destino-tarjeta b { font-size: 16px !important; }
  .destino-tarjeta [data-medio-destino] { font-size: 10px !important; padding: 3px 7px !important; }
  .destino-tarjeta > span:last-child > span:last-child { font-size: 14px !important; }

  /* 4 · La ficha del destino */
  .destino-barra-fondo { background: transparent !important; border-bottom: none !important; }
  .destino-banner-adentro { padding-bottom: 34px !important; }
  .destino-barra-filtros { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; margin: -16px 12px 0 !important; padding: 16px !important; gap: 14px !important; background: #ffffff; border-radius: 16px; box-shadow: 0 6px 20px rgba(13,31,77,.12); position: relative; z-index: 1; }
  .destino-barra-filtros .barra-titulo { display: block; font-family: Outfit, Arial, sans-serif; font-size: 18px; color: #1a2e6e; }
  .destino-barra-filtros .barra-cuenta { grid-column: 2; grid-row: 1; margin-left: 0 !important; font-size: 13px !important; }
  .destino-barra-filtros [role="group"] { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; overflow: visible !important; padding: 0 !important; }
  .destino-barra-filtros [role="group"] + [role="group"] { border-top: 1px solid #E3EAEF; padding-top: 14px !important; }
  .destino-barra-filtros [role="group"] > .barra-etiqueta { grid-column: 1 / -1; letter-spacing: .08em !important; }
  .destino-barra-filtros [role="group"] > button { width: 100%; min-height: 44px; margin: 0 !important; justify-content: center; }

  /* 5 · La barra de la lista */
  .chips-tipo { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px !important; background: #F2F6FB; border-radius: 12px; padding: 4px; }
  .chips-tipo > button { width: 100%; min-height: 40px; padding: 0 4px !important; margin: 0 !important; border-color: transparent !important; justify-content: center; font-size: 13px !important; }
  .barra-orden { display: block !important; }
  .barra-orden-cuantos:empty { display: none; }
  .barra-orden-acciones { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; width: 100%; margin-left: 0 !important; }
  .barra-orden-acciones > * { width: 100%; min-height: 44px; margin: 0 !important; box-sizing: border-box; justify-content: center; }
  .barra-orden-acciones > .select-orden { height: 44px !important; padding: 0 10px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; }
  .barra-orden-acciones > button { height: 44px !important; border-radius: 10px !important; }

  /* La ficha del paquete: las solapas que no entran se ven que siguen. */
  .ficha-solapas { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .ficha-solapas::-webkit-scrollbar { display: none; }

  /* 6 · El respaldo */
  .seccion-respaldo .respaldo-fila { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; justify-content: stretch !important; }
  .seccion-respaldo .respaldo-celda { height: 64px; background: #ffffff; border: 1px solid #E3EAEF; border-radius: 10px; padding: 8px; box-sizing: border-box; overflow: hidden; }
  .seccion-respaldo .respaldo-logo { max-width: 100%; max-height: 100%; }
}

/* ============================================================
   V4.400.0 — EL SISTEMA EN EL CELULAR, PAREJO
   ============================================================
   Gonzalo (15/10): "todo desordenado, poco estético, sin divisiones;
   revisá todo el sistema". Recorrida de las 16 pantallas de Gerencia a
   390px: cada una tenía su propio margen lateral (Reservas 4px, Cuentas
   24, Pedidos 20, Calendario 12) y el "← Volver" pegado al borde. Ahora
   todas con el mismo margen de 12px, alineadas con el Volver.
   Los números de resumen (Clientes, Gastos, Dashboard) iban uno por
   renglón —una pared de tarjetas con un 0 adentro—: van de a dos,
   como "Mis números" de Mi Panel. La computadora no cambia. */
@media (max-width: 760px) {
  .contenido-principal > div:not(.cotizador-marco) { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; }
  .kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}

/* ============================================================
   V4.401.0 — LA TARJETA DEL DESTINO, CON LO IMPORTANTE RESALTADO (Gonzalo 15/10)
   ============================================================
   "En las placas de destino es mucha info en blanco y poco orden;
   meter algún color correspondiente a su zona para destacar, por
   ejemplo, lo de sin tarjeta y sin interés". Se probó un panel blanco
   abajo y Gonzalo lo frenó: "las tarjetas me gustan enteras como están,
   sólo quiero que resaltes algunas cosas". Entonces la tarjeta sigue
   entera sobre la foto, y se ordena por peso:
   · lo secundario (datos del viaje, "precio final por persona") baja de
     tono y de tamaño;
   · el precio queda como protagonista;
   · las salidas y "Sin tarjeta y sin interés" van en una pastilla del
     color de su zona (Brasil amarillo, Argentina celeste, Caribe rosa…).
   La tarjeta del vendedor (adentro del Cotizador) no cambia. */
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-cuerpo .tv-hotel { color: #fff !important; font-weight: 600; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-cuerpo .tv-datos { color: rgba(255, 255, 255, .72) !important; font-size: 12.5px !important; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-cuerpo .tv-fecha { background: var(--zona, #00b4f0) !important; color: var(--zona-texto, #fff) !important; border: 0 !important; border-radius: 999px; padding: 4px 11px !important; font-size: 11.5px !important; font-weight: 800; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-precio > div:first-child .tv-etiqueta-precio { color: rgba(255, 255, 255, .7) !important; font-size: 11.5px !important; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-precio > div:first-child .tv-monto { font-size: 28px !important; line-height: 1.1; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-precio > div:first-child .tv-cuotas { color: rgba(255, 255, 255, .88) !important; }
.tarjeta-viaje:not(.tarjeta-viaje--vendedor) .tv-precio > div:first-child .tv-sin-tarjeta { display: block; width: fit-content; margin-top: 7px; background: var(--zona, #00b4f0) !important; color: var(--zona-texto, #fff) !important; border-radius: 999px; padding: 4px 11px; font-size: 11.5px !important; font-weight: 800; }