/* ============================================================
   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: rgba(255, 255, 255, .35) !important;
}

.search-forms.search-forms #divOwRt .container > div input:checked + label {
  border: 1.5px solid var(--ut3bv-navy-dark) !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. */

/* ---------- 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;
}

.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;
}

/* 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) */
.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.7 1 0 !important;
}
.search-forms.search-forms #buscadorHoteles .SpaceB {
  flex: 0.65 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 ---------- */
/* Ya no viven dentro de #divOwRt (donde heredaban el estilo de pill), asi
   que les damos su propio estilo simple de checkbox+texto normal. */

.search-forms #buscadorVuelos #OpcAvanced .ut3-bv-checkopt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.search-forms #buscadorVuelos #OpcAvanced .ut3-bv-checkopt label {
  display: inline !important;
  font-size: 14px;
  font-weight: normal;
  margin-left: 6px;
  cursor: pointer;
}

/* ---------- Responsive: no romper en mobile ---------- */

@media (max-width: 767px) {
  .search-forms .tab-content label.ut3-bv-field-label {
    display: block !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;
}

.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;
}

.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;
}

/* #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;
}

.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;
}