/* ============================================================
   UNIVERSAL TOURS BOLIVIA - Buscador de Vuelos (Home) - v3
   Correccion sobre v2: el sitio YA tiene un skin completo bajo
   .search-forms (tabs, pills nativos en #divOwRt, layout flex de
   trayectoInputs, posicionamiento de pasajeros, etc.) con muchas
   reglas !important. Esta version:
     1) NO duplica lo que .search-forms ya hace bien (pills, flex
        de trayectoInputs, posicion de pasajeros).
     2) Sube la especificidad prefijando con .search-forms para
        poder ganarle a esas reglas donde SI hace falta cambiar algo
        (mostrar los <label> de campo, colores/paleta nueva).
     3) Corrige el bug de flexbox (min-width:0) que partia el campo
        Origen a su propia fila.
   Prefijo propio: ut3-bv-
   ============================================================ */

#tabsHorizontal,
#tabContainer,
#buscadorVuelos {
  --ut3bv-amarillo:  #EDD149;
  --ut3bv-navy:      #1A3869;
  --ut3bv-navy-dark: #0F2347;
  --ut3bv-coral:     #C4441A;
  --ut3bv-tinta:     #111827;
  --ut3bv-tinta-f:   #9CA3AF;
}

/* ---------- TABS ---------- */
/* El sitio ya tiene su propio look de tabs vía .search-forms #tabsBusqueda.
   Solo ajustamos color/underline para acercarnos a la paleta pedida,
   con la MISMA especificidad (.search-forms + ids) para poder ganar. */

.search-forms #tabsBusqueda ul#tabsHorizontal > li.active {
  border-bottom-color: var(--ut3bv-navy-dark) !important;
}

.search-forms #tabsBusqueda ul#tabsHorizontal > li > a {
  color: var(--ut3bv-navy) !important;
}

/* Las pestañas venian centradas y muy grandes (iconos 22px, altura 80px).
   La propuesta las quiere compactas y alineadas a la izquierda. */

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal {
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li {
  height: 50px !important;
  margin: 0 20px -1px 0 !important;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a {
  font-size: 13px !important;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a > i {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin-right: 6px !important;
}

/* ---------- Alineación: pestañas vs pills/campos ---------- */
/* Las pestañas (#tabsHorizontal, dentro de #tabsBusqueda directamente)
   arrancaban 40px MAS a la izquierda que los pills y campos (dentro de
   #tabContainer, que trae "margin:0 40px 32px" nativo). Por eso el
   Origen/las pills no quedaban alineados con "Vuelos" arriba. Igualamos
   quitando ese margen lateral de #tabContainer. */

.search-forms.search-forms #tabsBusqueda #tabContainer {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------- Pills de Solo ida / Multidestino: hacerlos visibles ---------- */
/* El fondo nativo es casi invisible (5% de opacidad) y sin borde, por lo
   que se veian como una mancha inconsistente en vez de un pill limpio.
   Les damos un borde sutil y un poco mas de opacidad de fondo. */

.search-forms.search-forms #divOwRt .container > div label {
  border: 1.5px solid rgba(26, 56, 105, .35) !important;
  background-color: rgb(247 234 173) !important;
  color: #000 !important;
}
.search-forms.search-forms #divOwRt .container > div label:hover {
	background: #0f2347 !important;
    color: #fff !important;
}
.search-forms.search-forms #divOwRt .container > div label:focus {
	background: #0f2347 !important;
    color: #fff !important;
}
.search-forms.search-forms #divOwRt .container > div input:checked + label {
 border: 1.5px solid var(--ut3bv-navy-dark) !important;
 background: #0f2347 !important;
 color: #fff !important;
}

/* ---------- Labels de campo (Origen/Destino/Salida/Regreso, y las demas pestañas) ---------- */
/* El sitio oculta TODOS los <label> dentro de .tab-content por defecto
   (.search-forms .tab-content label{display:none}). Forzamos a mostrar
   solamente los que llevan nuestra clase, con especificidad igual + !important.
   Esta regla YA es generica (no tiene scope de #buscadorVuelos), asi que
   sirve para Vuelos, Vuelo+Hotel, Hoteles y Paquetes por igual. */

.search-forms .tab-content label.ut3-bv-field-label {
  display: block !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ut3bv-navy);
  opacity: .8;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* ---------- Multidestino (nuevo pill dentro de #divOwRt) ---------- */
/* No necesita CSS propio: hereda el mismo estilo de pill que ya tienen
   "Solo ida" / Equipaje / Vuelos directos, porque vive dentro del mismo
   #divOwRt .container que ya está estilizado por el sitio. */

/* ---------- "Eliminar Destino" (junto al pill Multidestino) ---------- */
/* Nuevo link que vive en el mismo #divOwRt .container que los pills,
   pero es un <a>, no un checkbox+label, asi que no hereda el estilo de
   pill nativo. Solo se muestra cuando hay mas de 1 trayecto (lo maneja
   el JS al final de BuscadorVuelos.htm) y hace lo mismo que el viejo
   "Eliminar trayecto" (#btnEliminar), que ahora vive oculto dentro de
   .nuevo-tramo. Se muestra display:flex para alinearse verticalmente
   con los pills de la misma fila; el JS solo alterna entre "" y "none".
   Estilo: replica a mano el mismo pill (fondo/borde/radio/padding) que
   el sitio ya aplica a los pills reales de #divOwRt .container > div
   label, ya que un <a> no puede heredar la regla ":checked + label". */

.search-forms.search-forms #divOwRt .container #ut3bvEliminarDestinoWrap {
  display: flex;
  align-items: center;
}

.search-forms.search-forms #divOwRt .container #ut3bvEliminarDestino {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 48px;
  border: 1.5px solid rgba(196, 68, 26, .45);
  background-color: rgba(255, 255, 255, .35);
  color: var(--ut3bv-coral) !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
}

.search-forms.search-forms #divOwRt .container #ut3bvEliminarDestino:hover {
  border: 1.5px solid var(--ut3bv-coral) !important;
  background-color: rgba(255, 255, 255, .55);
}

/* ---------- Fila de campos por tramo (estructura PLANA, solo Vuelos) ---------- */
/* IdaRegreso.htm ya no anida trayectoInputs > clearfix > campos.
   Ahora "trayectoInputs" y "ut3-bv-tramo" viven en el MISMO elemento
   (#journey_{id}), y los campos (.ut3-bv-field) son hijos directos,
   igual que en la propuesta (.s-panel > .sf, .sf, .sf...). Las reglas
   nativas de newStyles.min.css que apuntaban a ".trayectoInputs>div"
   ya no aplican (esa estructura no existe mas), asi que definimos
   nuestro propio flex limpio, sin pelear con nada. */

.search-forms.search-forms #buscadorVuelos .ut3-bv-tramo {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
  align-items: flex-end;
   margin-bottom: 10px;
}

.search-forms.search-forms #buscadorVuelos .ut3-bv-tramo-title {
  flex: 1 1 100%;
  color: var(--ut3bv-navy-dark) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  
}

/* ---------- Campos de TODAS las pestañas (Vuelos, Vuelo+Hotel, Hoteles, Paquetes) ---------- */
/* Generalizado (sin scope de #buscadorVuelos): la clase .ut3-bv-field y
   .ut3-bv-fields-row son nuestras, no colisionan con nada del sitio, asi
   que un solo bloque de reglas sirve para las 4 pestañas del buscador.
   IMPORTANTE: para que esto funcione, los templates BuscadorHoteles.htm,
   BuscadorVueloHotel.htm y BuscadorPlanes.htm tienen que tener las
   clases "ut3-bv-field", "ut3-bv-field-label" y "ut3-bv-fields-row" en
   su HTML -- este CSS solo no hace nada si esas clases no existen ahi. */

.search-forms.search-forms .ut3-bv-field {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.search-forms.search-forms .ut3-bv-field input[type="text"] {
  min-width: 0;
}

/* ---------- Proporciones de campo (igual que la propuesta) ---------- */
/* En universal_Tours_2.html (codigo real de la propuesta) las proporciones
   son: Origen/Destino flex:1 (default), Salida/Regreso flex:.7, Pasajeros
   flex:.65 -- todos como HERMANOS directos del mismo flex.
   OJO: en VUELOS, Origen/Destino/Salida/Regreso viven DENTRO de #journeys
   (por los tramos de multidestino), mientras que Pasajeros (.SpaceB) es
   hermano de #journeys en un flex EXTERIOR distinto. Por eso su proporcion
   no puede ser literalmente ".65": hay que calcular cuanto debe crecer
   #journeys-como-bloque-completo para que, por dentro, cada campo
   individual quede en la proporcion correcta. Este valor (0.15) fue
   calculado y confirmado en vivo con Claude in Chrome.
   En Vuelo+Hotel, Hoteles y Paquetes NO hay ese problema (no tienen
   multidestino/tramos), asi que ahi SI se puede usar la proporcion
   literal de la propuesta (.65) directamente en el mismo nivel de flex
   que los demas campos. */

.search-forms.search-forms #buscadorVuelos .ut3-bv-field:nth-of-type(3),
.search-forms.search-forms #buscadorVuelos .ut3-bv-field:nth-of-type(4) {
  flex: 0.7 1 0 !important;
}

/* OJO: la regla de arriba (nth-of-type 3/4) apunta a CUALQUIER
   .ut3-bv-field dentro de #buscadorVuelos, sin importar de que fila es
   -- pensada solo para Salida/Regreso en la fila principal. Al agregar
   la clase "ut3-bv-field" tambien a Aerolinea/Equipaje/Clase (en "Otras
   Opciones", #OpcAvanced, que es su PROPIA fila flex de 3 hijos), Clase
   termina siendo el 3er hijo de ESA fila y matcheaba por accidente esa
   misma regla, quedando mas angosto que Aerolinea (confirmado en vivo).
   La revertimos aqui con mas especificidad (2 IDs: #buscadorVuelos
   #OpcAvanced) para que Aerolinea/Clase/Promocode repartan el espacio
   por igual, como el resto de las cajas homogeneas. */
.search-forms.search-forms #buscadorVuelos #OpcAvanced .ut3-bv-field {
  flex: 1 1 0 !important;
}

/* El ancho de Pasajeros (vuelos) se define mas abajo, junto con el resto
   de su posicionamiento (ver ".SpaceB { position:relative... }" ), para
   no repetir la misma propiedad "flex" en dos reglas distintas. */

/* Vuelo+Hotel: Origen(1) Destino(2) Salida(3) Regreso(4) -- mismo patron
   que Vuelos, pero SIN el problema de anidamiento (no hay tramos), asi
   que la proporcion de Habitaciones (.SpaceB) SI puede ser literal. */
