/* ================================
   GSira UI v8 - Alineación Total
   ================================ */

:root {
  --verde: #d7e96d;
  --verde-hover: #cce45c;
  --texto: #08304a;
  --borde: #dfe6d7;
  --bg: #fff0 !important;
}

body {
  font-family: "Poppins", Arial, sans-serif;
  color: var(--texto);
  background: var(--bg);
  margin: 0;
  padding: 0;
}

/* === Tabs === */
.tabs-ui {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 25px auto 15px;
}

.botontab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 18px;
  border-radius: 8px;
  color: var(--texto);
  text-decoration: none;
  background: #f5f8f5;
  border: 1px solid var(--borde);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.25s ease;
  width: 110px;
  height: 60px;
}

.botontab i {
  font-size: 18px;
  margin-bottom: 4px;
}

.botontab.pintar {
  background: var(--verde);
  border-color: var(--verde);
}

.botontab:hover {
  background: var(--verde-hover);
  color: var(--texto);
}

/* === Panel === */
.panel-form {
  max-width: 1200px;
  margin: 15px auto 40px;
  padding: 20px 25px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* === Formulario === */
.ui-inline-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px !important;
}

/* === Campos generales === */
.field-block {
  flex: 1 1 auto;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}

.label {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--texto);
}

.input-date,
.searchCity,
select {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--texto);
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  height: 44px;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.input-date:focus,
.searchCity:focus,
select:focus {
  outline: none;
  border-color: var(--verde-hover);
  box-shadow: 0 0 0 3px rgba(215, 233, 109, 0.35);
}

/* === Botón Buscar === */
.btn-search-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.containerBox-footer {
  background: #d7e96d !important;
  color: #08304a !important;
  border-radius: 6px !important;
  padding: 8px 30px 12px !important;
  cursor: pointer;
  border: 0px solid var(--verde-hover);
  text-align: center;
  transition: all 0.3s ease;
  font-weight: 600 !important;
  font-size: 15px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  margin-left: 10px;
  font-family: "Poppins", Arial, sans-serif;
}

.containerBox-footer:hover {
  background: #d7eb69 !important;
}

/* === Responsive === */
@media (max-width: 1100px) {
  .ui-inline-form {
    flex-wrap: wrap;
  }

  .field-block {
    flex: 1 1 45%;
  }

  .btn-search-wrap {
    flex: 1 1 100%;
    justify-content: center;
    margin-top: 15px;
  }

  .containerBox-footer {
    width: 100%;
  }
}
#botonhoteles:hover, #botontraslados:hover, #botonatracciones {
  text-decoration: none;
}
/* ====== Datepicker limpio (header blanco + flechas negras) ====== */
.ui-datepicker {
  border: none !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12) !important;
  padding: 10px 12px !important;
  font-family: "Poppins", sans-serif !important;
  color: #000 !important;
  width: auto !important;
  min-width: 290px !important;
  z-index: 9999 !important;
}

.ui-datepicker-header {
  background: #fff !important;      /* blanco total */
  border: none !important;
  border-radius: 12px 12px 0 0 !important;
  color: #000 !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 8px 0 10px !important;
  position: relative !important;
}

/* Título (mes + año) en negro, centrado */
.ui-datepicker-title, .ui-datepicker-year, .ui-datepicker-month {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #0088DA !important;
}

/* Asegura que no queden estilos de selects heredados (por si acaso) */
.ui-datepicker-title select { display:none !important; }

/* Flechas minimalistas ← → (sin fondo) */
.ui-datepicker-prev, .ui-datepicker-next {
  background: none !important;
  border: none !important;
  color: #000 !important;
  cursor: pointer !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  top: 8px !important;
  width: 24px !important; height: 24px !important;
  display: flex !important; justify-content: center !important; align-items: center !important;
}
.ui-datepicker-prev { left: 10px !important; }
.ui-datepicker-next { right: 10px !important; }
.ui-datepicker .ui-icon { display: none !important; }  /* oculta icono por defecto de jQuery UI */