.search-forms.search-forms #buscadorVueloHotel .ut3-bv-field:nth-of-type(3),
.search-forms.search-forms #buscadorVueloHotel .ut3-bv-field:nth-of-type(4) {
  flex: 0.7 1 0 !important;
}
.search-forms.search-forms #buscadorVueloHotel .SpaceB {
  flex: 0.65 1 0 !important;
}

/* Hoteles: Destino(1) CheckIn(2) CheckOut(3) Habitaciones(.SpaceB).
   Ajustado a pedido: el campo Destino ("A donde quieres ir") quedaba
   demasiado ancho (flex:1 por defecto) y le robaba espacio visual a
   Check In/Check Out/Habitaciones. Le damos su propia proporcion (0.8)
   en vez del default, y subimos un poco las de sus 3 hermanos. */
.search-forms.search-forms #buscadorHoteles .ut3-bv-field:nth-of-type(1) {
  flex: 0.8 1 0 !important;
}
.search-forms.search-forms #buscadorHoteles .ut3-bv-field:nth-of-type(2),
.search-forms.search-forms #buscadorHoteles .ut3-bv-field:nth-of-type(3) {
  flex: 0.75 1 0 !important;
}
.search-forms.search-forms #buscadorHoteles .SpaceB {
  flex: 0.7 1 0 !important;
}

/* Paquetes: Destino(1) CheckIn(2) CheckOut(3) Habitaciones(.SpaceB).
   El id real es "opciones{IDBuscador}" (ej. "opciones1") -- NO
   "opcionesViaje" (que usan Vuelos/Hoteles/Vuelo+Hotel) -- por eso el
   ":not([id^='opcionesViaje'])" es necesario, si no el selector chocaria
   con las otras 3 pestañas. */
.search-forms.search-forms [id^="opciones"]:not([id^="opcionesViaje"]) .ut3-bv-field:nth-of-type(2),
.search-forms.search-forms [id^="opciones"]:not([id^="opcionesViaje"]) .ut3-bv-field:nth-of-type(3) {
  flex: 0.7 1 0 !important;
}
.search-forms.search-forms [id^="opciones"]:not([id^="opcionesViaje"]) .SpaceB {
  flex: 0.65 1 0 !important;
}

/* ---------- Caja unificada: título + campo dentro del mismo recuadro ---------- */
/* Antes el fondo crema estaba SOLO en el <input>, y la etiqueta
   (ORIGEN/DESTINO/...) quedaba flotando arriba, afuera de la caja. La
   propuesta los quiere juntos, como una sola tarjeta. Movemos el fondo/
   padding al contenedor (.ut3-bv-field / .SpaceB) y dejamos el input
   transparente y sin su propio borde, para que ambos se vean como una
   sola caja. Generalizado para las 4 pestañas. */

.search-forms.search-forms .ut3-bv-field,
.search-forms.search-forms .SpaceB {
  background: rgba(255, 255, 255, .55) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}

.search-forms.search-forms .ut3-bv-field input[type="text"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ---------- Botón Buscar (paleta nueva, icono) — las 4 pestañas ---------- */

.search-forms .tab-content .btnbuscadorprincial#buscarVuelos,
.search-forms .tab-content .btnbuscadorprincial#buscarVueloHotel,
.search-forms .tab-content .btnbuscadorprincial#buscarHotel,
.search-forms .tab-content .btnbuscadorprincial#buscarPaquete {
  background-color: var(--ut3bv-navy-dark) !important;
  gap: 8px;
}

.search-forms .tab-content .btnbuscadorprincial#buscarVuelos:hover,
.search-forms .tab-content .btnbuscadorprincial#buscarVueloHotel:hover,
.search-forms .tab-content .btnbuscadorprincial#buscarHotel:hover,
.search-forms .tab-content .btnbuscadorprincial#buscarPaquete:hover {
  background-color: var(--ut3bv-coral) !important;
}

.search-forms .tab-content .btnbuscadorprincial#buscarVuelos i,
.search-forms .tab-content .btnbuscadorprincial#buscarVueloHotel i,
.search-forms .tab-content .btnbuscadorprincial#buscarHotel i,
.search-forms .tab-content .btnbuscadorprincial#buscarPaquete i {
  font-size: 14px;
}

/* ---------- Quitar la tarjeta blanca con sombra ---------- */
/* El sitio pone el buscador dentro de una tarjeta blanca redondeada con
   sombra (.search-forms #tabsBusqueda{background:white;border-radius:16px;
   box-shadow:...}). La propuesta va directo sobre el fondo amarillo, sin
   tarjeta. Mantenemos el resto de esa regla (display:flex;flex-direction),
   solo neutralizamos fondo/sombra/radio. */

.search-forms #tabsBusqueda {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- Checkboxes de Equipaje/Vuelos directos en Otras Opciones ---------- */
/* Decision de producto: estos 2 checkboxes ya NO deben aparecer en
   "Otras Opciones" de Vuelos (antes se mostraban con su propio estilo
   simple de checkbox+texto). Solo quedan visibles "Aerolinea" y
   "Clase". Bootstrap reacomoda esas dos columnas para llenar la fila
   sin dejar hueco (confirmado en vivo), asi que no hace falta tocar
   su ancho. El HTML de los checkboxes se deja intacto en el .htm (no
   se borran los inputs/labels, solo se ocultan), por si mas adelante
   se necesita revertir esto rapido. */

.search-forms #buscadorVuelos #OpcAvanced .ut3-bv-checkopt {
  display: none !important;
}

/* ---------- Responsive: mobile (probado en vivo, las 4 pestañas) ---------- */
/* Todo lo anterior en este archivo asume escritorio (fila horizontal de
   cajas). En mobile hay que apilar cada campo en su propia fila. El
   detalle molesto: varias de las reglas nativas que tuvimos que "ganarle"
   en escritorio (proporciones nth-of-type, flex:1 1 50% de
   #buscadorVueloHotel, el margin-top:-40px de #buscadorVuelos .form-submit)
   siguen activas en mobile tambien (la especificidad no depende del
   media query), asi que hay que volver a igualarlas aqui, esta vez
   forzando el apilamiento en vez de las proporciones de escritorio. */

@media (max-width: 767px) {
  .search-forms .tab-content label.ut3-bv-field-label {
    display: block !important;
  }

  /* Apilar en columna, sin wrap (wrap en columna puede crear una
     "segunda columna" y provocar solapamientos). */
  .search-forms.search-forms .ut3-bv-fields-row,
  .search-forms.search-forms #buscadorVuelos .ut3-bv-tramo {
    margin-top: -26px;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  /* Cada campo a 100% de ancho, pisando las proporciones de escritorio
     (incluidas las versiones con nth-of-type y con ID de cada pestaña,
     que si no se igualan aqui siguen ganando por especificidad). */
  .search-forms.search-forms .ut3-bv-field,
  .search-forms.search-forms .SpaceB,
  .search-forms.search-forms #buscadorVuelos .ut3-bv-field:nth-of-type(3),
  .search-forms.search-forms #buscadorVuelos .ut3-bv-field:nth-of-type(4),
  .search-forms.search-forms #buscadorVueloHotel .ut3-bv-field:nth-of-type(3),
  .search-forms.search-forms #buscadorVueloHotel .ut3-bv-field:nth-of-type(4),
  .search-forms.search-forms #buscadorHoteles .ut3-bv-field:nth-of-type(1),
  .search-forms.search-forms #buscadorHoteles .ut3-bv-field:nth-of-type(2),
  .search-forms.search-forms #buscadorHoteles .ut3-bv-field:nth-of-type(3),
  .search-forms.search-forms [id^="opciones"]:not([id^="opcionesViaje"]) .ut3-bv-field:nth-of-type(2),
  .search-forms.search-forms [id^="opciones"]:not([id^="opcionesViaje"]) .ut3-bv-field:nth-of-type(3) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Vuelo+Hotel tiene su propia regla nativa con ID
     (".trayectoInputsVH div[class*='col-']{flex:1 1 50%}") que tambien
     hay que igualar aqui. */
  .search-forms #buscadorVueloHotel .trayectoInputsVH div[class*="col-"] {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Boton a ancho completo, debajo de todo. */
  .search-forms.search-forms .ut3-bv-btn-wrap {
    width: 100% !important;
    height: auto !important;
  }

  .search-forms.search-forms .ut3-bv-btn-wrap .btnbuscadorprincial {
    width: 100% !important;
  }

  /* #buscadorVuelos y #buscadorVueloHotel traen un
     ".form-submit{margin-top:-40px}" nativo (pensado para el layout de
     escritorio) que en columna hace que el boton quede ENCIMA de
     Pasajeros/Habitaciones. Como nuestro boton conserva la clase
     "form-submit" (no la quitamos, por si el sitio la usa en JS),
     tenemos que igualar la especificidad exacta de esa regla nativa
     para poder darle un margen positivo. */
  .search-forms #buscadorVuelos .form-submit.ut3-bv-btn-wrap,
  .search-forms #buscadorVueloHotel .form-submit.ut3-bv-btn-wrap {
    margin-top: 48px !important;
  }
}

/* ============================================================
   FIX EN VIVO (confirmado con Claude in Chrome contra el sitio real)
   ============================================================ */

/* 1) La tarjeta blanca con sombra NO viene de #tabsBusqueda (ese ya
   estaba bien) sino de su contenedor padre .form-panel, definido en
   style.css: ".search-forms .form-panel{background-color:rgba(0,0,0,.7);
   border-radius:5px}". El navegador ademas calculaba blanco/15px/sombra
   desde ahi mismo (cascada + !important de otras reglas). La quitamos
   por completo para que el buscador quede directo sobre el amarillo,
   como en la propuesta. */

.search-forms .form-panel {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* 2) Los campos de texto (Origen/Destino/Salida/Regreso) tenian fondo
   blanco solido + borde grueso navy por una regla en
   /externos/newStyles.min.css, que se carga al FINAL del <body> (despues
   de todo lo que hay en <head>, incluyendo nuestro CSS). Con la misma
   especificidad y !important en ambos lados, esa regla gana por orden de
   carga. Subimos la especificidad repitiendo la clase ".search-forms"
   (truco valido en CSS: no cambia a que le aplica, solo cuenta doble
   para el calculo de especificidad) para ganarle sin depender del orden. */

/* 3) "Pasajeros" quedaba como dropdown flotante arriba a la derecha
   (position:absolute nativo) en vez de una 5ta caja en la fila, como en
   la propuesta. Ademas, la regla nativa de newStyles.min.css le da a
   Origen/Destino flex-basis:50% cada uno (pensado para cuando eran solo
   2 campos), lo que no deja espacio para una 5ta caja. Corregimos ambas
   cosas. */

.search-forms.search-forms .SpaceB {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0.15 1 0 !important;
  margin-bottom: 16px;
  /* FIX (confirmado en vivo): ".ut3-bv-fields-row" tiene align-items:
     stretch, y con Multidestino #journeys crece en alto (varios tramos
     apilados). Sin "align-self", "Pasajeros" (que no tiene alto propio)
     se estiraba para igualar esa altura en vez de quedarse fijo arriba.
     Pero align-self solo no basta: sin una altura explicita, la caja se
     encoge a su contenido (66px) y queda mas BAJA que sus vecinos
     (82px), es decir cambia un desalineamiento por otro. Le damos la
     misma altura fija que ya usa el boton Buscar (height:80px, ver
     ".ut3-bv-btn-wrap") para que coincida en cualquier escenario. */
  align-self: flex-start !important;
  height: 80px !important;
}

.search-forms.search-forms .SpaceB > label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ut3bv-navy);
  opacity: .8;
  margin: 0 0 4px !important;
}
 @media (max-width: 767px) {
    .alert-PersistMsg {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        padding: 8px 32px 8px 12px !important;
        font-size: 12px !important;
        margin: 0 !important;
        z-index: 99999 !important;
    }
    .alert-PersistMsg img {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
    .alert-PersistMsg #countDownDate {
        font-weight: 600 !important;
    }
    .alert-PersistMsg .close {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
}
.search-forms.search-forms .ut3-bv-fields-row {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap;
  gap: 8px !important;
  width: 100% !important;
}

/* ---------- Fix en vivo: Vuelo+Hotel / Hoteles / Paquetes ---------- */
/* Al revisar en el sitio real, aparecieron 2 problemas que no existian
   en Vuelos, propios de estas 3 pestañas:

   1) HABITACIONES (.SpaceB) seguia con "position:absolute" en Vuelo+Hotel
      y Hoteles, por una regla NATIVA con ID propio de cada pestaña
      (".search-forms #buscadorVueloHotel .trayectoInputsVH>div.col-md-2"
      y ".search-forms #buscadorHoteles #opcionesViaje div:nth-child(4n)").
      Un ID le gana a cualquier cantidad de clases repetidas, asi que el
      truco de ".search-forms.search-forms" no alcanzaba aqui -- hubo que
      igualar la especificidad usando el MISMO id en el selector.

   2) Vuelo+Hotel tenia el mismo bug de flex-basis:50% que tuvimos en
      Vuelos (".trayectoInputsVH div[class*='col-']{flex:1 1 50%}"),
      tambien con ID propio.

   3) En Paquetes, ".ut3-bv-fields-row" colapsaba a 0px de ancho (siendo
      un div normal, deberia ocupar 100% por defecto, pero algo en la
      cascada lo encogia). Se soluciono forzando width:100% explicito
      arriba, en la regla generalizada. */

.search-forms #buscadorVueloHotel .trayectoInputsVH div[class*="col-"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.search-forms #buscadorVueloHotel .trayectoInputsVH > div.SpaceB {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
}

.search-forms #buscadorHoteles #opcionesViaje div.SpaceB {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
}

/* ---------- Fix en vivo: popover de pasajeros (Hoteles) se "sobresalta" ---------- */
/* La regla nativa ".search-forms #buscadorHoteles #opcionesViaje div:nth-child(4n)"
   (en newStyles_min.css / newStyles_minExter.css) es un selector DESCENDIENTE, no
   de hijo directo. Por eso no solo afecta al campo Habitaciones de arriba (ya
   resuelto con "div.SpaceB" justo arriba) -- tambien cae sobre CUALQUIER <div>
   dentro del popover que resulte ser el 4°, 8°, 12°... hijo de SU PROPIO padre:

   1) La fila de edad del 4° niño (".IfPassRoomAges > .IfPassAgesCont" #4) se
      volvia position:absolute; top:0; right:0, montandose encima de la fila
      del 1er niño.
   2) La 4a habitacion (".IfPassRooms > .IfPassRoom" #4) sufria lo mismo,
      montandose encima de la 1a habitacion -- y como el boton "Eliminar"
      quedaba fuera del área visible del popover, el handler de "click afuera"
      lo interpretaba como click fuera y cerraba el popover.

   Se neutraliza con la MISMA especificidad (mismo id "#opcionesViaje"), pero
   acotado a ".IfPassPopover" para no tocar nada fuera del popover. */
.search-forms.search-forms #buscadorHoteles #opcionesViaje .IfPassContainer .IfPassPopover div:nth-child(4n) {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
}

/* La regla nativa viene en pareja con esta otra que esconde el <label> del
   mismo div:nth-child(4n) (".SpaceB>label, ... div:nth-child(4n)>label{display:none}").
   Cada .IfPassRoom (Habitacion 2, 3, 4...) agrega una fila extra de titulo
   ("Habitacion N" + Eliminar) que no existe en la Habitacion 1, asi que el
   conteo se recorre y la fila que cae en la posicion 4/8/12 cambia segun el
   numero de habitacion -- a veces le toca a ".IfPassRoomChd" (Niños) y su
   <label> "Niños" desaparece. Se restaura con la misma tecnica de arriba. */
.search-forms.search-forms #buscadorHoteles #opcionesViaje .IfPassContainer .IfPassPopover div:nth-child(4n) > label {
  display: block !important;
}

/* La misma regla nativa tambien trae "padding:0 !important" para el div que
   cae en la posicion 4/8/12..., y por especificidad de ID le ganaba al
   padding propio de estas dos filas (".IfPassAgesCont" = 4px 4px 4px 12px,
   ".container-Table-Passenger" = 4px), dejando "Edad del menor 4", "Edad
   del menor 8", etc. sin sangria izquierda y desalineados con el resto.
   Se restaura para TODAS las filas de este tipo (no solo la 4a/8a) para
   que quede resuelto sin importar cuantos niños se agreguen. */
.search-forms.search-forms #buscadorHoteles #opcionesViaje .IfPassContainer .IfPassPopover .IfPassRooms .container-Table-Passenger {
  padding: 4px !important;
}
.search-forms.search-forms #buscadorHoteles #opcionesViaje .IfPassContainer .IfPassPopover .IfPassRooms .IfPassRoomAges .IfPassAgesCont {
  padding: 4px 4px 4px 12px !important;
}

/* #journeys ahora solo apila bloques .ut3-bv-tramo (uno por tramo); cada
   tramo maneja su propia fila de campos internamente (ver arriba). Solo
   aplica a Vuelos (unica pestaña con multiples tramos/multidestino). */
.search-forms.search-forms #buscadorVuelos #journeys.ut3-bv-journeys {
  display: flex !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  flex-direction: column;
  /*gap: 8px !important;*/
}
@media (max-width: 991px) {
  #tabContainer .ut3-bv-btn-wrap.ut3-bv-btn-wrap.ut3-bv-btn-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  #tabContainer .ut3-bv-btn-search.ut3-bv-btn-search.ut3-bv-btn-search {
    width: auto !important;
    min-width: 200px !important;
    max-width: 280px !important;
    flex: 0 0 auto !important;
  }
}
.search-forms.search-forms .tab-content input[type="text"] {
  text-overflow: ellipsis;
}

/* NOTA: el fondo/borde del input ya NO se pone aquí -- se unificó arriba
   en ".ut3-bv-field input[type=text]" (transparente, dentro de la caja
   crema del contenedor). El select (ej. clase de vuelo) sigue con su
   propio fondo blanco solido, eso no cambia. */
.search-forms.search-forms .tab-content select {
  border: none !important;
  border-radius: 8px !important;
}

/* ---------- Botón Buscar movido dentro de la fila de campos ---------- */
/* El boton vivia en un <div class="form-submit"> totalmente separado,
   mas abajo del formulario. Se movio (en cada template .htm) para que
   sea el ultimo elemento de .ut3-bv-fields-row, junto a Pasajeros, igual
   que en la propuesta (boton como ultimo elemento de la misma fila).
   Generalizado: sirve para las 4 pestañas por igual. */

.search-forms.search-forms .ut3-bv-btn-wrap {
  display: flex !important;
  margin: 0px !important;
  flex: 0 0 auto !important;
  /* align-items: flex-end; */
  height: 80px;
}

.search-forms.search-forms .ut3-bv-btn-wrap .btnbuscadorprincial {
  height: auto !important;
  white-space: nowrap;
}

/* ---------- Ancho del contenedor: que abarque casi toda la pantalla ---------- */
/* El buscador vivia dentro de un Bootstrap .container clasico (max-width
   1170px), lo que dejaba franjas amarillas enormes a los lados en
   pantallas anchas. La propuesta usa max-width:1440px (ver .searcher-inner
   en universal_Tours_2.html), mucho mas ancho. Igualamos ese valor para
   que la caja de busqueda "abarque" el recuadro amarillo como se pide,
   sin llegar a ser 100% (eso se veria demasiado estirado en pantallas
   grandes, la propuesta tampoco llega a los bordes). */

.search-forms.search-forms > .container {
  width: 100% !important;
  max-width: 1440px !important;
}

/* ============================================================
   FIX: homogeneizar el campo "Destino" de Ofertas/Paquetes
   ============================================================
   Confirmado en vivo con Claude in Chrome (universal.ideasfractal.com,
   escritorio y responsive): a diferencia de Vuelos/Vuelo+Hotel/Hoteles
   (donde el campo Origen/Destino es un <input type="text"> simple con
   label.ut3-bv-field-label), en Ofertas el campo "Destino" se renderiza
   con un widget select2 inyectado por JS: <div id="opcionesViaje{IDBuscador}"
   class="...ut3-bv-field"> > .text-capitalize > label (SIN clase) + <select>.

   Eso causaba 2 problemas reales medidos en el sitio:
   1) El label "Destino:" quedaba oculto (la regla nativa
      ".search-forms .tab-content label{display:none}" solo se
      neutraliza para label.ut3-bv-field-label), por lo que el campo
      se veia de 1 sola linea en vez de 2 (titulo + valor) como sus
      hermanos.
   2) La caja visible del select2 (.select2-selection--single) media
      28px de alto vs. los 48px de los inputs de texto/fecha vecinos.

   Ademas, entre 768px y 991px de ancho, una regla nativa
   "#BuscadorPlanesContent .col-xs-12{padding-left/right:0!important}"
   (pensada para un layout previo) le quitaba el padding lateral de
   12px que sí conservan las otras 3 pestañas en ese mismo rango.

   Nada de esto toca el <select> real ni su JS (ids, name, onchange,
   etc.): solo CSS sobre el wrapper visual que genera select2. */

.search-forms .tab-content [id^="opcionesViaje"].ut3-bv-field label:not(.ut3-bv-field-label) {
  display: block !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ut3bv-navy);
  opacity: .8;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.search-forms .tab-content [id^="opcionesViaje"].ut3-bv-field .select2-container--default .select2-selection--single,
.search-forms .tab-content [id^="opcionesViaje"].ut3-bv-field .select2-selection--single {
  height: 48px !important;
  display: flex !important;
  align-items: center;
  background: transparent !important;
  border: none !important;
}