.ui-datepicker-prev::before { content:"<"; color:#000; }
.ui-datepicker-next::before { content:">"; color:#000; }
.ui-datepicker-prev:hover, .ui-datepicker-next:hover { color:#333 !important; transform: scale(1.06); }

/* Días de semana y celdas */
.ui-datepicker-calendar { margin-top: 8px !important; border-collapse: separate !important; border-spacing: 4px !important; text-align: center !important; }
.ui-datepicker-calendar th { color:#000 !important; font-weight:600 !important; background:#D7E96D !important; text-transform:uppercase !important; font-size:12px !important; padding-bottom:4px !important; }
.ui-datepicker-calendar td a {
  display:inline-block !important; width:30px !important; height:30px !important; line-height:30px !important;
  border-radius:50% !important; color:#000 !important; background:transparent !important; text-decoration:none !important;
  transition:all .2s ease;
}
.ui-datepicker-calendar td a:hover { background:#e8f5b4 !important; color:#000 !important; }
.ui-datepicker-calendar .ui-state-active { background:#d7e96d !important; color:#0088DA !important; font-weight:600 !important; }
.ui-datepicker-today a { border:2px solid #d7e96d !important; }
.ui-datepicker-unselectable .ui-state-default { color:#c7c7c7 !important; opacity:.7 !important; }
/* Día seleccionado — forzar color personalizado */
.ui-datepicker .ui-datepicker-calendar .ui-state-active,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day .ui-state-active {
  background: #d7e96d !important;   /* tu verde lima */
  color: #08304a !important;        /* texto */
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 2px #d7e96d55 !important;
}

/* Por si el tema jQuery UI aplica gradientes o bordes */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: #d7e96d !important;
  color: #08304a !important;
  border: none !important;
}
/* Estilo base del Autocomplete */
.ui-autocomplete {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  color: #08304a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  z-index: 99999 !important;
  padding: 4px 0 !important;
}

/* Cada ítem */
.ui-menu-item {
  font-family: 'Poppins', sans-serif !important;
  color: #08304a !important;
  background: #fff !important;
  padding: 8px 14px !important;
  border: none !important;
  cursor: pointer !important;
}

/* Ítem en hover */
.ui-menu-item-wrapper.ui-state-active,
.ui-menu-item:hover,
.ui-menu-item:focus {
  background: #f2f2f2 !important; /* gris suave */
  color: #000 !important;
  font-weight: 500 !important;
  border: none !important;
}

/* Ítem seleccionado */
.ui-menu-item-wrapper.ui-state-focus {
  background: #f2f2f2 !important;
  color: #000 !important;
  font-weight: 500 !important;
}

/* Quitar colores heredados del tema */
.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  background: none !important;
  color: inherit !important;
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
}
/* =========================
   SELECTS (Habitaciones, Adultos, Niños)
   ========================= */
select,
select:focus,
select:active {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #fff !important;
  border: 1px solid #dfe6d7 !important;
  color: #08304a !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  padding: 6px 28px 6px 10px !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2308304a' d='M0 0l5 6 5-6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px !important;
}

/* Al pasar el mouse */
select:hover {
  background-color: #f8f8f8 !important;
  border-color: #ccd4cc !important;
}

/* Opciones internas del desplegable */
select option {
  background-color: #fff !important;
  color: #08304a !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
}

/* Hover sobre opciones (para navegadores que lo permiten) */
select option:hover,
select option:checked {
  background-color: #f2f2f2 !important;
  color: #000 !important;
}

/* Desactivar el color verde turquesa de los menús en Chrome/Firefox */
select::-ms-expand {
  display: none !important;
}
/* =========================
   FIX — Evitar el flash verde en inputs de fecha
   ========================= */

/* Input tipo fecha y campos del datepicker */
input[type="text"].input-date,
#startDate-hotel,
#endDate-hotel,
.ui-datepicker-trigger,
input:focus,
input.input-date:focus,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background-color: #fff !important;
  
  color: #08304a !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* Elimina el color de fondo verde de jQuery UI en focus/active */
.ui-datepicker-calendar .ui-state-hover,
.ui-datepicker-calendar .ui-state-focus,
.ui-datepicker-calendar .ui-state-active,
.ui-state-hover,
.ui-state-focus,
.ui-state-active {
  background: none !important;
  color: #000 !important;
  border: none !important;
  outline: none !important;
}

/* Asegura que el fondo inicial del input sea blanco */
input[type="text"],
input[type="text"].ui-state-default {
  background-color: #fff !important;
  color: #08304a !important;
  transition: none !important;
}

/* Elimina la animación de transición que causa el parpadeo */
* {
  transition: background-color 0s !important;
}
.error-input {
  box-shadow: 0 0 0em red;
  border: 1px solid red;
}
/* ==========================================================
   TRASLADOS — Versión definitiva con corrección de filas
   ========================================================== */

#divtraslados {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  width: 100%;
}

/* ⚠️ Corrección principal: evita que el formulario use flex inline */
#divtraslados form.ui-inline-form {
  display: block !important;
  width: 100% !important;
}

/* ==============================
   FILA 1 — 5 columnas horizontales
   ============================== */
#divtraslados .row-top {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 16px;
  align-items: end;
  width: 100%;
}

/* ==============================
   FILA 2 — checkbox + fecha salida + 4 compactos + botón
   ============================== */
#divtraslados .row-bottom {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.3fr) repeat(4, 100px) minmax(180px, 0.8fr);
  gap: 16px;
  align-items: end;
  margin-top: 20px;
  width: 100%;
}

/* ==============================
   Campos base
   ============================== */
#divtraslados .field-block {
  display: flex;
  flex-direction: column;
}

#divtraslados .label {
  font-size: 12px !important;
  font-weight: 600;
  color: #08304a !important;
  margin-bottom: 6px;
  line-height: 1.2;
}