.search-forms .tab-content [id^="opcionesViaje"].ut3-bv-field .select2-selection__rendered {
  line-height: 20px !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
  font-size: 14px !important;
  color: var(--ut3bv-tinta) !important;
}

.search-forms .tab-content [id^="opcionesViaje"].ut3-bv-field .select2-selection__arrow {
  height: 48px !important;
  top: 0 !important;
}

@media (max-width: 991px) {
  .search-forms #BuscadorPlanesContent .ut3-bv-field,
  .search-forms #BuscadorPlanesContent .SpaceB {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================
   FIX: icono de calendario indebido en "Regreso" (Vuelos)
   ============================================================
   Confirmado en vivo: el input #dateJourney_back tiene una regla nativa
   con ID propio en newStyles.min.css que le pone un
   background-image (date-range_blue.svg), con !important. Nuestra
   regla generica de fondo transparente (".ut3-bv-field input[type=text]")
   no le ganaba a esa por especificidad (un ID vale mas que cualquier
   cantidad de clases), asi que ese input quedaba con el icono visible
   mientras "Saliendo" (sin ID especifico) se veia limpio. Iguala la
   especificidad exacta de la regla nativa (mismo selector + una clase
   repetida de mas) para poder ganarle de forma estable, sin depender
   del orden de carga. */
.search-forms.search-forms .tab-content input#dateJourney_back {
  background-image: none !important;
}

/* ============================================================
   FIX: widget de Habitaciones/Pasajeros desalineado (Hoteles,
   Vuelo+Hotel, Ofertas)
   ============================================================
   Los templates BuscadorHoteles.htm, BuscadorVueloHotel.htm y
   BuscadorPlanes.htm traen un "top:20px;left:11px" inline (heredado del
   layout viejo, cuando estos widgets eran position:absolute) en
   #hotelsInfo / #FlightPlusInfo / #PackagesInfo. Como ahora viven en un
   flujo normal (flex), ese offset ya no hace falta y los empuja hacia
   abajo/derecha respecto a sus hermanos. Vuelos nunca tuvo ese inline
   (por eso siempre se vio bien). Neutralizamos el offset por CSS, sin
   tocar los .htm. */
.search-forms.search-forms .tab-content #hotelsInfo,
.search-forms.search-forms .tab-content #FlightPlusInfo,
.search-forms.search-forms .tab-content #PackagesInfo {
  top: 0 !important;
  left: 0 !important;
}

/* ============================================================
   FIX: boton "Nueva habitación" invisible (Hoteles, Vuelo+Hotel,
   Ofertas)
   ============================================================
   El link ".ifPassAddRoom" ("Nueva habitación") queda oculto por la
   regla generica ".search-forms .tab-content label{display:none}".
   La regla nativa pensada para mostrarlo
   (".IfPassPopover > div:last-child .ifPassAddRoom{display:flex}")
   tiene mas especificidad y deberia ganar, pero en la practica no lo
   hace (comportamiento confirmado en vivo, no depende de nada que
   hayamos tocado nosotros). Lo mostramos de forma explicita y estable
   con !important. */
.search-forms.search-forms .tab-content .IfPassPopover .ifPassAddRoom {
  display: flex !important;
  align-items: center;
}

/* ============================================================
   "Nueva habitación" NO debe aparecer en Vuelos ni en Ofertas
   ============================================================
   La regla de arriba la muestra en los 4 buscadores por igual, pero
   agregar mas de un pasajero no implica "otra habitacion" en Vuelos
   ni en Ofertas (Paquetes) -- solo tiene sentido en Hoteles y
   Vuelo+Hotel. Usamos selectores por ID (#FlightsInfo, #PackagesInfo)
   para tener mas especificidad que la regla generica de arriba y
   ganarle pese al !important (un ID siempre le gana a una cadena de
   clases, sin importar el orden en el archivo). #hotelsInfo y
   #FlightPlusInfo no se tocan, ahi se sigue viendo normalmente. */
.search-forms.search-forms #FlightsInfo .ifPassAddRoom,
.search-forms.search-forms #PackagesInfo .ifPassAddRoom {
  display: none !important;
}

/* ============================================================
   FIX: campos Origen/Destino aplastados en Vuelo+Hotel (mobile)
   ============================================================
   Confirmado en vivo (viewport real de 375px): los campos de
   BuscadorVueloHotel.htm llevan clases de grid de Bootstrap
   ("col-sm-3 col-xs-12") ademas de "ut3-bv-field" -- a diferencia de
   Vuelos, cuyos campos NO llevan esas clases de Bootstrap. Bootstrap
   pone "min-height:1px" como reset base de columna, lo cual anula el
   tamaño-minimo-automatico que normalmente evita que un flex item se
   encoja mas alla de su contenido. Sin ese piso automatico, en la fila
   angosta (flex-wrap) el campo se encoge hasta casi desaparecer (el
   label queda con altura 0 y el input de 48px se solapa con el campo
   de abajo). Ademas, sin flex-direction explicito, el campo (que
   tambien es su propio contenedor flex de un solo hijo) caia en el
   default "row" en vez de "column", poniendo label e input lado a lado
   en vez de apilados. Restauramos ambos: direccion de apilamiento y el
   piso de tamaño automatico. Aplica a las 4 pestañas por igual (no
   afecta a Vuelos, que ya estaba en "auto"/"column").

   El MISMO bug (min-height:1px de Bootstrap) afecta a ".SpaceB"
   (el campo de Habitaciones/Pasajeros): en Hoteles y Ofertas, ese
   contenedor tambien lleva clases "col-*" y se aplastaba a 1px de
   alto en mobile, quedando sin la caja amarilla/crema (el texto
   "Adultos: X Niños: Y" flotaba suelto, pegado al boton Buscar). En
   Vuelo+Hotel no se notaba porque ese SpaceB puntual ya tenia otro
   ajuste de por medio. Igualamos el piso de alto para los 3 casos. */
.search-forms.search-forms .ut3-bv-field {
  flex-direction: column !important;
  min-height: auto !important;
}

.search-forms.search-forms .SpaceB {
  min-height: auto !important;
}

/* ============================================================
   FIX: tabs con iconos Font Awesome + estilo de texto solicitado
   ============================================================
   Los <img> de icono (orange-*.svg) se reemplazaron en TabsBusqueda.htm
   por <i class="fa fa-*"> (Font Awesome, ya cargado en el sitio en las
   versiones 4.7.0 y 5.1.1). El texto de cada tab, antes oculto en
   mobile ("hidden-xs"), ahora se muestra siempre. Estilo pedido:
   mayusculas, bold, activa en navy con subrayado, inactivas en un tono
   apagado (navy translucido sobre el amarillo). En mobile, como el
   texto ya no cabe en 5 columnas fijas de 20%, la fila de tabs se
   vuelve deslizable horizontalmente en vez de romperse. */

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal {
  border-bottom: 1px solid rgba(15, 35, 71, .25) !important;
  padding-bottom: 12px !important;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a.ut3-bv-tab-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  color: rgba(15, 35, 71, .45) !important;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a .ut3-bv-tab-icon {
  font-size: 16px !important;
  color: rgba(15, 35, 71, .45) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a .textos_Buscador {
  display: inline-block !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 14px !important;
  margin: 0 !important;
  color: inherit;
  white-space: nowrap;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li.active > a.ut3-bv-tab-link,
.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li.active > a .ut3-bv-tab-icon {
  color: var(--ut3bv-navy-dark) !important;
}

.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li.active {
  border-bottom: 3px solid var(--ut3bv-navy-dark) !important;
  padding-bottom: 11px !important;
}

@media (max-width: 767px) {
  /* Pedido: en mobile los tabs van SOLO con el icono (mas grande),
     sin el nombre, y las 5 pestañas deben entrar en una sola fila sin
     scroll. En vez de texto+scroll (intento anterior), repartimos el
     ancho completo entre los 5 (flex:1 1 0) y ocultamos el texto.
     Nota: la especificidad se sube con ".search-forms" repetido 3
     veces -- confirmado en vivo que con solo 2 repeticiones esta regla
     empataba en especificidad con la de mas arriba (misma cantidad de
     clases/ids) y perdia el desempate de cascada; con 3 gana siempre,
     sin depender del orden de carga. */
  .search-forms.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal {
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    justify-content: space-between !important;
  }
  .search-forms.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li.ut3-bv-tab-item {
    flex: 1 1 0 !important;
    width: auto !important;
    margin-right: 0 !important;
    min-width: 0;
  }
  .search-forms.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a.ut3-bv-tab-link {
    flex-direction: column !important;
    gap: 4px;
  }
  .search-forms.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a .ut3-bv-tab-icon {
    font-size: 22px !important;
  }
  .search-forms.search-forms.search-forms #tabsBusqueda ul#tabsHorizontal > li > a .textos_Buscador {
    display: none !important;
  }
}

/* ============================================================
   FIX: "Pasajeros"/"Habitaciones" angosto y pegado a la izquierda
   en mobile (Vuelos, Hoteles, Ofertas) -- cajas mas chicas -- boton
   Buscar con el espaciado correcto (Vuelos, Vuelo+Hotel)
   ============================================================
   Confirmado en vivo (viewport real de 387px, dentro de un iframe
   para forzar el media query): la caja de Pasajeros/Habitaciones NO
   ocupaba el 100% de ancho como sus hermanas (Origen/Destino/etc),
   pese a que ya existia una regla mas arriba en este mismo archivo
   que se lo daba (".search-forms.search-forms .ut3-bv-field,
   .search-forms.search-forms .SpaceB {flex:1 1 100%; width:100%}",
   dentro del primer @media). El motivo: la regla de escritorio
   ".search-forms.search-forms .SpaceB" (align-self/height/flex:0.15,
   agregada despues para el fix de alineacion en escritorio) vive MAS
   ABAJO en el archivo que ese primer bloque mobile, y como tiene la
   MISMA especificidad (3 clases: dos "search-forms" + "SpaceB"),
   gana el desempate de cascada por orden de aparicion, pisando el
   100% de mobile sin querer. Subimos la especificidad aqui con
   ".search-forms" repetido 3 veces (mismo truco ya usado arriba para
   los tabs) para no depender del orden.

   De paso, 3 pedidos mas confirmados en vivo:
   1) Cajas "un poco mas chicas": reducimos el padding interno de
      ".ut3-bv-field"/".SpaceB" de 8px/12px a 6px/10px.
   2) El contenido de Pasajeros/Habitaciones (icono + "1 Persona" +
      flecha) vivia pegado a la izquierda dentro de su caja ya ancha
      -- se centra con justify-content en los wrappers que genera el
      plugin IFPassengerBox (".IfPassContainer" / ".IfPassInfo").
   3) El boton Buscar (Vuelos y Vuelo+Hotel) tenia un
      "margin-top:48px" pensado para una caja de Pasajeros que ya no
      existe tal cual (era para compensar un "-40px" nativo Y dejar
      ~8px de separacion contra la version ANTERIOR, mas alta, de la
      caja). Con la caja ya normalizada, ese margen quedaba enorme.
      Lo bajamos a 8px (el mismo "gap" que ya separa al resto de los
      campos entre si), para que quede parejo. Hoteles y Ofertas no
      tienen esta regla especifica (nunca tuvieron el problema del
      "-40px" nativo), por eso no se tocan aqui. */
@media (max-width: 767px) {
  .search-forms.search-forms.search-forms .SpaceB {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
    min-height: auto !important;
  }

  .search-forms.search-forms.search-forms .ut3-bv-field,
  .search-forms.search-forms.search-forms .SpaceB {
    padding: 6px 10px !important;
  }

  .search-forms.search-forms.search-forms .IfPassContainer {
    width: 100% !important;
    justify-content: center !important;
  }

  .search-forms.search-forms.search-forms .IfPassInfo {
    justify-content: center !important;
    width: 100%;
  }

  .search-forms.search-forms.search-forms #buscadorVuelos .form-submit.ut3-bv-btn-wrap,
  .search-forms.search-forms.search-forms #buscadorVueloHotel .form-submit.ut3-bv-btn-wrap {
    margin-top: -50px !important;
  }
}

/* ============================================================
   VUELOS MODERN — hoja de estilos
   Prefijo: vf-  (no toca ninguna clase Bootstrap existente)
   ============================================================ */

/* --- Card contenedora de cada recomendación --- */
.vf-card {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.vf-card:hover {
  border-color: #003069;
  box-shadow: 0 0 0 1px rgb(0 48 105), 0 0px 16px rgb(0 48 105);
  transform: translateY(-2px);
}

.vf-card.vf-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 4px 20px rgba(37,99,235,.15);
}

/* --- Layout interno: segmentos | precio --- */
.vf-body {
  display: grid;
  grid-template-columns: 1fr 220px;
}

.vf-segments {
  border-right: 1px solid #e4e7ec;
}

/* --- Cabecera de journey (Ida / Regreso) --- */
.vf-journey-header {
  display: grid;
  grid-template-columns: 150px 1fr 32px 1fr;
  align-items: center;
  padding: 14px 20px;
  background: #0030693d;
  border-bottom: 1px solid #e4e7ec;
}

.vf-journey-header + .vf-journey-header {
  border-top: 1px solid #e4e7ec;
}

/* Badge Ida / Regreso */
.vf-trip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 20px;
  width: fit-content;
}
.form-control-new{
	
width: 100%;
    height: 50px;
	padding-left: 11px;
    padding-right: 32px;
    border: 2px solid #19ade6 !important;
    border-radius: 6px !important;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    color: #333 !important;
    -webkit-transition: border-color 0.1s;
    transition: border-color 0.1s;
    background-color: #fff !important;
    background-size: 24px auto;

}

.vf-trip-badge.vf-ida {
  background: #dbeafe;
  color: #1d4ed8;
}

.vf-trip-badge.vf-regreso {
  background: #d1fae5;
  color: #065f46;
}

.vf-trip-date {
  font-size: 11px;
  color: #6b7280;
  margin-top: 5px;
}

/* Bloque IATA + ciudad */
.vf-airport {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vf-iata {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.vf-city-name {
  font-size: 11px;
  color: #6b7280;
}

/* Flecha entre aeropuertos */
.vf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 20px;
}

/* --- Fila de segmento (aerolínea, horas, duración, equipaje) --- */
.vf-segment-row {
  display: grid;
  grid-template-columns: 150px 80px 1fr 80px 80px 80px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #c2cddb;
}

.vf-segment-row:last-of-type {
  border-bottom: none;
}

/* Aerolínea */
.vf-airline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vf-airline-logo {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: contain;
  border: 1px solid #e4e7ec;
  background: #f8fafc;
}

.vf-airline-logo-fallback {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
}

.vf-airline-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vf-airline-name {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.vf-flight-number {
  font-size: 11px;
  color: #9ca3af;
}

/* Horas */
.vf-time {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.vf-time-sup {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  vertical-align: super;
}

/* Duración central */
.vf-duration-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}

.vf-duration-text {
  font-size: 11px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 3px;
}

.vf-duration-track {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 4px;
}

.vf-duration-track::before,
.vf-duration-track::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d1d5db;
}

.vf-duration-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d1d5db;
  flex-shrink: 0;
}

.vf-stops-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.vf-stops-badge.vf-directo {
  background: #d1fae5;
  color: #065f46;
}

.vf-stops-badge.vf-escala {
  background: #fef3c7;
  color: #92400e;
}

/* Equipaje */
.vf-bag {
  display: flex;
  align-items: flex-end; /* antes: center */
  gap: 5px;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
}

/* Enlace Detalle */
.vf-detail-link {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.vf-detail-link:hover {
  text-decoration: underline;
}

/* --- Panel de precio (columna derecha) --- */
.vf-pricing {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.vf-pricing-top {
  flex: 1;
}
.vh-price-card{
    background:#fff;
    border:1px solid #e4e7ec;
    border-radius:16px;
    padding:24px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.vh-total-label{
    font-size:12px;
    font-weight:700;
    color:#9ca3af;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:6px;
}

.vh-total-price{
    font-size:26px;
    font-weight:700;
    color:#111827;
    line-height:1;
}

.vh-price-note{
    margin-top:8px;
    font-size:13px;
    color:#6b7280;
}

.vh-divider{
    height:1px;
    background:#edf0f2;
    margin:18px 0;
}

.vh-detail-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    font-size:14px;
    color:#6b7280;
}

.vh-detail-row strong{
    color:#111827;
    font-weight:700;
}

.vh-btn-primary{
    display:block;
    width:100%;
    text-align:center;
    padding:14px;
    margin-top:18px;
    background:#ff5757;
    color:#fff !important;
    border-radius:12px;
    font-weight:600;
    text-decoration:none;
}

.vh-btn-primary:hover{
    background:#122e8a;
    color:#fff !important;
    text-decoration:none;
}

.vh-toggle-mobile{
    margin-top:15px;
}

.vh-toggle-mobile a{
    color:#0046ba;
    font-size:13px;
    font-weight:600;
}

@media (max-width:768px){
	.padding-movil{
		/*padding:20px;*/
	}
    .vh-price-card{
        padding:18px;
    }

    .vh-total-price{
        font-size:26px;
    }

    .vh-btn-primary{
        padding:12px;
    }
	.vf-total-label {
	display: flex !IMPORTANT;
	justify-content: center !IMPORTANT;
}
	.vf-total-amount {
  display: flex !important;
  justify-content: center !IMPORTANT;
}
}
.vf-pricing-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vf-total-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af;
  margin-bottom: 4px;
}

.vf-total-amount {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.vf-fare-breakdown {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #f1f3f5;
}

.vf-fare-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
}

.vf-fare-row span:last-child {
  font-weight: 600;
  color: #374151;
}

/* Botón principal seleccionar */
.vf-btn-select {
	margin-top: 18px;
  display: block;
  width: 100%;
  padding: 10px 0;
  background: #edd149;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .15s;
}

.vf-btn-select:hover {
  background: #1e2774;
  color: #ffffff ! IMPORTANT;
}
.not-space-new{
	 margin: 0px;
    padding: 0px;
}
/* Botón upsell secundario */
/* Botón upsell secundario */
.vf-btn-upsell {
  margin-top: 15px;
  display: block;
  width: 100%;
  padding: 8px 0;
  background: #1e2774;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s;
}

.vf-btn-upsell:hover {
  border-color: #edd149;
  color: #240303;
  background: #edd149;
}

/* Spinner upsell */
.vf-loader-upsell {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid #e4e7ec;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: vf-spin .7s linear infinite;
  margin: 8px auto 0;
}

@keyframes vf-spin {
  to { transform: rotate(360deg); }
}

/* --- Panel de detalle colapsable (flights template) --- */
.vf-detail-panel {
  display: none;
  background: #f8fafc;
  border-top: 1px solid #e4e7ec;
  padding: 16px 20px;
  font-size: 13px;
  color: #374151;
}

.vf-detail-panel.vf-open {
  display: block;
}

.vf-detail-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vf-detail-flight-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  flex-wrap: wrap;
}

.vf-detail-endpoint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.vf-detail-endpoint .vf-ep-time {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.vf-detail-endpoint .vf-ep-airport {
  font-size: 11px;
  color: #6b7280;
}

.vf-detail-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
  gap: 2px;
  color: #9ca3af;
  font-size: 11px;
}

.vf-escala-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  margin: 10px 0;
}

.vf-escala-alert.vf-airport-change {
  background: #fee2e2;
  color: #991b1b;
}

.vf-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e4e7ec;
  font-size: 11px;
  color: #9ca3af;
}

.vf-close-detail {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vf-close-detail:hover {
  color: #111827;
}

/* --- Modal condiciones (sin Bootstrap) --- */
.vf-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1050;
  align-items: center;
  justify-content: center;
}

.vf-modal-overlay.vf-open {
  display: flex;
}

.vf-modal-box {
  background: #ffffff;
  border-radius: 16px;
  max-width: 680px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px 32px;
  position: relative;
}

.vf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vf-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: .02em;
}

.vf-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
  padding: 4px;
}

.vf-modal-body {
  font-size: 13px;
  color: #374151;
  line-height: 1.7;
}

/* --- Etiqueta de descuento --- */
.vf-descuento-tag {
  display: inline-flex;
  align-items: center;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* --- Precio diferencial (PricesDiff) --- */
.vf-price-diff-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #9ca3af;
  margin-bottom: 4px;
}

.vf-price-diff-amount {
  font-size: 22px;
  font-weight: 700;
  color: #2563eb;
}

/* --- Tooltip upsell (reemplaza el tooltip JS externo) --- */
.vf-tooltip-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.vf-tooltip-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #ffffff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