#divtraslados input,
#divtraslados select {
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  width: 100%;
  transition: 0.2s ease all;
}

#divtraslados input:focus,
#divtraslados select:focus {
  border-color: #a5c4f0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/* ==============================
   Icono calendario
   ============================== */
#divtraslados .input-icon {
  position: relative;
}

#divtraslados .calendarioIcon-traslados, .calendarioIcon-hotel, .calendarioIcon-tickets {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
 display: none;
}

#divtraslados .input-icon .input-date {
  padding-left: 34px;
}

/* ==============================
   Checkbox “¿Incluir regreso?”
   ============================== */
#divtraslados #id_regreso {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #08304a;
  white-space: nowrap;
}

#divtraslados .calendario-icon-arrow {
  width: 16px;
  height: 16px;
}

/* ==============================
   Compactos (Horas, Minutos, Adultos, Niños)
   ============================== */
#divtraslados .mini-block {
  display: flex;
  flex-direction: column;
}

#divtraslados .mini-block select {
  min-width: 100px;
}

/


/* ==============================
   Elementos ocultos
   ============================== */
#divtraslados .elementHidden {
  display: none !important;
}

/* Forzamos que el bloque de “Fecha de Salida” esté visible */
#divtraslados #fechaRegreso {
  display: flex !important;
  flex-direction: column;
}

/* ==============================
   Responsive
   ============================== */
@media (max-width: 1200px) {
  #divtraslados .row-top {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  #divtraslados .row-bottom {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {
  #divtraslados .row-top {
    grid-template-columns: 1fr;
  }

  #divtraslados .row-bottom {
    grid-template-columns: 1fr 1fr;
  }

  #divtraslados .btn-search-wrap {
    justify-content: center;
  }

  #divtraslados .containerBox-footer {
    width: 100%;
    max-width: 320px;
  }
}
/* ======================================
   Calendario Traslados (igual a Hoteles)
   ====================================== */

/* Estilo de los inputs de fecha */
#divtraslados .input-date {
  background: #fff url('images/calendario.svg') no-repeat right 12px center;
  background-size: 16px;
  cursor: pointer;
}


/* Ajuste visual del calendario desplegable */
.ui-datepicker {
  font-family: "Poppins", sans-serif;
  border-radius: 10px !important;
  overflow: hidden;
}

.ui-datepicker-title {
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: #08304a;
}

/* Navegadores del mes */
.ui-datepicker-prev, .ui-datepicker-next {
  top: 6px !important;
  cursor: pointer;
}

/* Días y encabezados */
.ui-datepicker th span {
  
  color: #08304a !important;
  font-weight: 600;
  border-radius: 4px;
}

.ui-datepicker td a.ui-state-active {
  background-color: #4ec08d !important;
  color: #fff !important;
  border-radius: 50%;
}

/* Corrige padding interior del input */
#divtraslados input.input-date {
  padding-right: 38px !important;
}