.vf-tooltip-wrapper:hover .vf-tooltip-content {
  display: block;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .vf-body {
    grid-template-columns: 1fr;
  }
  .vf-segments {
    border-right: none;
    border-bottom: 1px solid #e4e7ec;
  }
  .vf-journey-header {
    grid-template-columns: 120px 1fr 24px 1fr;
    padding: 12px 14px;
  }
  .vf-segment-row {
    grid-template-columns: 120px 70px 1fr 70px 60px 60px;
    padding: 12px 14px;
  }
  .vf-iata {
    font-size: 18px;
  }
  .vf-time {
    font-size: 17px;
  }
  .vf-pricing {
    padding: 16px 14px;
  }
}
@media (max-width: 480px) {
  .vf-segment-row {
    cursor: pointer;
  }
  .vf-segment-row:active {
    background: #f8fafc;
  }
}
@media (max-width: 480px) {
  /* Cabecera Ida/Regreso en móvil: fila 1 = badge+fecha (ancho completo),
   fila 2 = origen -> flecha -> destino, alineados en los extremos.
   Antes se ocultaba la flecha y el grid de 2 columnas dejaba el
   aeropuerto de destino solo, con un hueco vacío al lado. */
.vf-journey-header {
  grid-template-columns: 1fr 22px 1fr;
  grid-template-rows: auto auto;
  row-gap: 10px;
  column-gap: 6px;
  padding: 14px 16px;
}

.vf-journey-header > div:first-child {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.vf-journey-header > .vf-airport:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  align-items: flex-start;
  text-align: left;
}

.vf-journey-header .vf-arrow {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  color: #000;
  font-size: 25px;
  
}

.vf-journey-header > .vf-airport:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
  align-items: flex-end;
  text-align: right;
}
  /* Tarjeta de segmento en móvil: 3 columnas x 2 filas.
     No se modifica el HTML: se reubican con grid-column/grid-row
     los mismos hijos directos de .vf-segment-row que ya existen.

     Fila 1:  Aerolínea (radio+logo+nombre) | Equipaje | Detalle
     Fila 2:  Hora salida | Duración + escalas | Hora llegada

     Las dos horas comparten la clase .vf-time, por eso se
     distinguen con :nth-of-type(1)=salida y :nth-of-type(2)=llegada,
     que es estable porque el orden del template jTemplates no cambia. */
  .vf-segment-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    justify-content: center;
    row-gap: 12px;
    column-gap: 8px;
    padding: 14px 10px;
    text-align: center;
  }

  /* ---- Fila 1 ---- */
  .vf-segment-row > .vf-airline {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .vf-segment-row > .vf-airline .vf-airline-info {
    align-items: center;
  }

  .vf-segment-row > .vf-bag {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
  }

  .vf-segment-row > .vf-detail-link {
    grid-column: 3;
    grid-row: 1;
  }

  /* ---- Fila 2 ---- */
  .vf-segment-row > span.vf-time:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }

  .vf-segment-row > .vf-duration-col {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  .vf-segment-row > span.vf-time:nth-of-type(2) {
    grid-column: 3;
    grid-row: 2;
  }

  /* Etiqueta de descuento (opcional): fila extra de ancho completo,
     no rompe la grilla 3x2 principal */
  .vf-segment-row > .vf-descuento-tag {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}
@media (max-width: 767px) {
    button.btn.btnPrimary.btn-block.not-space.btn {
        width: 100% !important;
    }
}
@media (max-width: 767px) {
    #sideBarResults {
        display: none;
    }
}
@media (max-width: 767px) {
    #sideFilters {
       /* display: none;*/
    }
}


/* ============================================================
   BUSCADOR ASISTENCIAS/SEGUROS (#buscadorSeguros) -- homogeneizar
   con los campos de Vuelos/Hoteles/Vuelo+Hotel/Paquetes
   ============================================================
   BuscadorSeguros.htm nunca habia sido migrado al sistema de clases
   "ut3-bv-field" / "ut3-bv-fields-row" / "ut3-bv-field-label" que ya
   usan las demas pestañas (ver seccion "Campos de TODAS las pestañas"
   mas arriba en este archivo), por eso sus campos no heredaban nada
   del diseño nuevo (caja crema unificada, label uppercase, etc).
   Ahora que el HTML ya tiene esas clases, la mayoria del estilo llega
   gratis por las reglas generalizadas de arriba. Lo que sigue cubre
   SOLO lo que es especifico de Seguros: el bug del filtro fantasma,
   los selects (Select2) y el campo especial "Edad asegurados".
   Confirmado en vivo con Claude in Chrome. */

/* FIX: filtro/imagen fantasma en "Pais Origen" y "Edad asegurados".
   /externos/newStyles.min.css (archivo de terceros) tiene una regla
   gigante que junta selectores de iconos chicos (.icon-user__purple,
   .icon-location-pin__purple, etc) con varios IDs de campos reales
   por error, entre ellos "#fromInsurance" y los inputs de edad
   (via "#buscadorSeguros #opcionesViaje>div.col-lg-10 input[type=text]").
   Esa regla les pone un background-image + un filter CSS extremo
   (saturate(72.52) entre otros) pensado para recolorear un icono
   chico de 14px, pero aplicado a toda la caja del input -- por eso
   se veian solidos en azul. Reseteamos ambas propiedades, mas
   especifico + !important para poder ganarle. No se toca el archivo
   externo. */
#buscadorSeguros #fromInsurance,
#buscadorSeguros .ut3-bv-edades-inputs input[type="text"] {
  background-image: none !important;
  filter: none !important;
}

/* Selects de Seguros (Zona de cobertura / Pasajeros): mismo patron
   ya usado para "Destino" en Ofertas/Paquetes (ver seccion "FIX:
   homogeneizar el campo Destino de Ofertas/Paquetes" mas arriba),
   adaptado a #buscadorSeguros ya que aca el <select> vive dentro de
   ".ut3-bv-field" directamente (no en un wrapper con id="opcionesViaje{N}"
   como en Paquetes). Select2 reemplaza el <select> real por su propio
   .select2-container y oculta el original; el fondo/borde/radio ya los
   pone la caja ".ut3-bv-field" que lo envuelve (regla generalizada de
   arriba), asi que el select2 en si queda transparente y sin borde
   propio, igual que el <input type="text"> de los demas campos. */
#buscadorSeguros .ut3-bv-field .select2-selection--single {
  height: 48px !important;
  display: flex !important;
  align-items: center;
  background: transparent !important;
  border: none !important;
}
#buscadorSeguros .ut3-bv-field .select2-selection__rendered {
  line-height: 20px !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
  font-size: 14px !important;
  color: var(--ut3bv-tinta) !important;
}
#buscadorSeguros .ut3-bv-field .select2-selection__arrow {
  height: 48px !important;
  top: 0 !important;
}
/* Select2 fija su ancho en px al inicializarse; forzamos 100% para que
   ocupe todo el ancho de la caja ".ut3-bv-field" (si no, el texto de
   la opcion seleccionada quedaba cortado). */
#buscadorSeguros .ut3-bv-field .select2-container {
  width: 100% !important;
}

/* "Cobertura": a diferencia de los demas campos no es un <input>, es
   un <label id="NochesInsu"> que JS completa con el numero de noches
   calculado. La caja crema ya la pone ".ut3-bv-field" (contenedor);
   esto solo iguala la tipografia del VALOR al resto de los campos. */
#buscadorSeguros #NochesInsu {
  display: block;
  font-size: 14px;
  color: var(--ut3bv-tinta);
}

/* "Edad asegurados": caso especial, no es un campo de un solo valor
   sino un grupo de hasta 9 inputs chicos (uno por asegurado). Antes
   cada input estaba al 100% de ancho de su contenedor, asi que los 9
   quedaban apilados exactamente uno encima del otro (se veian como
   una sola barra). Le damos su propia fila, con una sola caja crema
   (hereda de ".ut3-bv-field", igual que los demas) y los 9 inputs
   adentro en fila, chicos y con su propio borde sutil para poder
   distinguirlos entre si dentro de la caja.

   FIX (confirmado en vivo): "flex:1 1 100%" forzaba el salto de linea
   PERO tambien dejaba la caja crema estirada al 100% del ancho del
   buscador para siempre, sin importar que solo hubiera 1-9 inputs
   chicos adentro -- se veia una franja crema vacia enorme despues de
   las cajitas. La caja debe medir solo lo que ocupan sus inputs.
   Como flex-basis y width compiten por el mismo calculo (achicar el
   basis tambien cancela el salto de linea forzado, ver nota abajo),
   separamos las dos responsabilidades: un "quiebre de fila" invisible
   (pseudo-elemento, sin necesidad de tocar el HTML) que fuerza el
   salto de linea, y la caja de "Edad asegurados" con flex:0 0 auto
   para medir solo su contenido real. */
#buscadorSeguros .ut3-bv-fields-row::before {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 9;
}
#buscadorSeguros .ut3-bv-field-edades {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-top: 8px;
  order: 10;
}
/* El boton "Buscar" siempre al final (despues de "Edad asegurados"),
   en cualquier ancho de pantalla: antes vivia en el mismo lugar que
   en Vuelos (ultimo campo de la fila principal), pero como "Edad
   asegurados" es un campo aparte que se envuelve a su propia linea,
   el boton quedaba ANTES de el en vez de despues. Con "order" (mas
   alto que el 10 de arriba) queda pegado al final pase lo que pase
   con el ancho/wrap -- y como ahora "Edad asegurados" ya no ocupa
   el 100% del ancho, el boton cabe en la MISMA linea, a su lado.
   "align-self:center" lo mantiene centrado verticalmente junto a esa
   caja sin importar si los asegurados ocupan 1 o varias filas de
   cajitas (la caja de edades crece en alto, el boton no).

   FIX (confirmado en vivo): con pocos asegurados (ej. 2) el boton
   quedaba pegado justo despues de la caja de edades, cerca del borde
   IZQUIERDO -- y se iba corriendo a la derecha a medida que se
   agregaban mas asegurados (la caja de edades crece de ancho). Se
   pidio que quede SIEMPRE fijo en el extremo derecho, igual que
   "Buscar" en las otras 3 pestañas. "margin-left:auto" en un item
   flex empuja a ese item (y a todo lo que venga despues) hasta el
   final de su linea, usando el espacio libre restante -- asi el
   boton no se mueve con el ancho de "Edad asegurados", solo la caja
   de edades crece hacia la derecha *hasta* donde empieza el boton. */
#buscadorSeguros .ut3-bv-btn-wrap {
  order: 11;
  align-self: center;
  margin-left: auto !important;
}
#buscadorSeguros .ut3-bv-edades-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
#buscadorSeguros .ut3-bv-edades-inputs input[type="text"] {
  background: rgba(255, 255, 255, .7) !important;
  border: 1px solid rgba(15, 35, 71, .15) !important;
  border-radius: 6px !important;
  width: 70px !important;
  height: 36px !important;
  padding: 0 8px !important;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 767px) {
  #buscadorSeguros .ut3-bv-edades-inputs input[type="text"] {
    flex: 1 1 70px;
  }
}
/* ===== REESTILO MENU MOBILE ESTILO "TARJETA" (solo CSS, sin tocar HTML/JS) ===== */

/* Overlay: fondo oscuro semitransparente (para ver la página detrás, difuminada) */
#myNav.overlay {
    background-color: rgba(15, 20, 45, 0.55) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Contenedor: se convierte en tarjeta blanca flotante centrada arriba */
#myNav .overlay-content {
    background-color: #ffffff;
    max-width: 340px;
    width: 88%;
    margin: 70px auto 0;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    padding: 60px 18px 24px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Barra superior tipo header con degradado azul-amarillo de marca */
#myNav .overlay-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    background: linear-gradient(90deg, #0f2347 0%, #edd149 100%);
    z-index: 0;
}

/* Título dentro de esa barra de header */
#myNav .overlay-content h3 {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 1px;
    margin: -50px 0 22px 4px;
    padding: 0;
    text-align: left;
}

/* Botón de cerrar: círculo blanco sobre la barra de header */
#myNav .closebtn {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    line-height: 1;
    color: #241d50;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#myNav .closebtn:hover {
    background-color: #ffc72c;
    text-decoration: none;
}

/* Cada link se vuelve una "fila tarjeta": icono + texto + flecha */
#myNav .overlay-content a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    color: #241d50;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 10px;
    margin-bottom: 8px;
    border-radius: 12px;
    background-color: #f4f6fb;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

#myNav .overlay-content a:hover,
#myNav .overlay-content a:active {
    background-color: #eef1fb;
    transform: translateX(3px);
    text-decoration: none;
    color: #241d50;
}

/* Flechita ">" a la derecha de cada fila */
#myNav .overlay-content a::after {
    content: "\276F";
    margin-left: auto;
    font-size: 12px;
    color: #b7bdd6;
}

/* Caja de icono a la izquierda (círculo/cuadrado redondeado de color) */
#myNav .overlay-content a::before {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    content: "";
}

/* Nosotros -> icono edificio, fondo naranja (destacado, como "Inicio" en la referencia) */
#myNav .overlay-content a[href*="QuienesSomos"]::before {
    background-color: #795548;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7v2h20V7L12 2zm-8 8v9h4v-6h8v6h4v-9H4z'/%3E%3C/svg%3E");
}

/* Servicios -> icono lista/engranaje, azul */
#myNav .overlay-content a[href*="servicios"]::before {
    background-color: #e8ecfb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23241d50' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z'/%3E%3C/svg%3E");
}

/* Ofertas -> icono etiqueta/porcentaje */
#myNav .overlay-content a[href*="ofertas"]::before {
    background-color: #e8ecfb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23241d50' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.41l9 9c.36.36.86.59 1.41.59s1.05-.23 1.41-.59l7-7c.37-.36.59-.86.59-1.42s-.23-1.05-.59-1.41zM6.5 8C5.67 8 5 7.33 5 6.5S5.67 5 6.5 5 8 5.67 8 6.5 7.33 8 6.5 8z'/%3E%3C/svg%3E");
}

/* Cotizar -> icono calculadora/documento */
#myNav .overlay-content a[href*="CotizarViaje"]::before {
    background-color: #e8ecfb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23241d50' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h7v2H7v-2z'/%3E%3C/svg%3E");
}

/* Bodas -> icono corazón/anillos */
#myNav .overlay-content a[href*="bodas"]::before {
    background-color: #fdeef1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0568b' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

/* Tips de Viaje -> icono mapa/pin */
#myNav .overlay-content a[href*="TipsDeViaje"]::before {
    background-color: #e8ecfb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23241d50' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* ¿Viajas en Grupo? -> icono grupo de personas */
#myNav .overlay-content a[href*="ViajesGrupo"]::before {
    background-color: #e8ecfb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23241d50' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

/* Pagos QR -> icono código QR */
#myNav .overlay-content a[href*="qr.universaltours"]::before {
    background-color: #eaf7ee;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232fa84f' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm10 0h2v2h-2v-2zm4 0h2v2h-2v-2zm-4 4h2v2h-2v-2zm4 0h2v2h-2v-2zm-2-2h2v2h-2v-2z'/%3E%3C/svg%3E");
}

/* separador antes de Pagos QR, para que quede aislado como "acción especial" (como el bloque azul de Viajes Corporativos en la referencia) */
#myNav .overlay-content a[href*="qr.universaltours"] {
    background: linear-gradient(90deg, #0f2347 0%, #edd149 100%);
    color: #ffffff;
    margin-top: 10px;
}
#myNav .overlay-content a[href*="qr.universaltours"]::after {
    color: rgba(255, 255, 255, 0.6);
}

/* Botón de login (fuera del overlay, en la barra superior) — estilo píldora más prolijo */
.ut3-mobile-menu .navegacion_mobile > li:first-child {
    display: flex;
    align-items: center;
}

.ut3-mobile-menu .navegacion_mobile > li:first-child img {
    padding: 7px !important;
    border-radius: 50%;
    background-color: rgba(36, 29, 80, 0.08);
    transition: background-color 0.2s ease;
}

.ut3-mobile-menu .navegacion_mobile > li:first-child a:hover img,
.ut3-mobile-menu .navegacion_mobile > li:first-child span:hover img {
    background-color: #ffc72c;
}

/* Ícono hamburguesa: lo volvemos un botón circular sutil también, para que combine */
.ut3-mobile-menu .navegacion_mobile > li > span[onclick="openNav()"] {
    color: #241d50 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.ut3-mobile-menu .navegacion_mobile > li > span[onclick="openNav()"]:active {
    background-color: rgba(36, 29, 80, 0.08);
}

/* Panel de sesión colapsable, mismo lenguaje visual de tarjeta */
.opciones_login_mobile {
    background-color: #ffffff;
    border-radius: 12px;
    margin: 8px 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 8px 14px;
}

.opciones_login_mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.opciones_login_mobile ul li a {
    display: block;
    color: #241d50;
    font-weight: 600;
    padding: 12px 4px;
    text-decoration: none;
}

.opciones_login_mobile ul li a:hover {
    color: #ffc72c;
}

/* ===== FIX TAMAÑO Y ALINEACIÓN DEL ÍCONO DE USUARIO (mobile) ===== */

/* La barra completa (icono usuario + hamburguesa) alineada en línea y centrada verticalmente */
.ut3-mobile-menu .navegacion_mobile {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.ut3-mobile-menu .navegacion_mobile > li {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El círculo contenedor del ícono de usuario: mismo tamaño que el círculo de la hamburguesa (40px) */
.ut3-mobile-menu .navegacion_mobile > li:first-child span,
.ut3-mobile-menu .navegacion_mobile > li:first-child a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(36, 29, 80, 0.08);
    transition: background-color 0.2s ease;
}

/* El ícono en sí: tamaño fijo y sin el margin-top negativo inline que lo estaba corriendo hacia arriba */
.ut3-mobile-menu .navegacion_mobile > li:first-child img {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent;
    display: block;
}

.ut3-mobile-menu .navegacion_mobile > li:first-child span:hover,
.ut3-mobile-menu .navegacion_mobile > li:first-child a:hover {
    background-color: #ffc72c;
}
/* ============================================================
   UNIVERSAL TOURS - Buscador Vuelos: REDISEÑO SOLO MOBILE
   Referencia: captura del buscador de Latrach en móvil (fondo navy,
   checkboxes en vez de pills, campos con borde celeste, botón celeste).

   IMPORTANTE - alcance:
   - Todo vive dentro de @media (max-width:767px). Cero impacto en escritorio.
   - Solo pestaña Vuelos (#buscadorVuelos). No toca Hoteles/Autos/etc.
   - Requiere 2 líneas ya editadas en BuscadorVuelos.htm: se les quitó el
     "!important" a 3 estilos inline (fondo del form, color de
     "Agregar otro destino" y de "Otras Opciones"). Un inline !important
     no se puede vencer desde ningún CSS externo por más específico que
     sea; sin ese !important, el inline normal sigue ganando en escritorio
     (no hay override ahí) y esta media query sí puede pisarlo en mobile.
   - ACTUALIZACIÓN: "Pasajeros" ya no es un caso aparte posicionado con
     position:absolute/padding de compensación. Ahora es una 5ta columna
     Bootstrap real (col-md-2 col-sm-6 col-xs-12), hermana de Origen/
     Destino/Saliendo/Regreso dentro de la misma ".row.margin-movil-row"
     (ver IdaRegreso.htm). Por eso en escritorio queda alineado en la
     misma fila sin CSS de posicionamiento, y en mobile se apila solo
     (col-xs-12), igual que sus hermanos, sin necesitar el padding de
     compensación que usábamos antes. Todo lo que queda abajo es solo
     estilo visual (bordes, colores, tamaños), no posicionamiento.
   ============================================================ */

@media (max-width: 767px) {

  /* --- Fondo del panel: blanco -> azul marino --- */
.search-forms #buscadorVuelos.resumen-resultados,
  #buscadorVuelos.resumen-resultados,
  #frmBuscadorVuelos.resumen-resultados {
    background: linear-gradient(180deg, #f2f2f2 0%, #f2f2f2 100%) !important;
    border-radius: 12px !important;
    padding: 18px 14px !important;
  }

  /* --- Fila de checkboxes (Solo ida / Con equipaje / Vuelos directos) --- */
.search-forms #buscadorVuelos #divOwRt .col-sm-12 > div:first-child,
  #buscadorVuelos #divOwRt .col-sm-12 > div:first-child {
    /*margin-left: 0 !important;
    padding: 0 0 14px !important;
    gap: 20px !important;*/
  }

  /* Pill -> checkbox cuadrado + texto blanco */
.search-forms #buscadorVuelos .filter-toggle-btn,
  #buscadorVuelos .filter-toggle-btn {
    display: inline-flex !important;
    flex-direction: row-reverse !important; /* checkbox a la derecha del texto */
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000000 !important;
    font-size: 13px !important;
  }
.search-forms #buscadorVuelos .filter-toggle-btn:hover,
  #buscadorVuelos .filter-toggle-btn:hover {
    background: transparent !important;
    border: none !important;
  }
  /* Ocultamos el iconito interno (paloma verde) del diseño pill anterior */
.search-forms #buscadorVuelos .filter-toggle-btn img,
  #buscadorVuelos .filter-toggle-btn img {
    display: none !important;
  }
  /* El propio btn-check-icon pasa a ser el "cuadrito" del checkbox, siempre visible */
.search-forms #buscadorVuelos .filter-toggle-btn .btn-check-icon,
  #buscadorVuelos .filter-toggle-btn .btn-check-icon {
    display: inline-flex !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
  }
.search-forms #buscadorVuelos .filter-toggle-btn.active .btn-check-icon,
  #buscadorVuelos .filter-toggle-btn.active .btn-check-icon {
    background: #19ADE6 !important;
    border-color: #19ADE6 !important;
  }

  /* --- Labels de Origen/Destino/Saliendo/Regreso/Pasajeros: negro -> blanco --- */
.search-forms #buscadorVuelos .trayectoInputs label,
  #buscadorVuelos .trayectoInputs label,
  .search-forms #buscadorVuelos .col-pasajeros label,
  #buscadorVuelos .col-pasajeros label {
    color: #666666 !important;
  }

  /* --- Campos de texto (Origen/Destino/fechas): borde navy -> borde celeste --- */
.search-forms #buscadorVuelos .journey-field-wrap .form-control,
  #buscadorVuelos .journey-field-wrap .form-control {
    border: 2px solid #19ADE6 !important;
    background-color: #ffffff !important;
  }

  /* --- "Agregar otro destino" / "Otras Opciones": apiladas, texto blanco --- */
.search-forms #buscadorVuelos #pasajeros .margin-movil-row,
  #buscadorVuelos #pasajeros .margin-movil-row {
    /*flex-direction: column !important;*/
    align-items: flex-start !important;
    gap: 12px !important;
  }
.search-forms #buscadorVuelos #pasajeros #multiTrayecto,
  #buscadorVuelos #pasajeros #multiTrayecto,
  .search-forms #buscadorVuelos #pasajeros a[href="#OpcAvanced"],
  #buscadorVuelos #pasajeros a[href="#OpcAvanced"] {
    color: #ffffff !important;
  }
.search-forms #buscadorVuelos #pasajeros #multiTrayecto .fa,
  #buscadorVuelos #pasajeros #multiTrayecto .fa,
  .search-forms #buscadorVuelos #pasajeros a[href="#OpcAvanced"] .fa,
  #buscadorVuelos #pasajeros a[href="#OpcAvanced"] .fa,
  .search-forms #buscadorVuelos #pasajeros a[href="#OpcAvanced"] .glyphicon,
  #buscadorVuelos #pasajeros a[href="#OpcAvanced"] .glyphicon {
    color: #ffffff !important;
  }
  /* "Eliminar trayecto" se deja en su color naranja original (aviso de borrar) */

  /* --- Botón Buscar: navy cuadrado -> celeste pill, ancho completo --- */
.search-forms #buscadorVuelos .btnPrimary.btn-buscar,
  #buscadorVuelos .btnPrimary.btn-buscar {
    background: #ffc107 !important;
    border-radius: 999px !important;
    height: 50px !important;
    width: 50% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
  }
.search-forms #buscadorVuelos .btnPrimary.btn-buscar:hover,
  #buscadorVuelos .btnPrimary.btn-buscar:hover {
    background: #edd149 !important;
  }
}

/* ============================================================
   FIX: "Pasajeros" como campo real de la fila (escritorio + mobile)
   ============================================================
   Antes "Pasajeros" vivía fuera de ".trayectoInputs .row" (como hermano
   de "#journeys"), así que no había forma de alinearlo con Origen/
   Destino/Saliendo/Regreso solo con CSS -- por eso el fix anterior le
   agregaba 51px de padding a mano para que coincidiera en mobile, y en
   escritorio se lo devolvía a su posición de siempre con
   position:absolute (arriba a la derecha, separado de la fila).

   Ahora "Pasajeros" es una 5ta columna Bootstrap real (col-md-2 col-sm-6
   col-xs-12), hermana de Origen/Destino/Saliendo/Regreso dentro de la
   MISMA fila (ver IdaRegreso.htm). Eso resuelve solo el alineado en
   escritorio (misma fila, mismas proporciones) y el apilado en mobile
   (col-xs-12, igual que sus hermanos) -- ya no hace falta ni el padding
   de 51px ni el position:absolute, así que ambos se eliminaron.

   Como el <div id="FlightsInfo"> ahora lleva class="form-control", ya
   hereda automáticamente el mismo borde/alto/radio/fondo que Origen/
   Destino/Saliendo/Regreso (regla nativa ".journey-field-wrap
   .form-control" en style.css, y su versión celeste/compacta de mobile
   más arriba en este archivo) -- sin CSS nuevo para eso. Lo único que
   sigue haciendo falta es lo que un <div> necesita y un <input> no:

   1) Centrar el texto verticalmente (un <input> lo hace solo, un <div>
      no). Confirmado en vivo en escritorio y mobile.
   2) Neutralizar el ".form-control" que el propio widget de pasajeros
      (plugin IfPassengerBox) le pone a su contenido interno
      (".IfPassContainer") -- si no se neutraliza, queda un doble
      recuadro con un subrayado amarillo tipo "1 Persona___" (diseño
      viejo) en vez de texto plano dentro de la caja. OJO: el popover
      de "Adultos/Niños" se posiciona relativo a este mismo contenedor,
      así que a propósito NO se le pone "overflow:hidden" (aunque el
      texto "1 Persona" fuera largo y se saliera un poco) -- ponerlo
      recorta también el popover y deja de abrir (confirmado en vivo).

   Aplica siempre (no es un fix de mobile): el problema existe en
   cualquier tamaño de pantalla. */
#buscadorVuelos #FlightsInfo.form-control {
  display: flex !important;
  align-items: center !important;
}
#buscadorVuelos #FlightsInfo .IfPassContainer {
  border: none !important;
  background: transparent !important;
  height: auto !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  color: #333 !important;
  font-size: 14px !important;
}

/* Compactar en mobile: labels más chicos y cajas más bajas (42px) ya
   cubre a Pasajeros también, porque ahora está dentro de
   ".trayectoInputs" y usa "form-control" como sus hermanos -- ver la
   sección "REDISEÑO SOLO MOBILE" más arriba
   (".trayectoInputs label" y ".journey-field-wrap .form-control"). */
/* ============================================================
   FIX: "Tramo 1" / "Tramo 2" invisibles en escritorio (multi-destino)
   ============================================================
   Confirmado en vivo (demo3.ideasfractal.com, agregando un 2do destino
   con "+ Agregar otro destino"): el título de cada tramo SÍ funciona
   a nivel de datos -- el JS ya lo muestra (display:block) y le pone el
   texto correcto ("Tramo 1", "Tramo 2", ...) apenas hay 2 o más
   trayectos. El problema es solo de contraste: IdaRegreso.htm trae
   "color:#FFF" inline en #titleTramo1, pensado para el fondo navy que
   el buscador SÍ tiene en mobile (por eso ahí se ve bien, sin tocar
   nada) -- pero en escritorio el fondo del panel sigue siendo blanco,
   así que el texto queda blanco sobre blanco, invisible.

   Se corrige SOLO en escritorio (>=768px) para no afectar el mobile
   que ya funciona bien; el color usado (#003069) es el mismo navy que
   ya usan los bordes y labels de Origen/Destino/Saliendo/Regreso, para
   que combine con el resto del buscador. */
@media (min-width: 768px) {
  #buscadorVuelos #titleTramo1 {
    color: #003069 !important;
  }
}


/* ============================================================
   FIX: "Pasajeros" en Hoteles no se veía como en Vuelos +
   botón "Nueva habitación" no aparecía
   ============================================================
   Confirmado en vivo con Claude in Chrome
   (demo3.ideasfractal.com/Hoteles/...):

   1) "Pasajeros" (#hotelsInfo): por dentro ya tiene un
      ".IfPassContainer" con clase "form-control" (igual que en
      Vuelos), pero le quedó el estilo viejo con un subrayado amarillo
      en vez de la caja blanca con borde que ya tienen Destino/Check
      In/Check Out. Se le da el mismo borde/alto/radio que esos 3
      campos ya usan de forma nativa (".journey-field-wrap
      .form-control" en style.css) para que combine igual. 100% CSS,
      no hace falta tocar el .htm.

   2) El botón "Nueva habitación" (.ifPassAddRoom) SÍ existe en el
      HTML y el JS lo arma bien -- el problema es que la regla que lo
      muestra necesita un ancestro ".search-forms" que en esta página
      de resultados no está presente (mismo motivo por el que "Tramo
      1/2" no se veía en Vuelos). Confirmado en vivo: al agregar una
      2da habitación, "Habitación 1"/"Habitación 2" + "Eliminar"
      funcionan bien.

      De paso se le dio un look de botón (fondo gris claro, texto
      navy, ancho completo) ya que sin estilos se veía como texto
      plano sin forma, muy angosto (traía "col-xs-7" de Bootstrap) y
      se cortaba a 2 líneas.

   ------------------------------------------------------------
   IMPORTANTE - alcance (corregido):
   ------------------------------------------------------------
   "BuscadorHoteles.htm" es el MISMO template para el buscador
   principal (home) y para este interno (resultados) -- por eso la
   primera versión de este fix (con "#buscadorH" y "#frmBuscadorHoteles"
   sueltos) se colaba también al buscador principal, con el problema de
   que "#frmBuscadorHoteles" es el mismo id en los dos lugares.

   La diferencia real, confirmada en vivo comparando ambas páginas:
   - Interno (resultados): el <form id="frmBuscadorHoteles"> SÍ tiene
     la clase "resumen-resultados" (".resumen-resultados" es la clase
     que usa el panel "Modificar búsqueda").
   - Principal (home): ese mismo <form id="frmBuscadorHoteles"> NO
     tiene ninguna clase -- vive dentro de "#buscadorHoteles" (con
     "e", un id DISTINTO a "#buscadorH") y de ".search-forms".

   Por eso ahora se exige ".resumen-resultados" junto con el id, y se
   usa "#buscadorH" (que solo existe en el interno) en vez de
   "#buscadorHoteles" (que es el del principal). Confirmado en vivo en
   ambas páginas: el interno queda con el fix, el principal ya no. */
#buscadorH #hotelsInfo .IfPassContainer,
#frmBuscadorHoteles.resumen-resultados #hotelsInfo .IfPassContainer {
  border: 2px solid #003069 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  height: 50px !important;
  box-sizing: border-box !important;
}

#buscadorH .IfPassPopover .ifPassAddRoom,
#frmBuscadorHoteles.resumen-resultados .IfPassPopover .ifPassAddRoom {
   display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #eef0f3 !important;
  border-radius: 22px !important;
  padding: 10px !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #003069 !important;
  cursor: pointer !important;
  margin-left: -21px;
}

#buscadorS .journey-field-wrap .select2-container--default .select2-selection--single,
#frmBuscadorSeguros.resumen-resultados .journey-field-wrap .select2-container--default .select2-selection--single {
  height: 50px !important;
  border: 2px solid #003069 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 0 11px !important;
}
#buscadorS .journey-field-wrap .select2-selection__rendered,
#frmBuscadorSeguros.resumen-resultados .journey-field-wrap .select2-selection__rendered {
  line-height: normal !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: #333 !important;
}
#buscadorS .journey-field-wrap .select2-selection__arrow,
#frmBuscadorSeguros.resumen-resultados .journey-field-wrap .select2-selection__arrow {
  height: 48px !important;
  top: 0 !important;
  right: 8px !important;
}
@media (max-width: 767px) {
  .search-forms.search-forms.search-forms.search-forms #buscadorVueloHotel .form-submit.ut3-bv-btn-wrap {
    margin-top: 0 !important;
  }
}