/* ============================================================
   CONECTA TURISMO — TEMA OSCURO (DARK MODE)
   ------------------------------------------------------------
   Capa de override: enlázala SIEMPRE DESPUÉS del CSS principal.
     <link rel="stylesheet" href="estilo.css">
     <link rel="stylesheet" href="ct-dark-theme.css">  <-- esta

   Objetivos:
     · Fondo oscuro general
     · Labels de formulario en dorado
     · Bordes / contornos de inputs en dorado
     · Tipografía clara (legible sobre oscuro)
   ============================================================ */

:root {
  /* Marca (se mantiene) */
  --ct-color-primary: #0b1315; /* base oscura */
  --ct-color-secondary: #a17e5b; /* dorado / acento */
  --ct-color-optional: #c9c9c9;

  /* Paleta dark añadida */
  --ct-bg: #0b1315; /* fondo general */
  --ct-surface: #16211f; /* tarjetas, cajas, header */
  --ct-surface-2: #1f2c2a; /* hover / superficies elevadas */
  --ct-text: #e7e7e3; /* texto claro general */
  --ct-text-muted: #b8b8b0; /* texto secundario */
  --ct-gold: #a17e5b; /* dorado (labels y bordes) */
  --ct-gold-soft: rgba(189, 151, 88, 0.25);
}

/* ---------- Base ---------- */
body {
  background-color: var(--ct-bg);
  color: var(--ct-text);
}

/* Texto que en claro era oscuro/gris → ahora claro */
.title,
.title a,
.title-section,
.block-seo .title h1,
.product-recommended .box-price .price,
.product-recommended .caption .box-price .price {
  color: var(--ct-text);
}
/* El acento dorado de los títulos se mantiene */
.title-section span,
.title-section.red,
.block-seo .title h2 {
  color: var(--ct-gold);
}

/* ---------- LABELS EN DORADO ---------- */
label,
.label,
.searcher label,
md-input-container label,
.md-input-container label,
md-input-container .md-label,
md-input-container.md-input-has-value label,
md-input-container.md-input-focused label,
.md-datepicker-input-container label {
  color: var(--ct-gold) !important;
}

/* ---------- INPUTS: SUBRAYADO dorado, texto claro ---------- */
input,
select,
textarea,
.form-control,
md-input-container input,
md-input-container textarea,
md-select .md-select-value {
  background-color: transparent;
  color: var(--ct-text);
  border: 0;
  border-bottom: 1px solid var(--ct-gold);
  border-radius: 0;
}
input::placeholder,
textarea::placeholder {
  color: var(--ct-text-muted);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
md-select.md-default-theme:focus .md-select-value,
md-select:focus .md-select-value {
  border-bottom-color: var(--ct-gold);
  outline: none;
  box-shadow: 0 1px 0 0 var(--ct-gold); /* subrayado un poco más marcado al enfocar */
}

/* Angular Material: el subrayado de los campos también en dorado */
md-input-container .md-input {
  color: var(--ct-text);
  border-color: var(--ct-gold) !important;
}
md-input-container.md-input-focused .md-input,
md-input-container .md-input:focus,
md-input-container.md-input-has-value .md-input {
  border-color: var(--ct-gold) !important;
}
md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused
  label,
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
  color: var(--ct-gold) !important;
}

/* ---------- Header ---------- */
#web-header .top-line {
  background-color: var(--ct-surface);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
}

/* ---------- Buscador principal (caja blanca → oscura) ---------- */
.main-slider .position-searcher {
  background-color: var(--ct-surface);
}
.main-slider .position-searcher .searcher {
  border-top-color: var(--ct-surface-2);
}
.tabs-searcher .md-tab {
  color: var(--ct-text);
}
.tabs-searcher .md-tab.md-active {
  color: var(--ct-gold);
}

/* ---------- Tarjetas de producto ---------- */
.product-recommended {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.product-recommended .caption {
  background-color: var(--ct-surface);
  border-bottom-color: var(--ct-gold-soft);
}
.product-recommended .caption .destination {
  color: var(--ct-text-muted);
}
.product-recommended .caption .destination i {
  color: var(--ct-gold);
}
.product-recommended .image .box {
  background-color: var(--ct-surface);
  color: var(--ct-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.product-recommended .btn-arrow,
.product-recommended .btn-arrow-top {
  background-color: var(--ct-surface);
}
.product-recommended .btn-arrow-top {
  border-bottom-color: var(--ct-gold-soft);
  border-left-color: var(--ct-gold-soft);
}

/* Fondos claros auxiliares → superficie oscura */
.bg-gray {
  background-color: var(--ct-surface);
}

/* ---------- Footer ---------- */
#web-footer .bottom-line .copyright {
  color: var(--ct-text-muted);
}

/* ---------- Sidenav móvil (era blanco) ---------- */
.sidenav-menu-mvl,
.sidenav-menu-mvl md-content {
  background: var(--ct-bg);
}
.sidenav-menu-mvl ul .md-button,
.sidenav-menu-mvl ul li a {
  background: var(--ct-surface);
  color: var(--ct-text);
}
.sidenav-menu-mvl ul .md-button:hover,
.sidenav-menu-mvl ul li a:hover {
  background: var(--ct-surface-2);
  color: var(--ct-gold);
}

/* ---------- Diálogos / menús Material ---------- */
md-dialog {
  background-color: var(--ct-surface);
  color: var(--ct-text);
}
md-dialog .section-header {
  color: var(--ct-gold);
}
md-dialog a:hover {
  color: #d8b97e;
}

/* ---------- Enlaces ---------- */
a {
  color: var(--ct-gold);
}
a:hover {
  color: #d8b97e;
}

/* ---------- Detalle: scrollbar acorde al tema (opcional) ---------- */
* {
  scrollbar-color: var(--ct-gold) var(--ct-surface);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ct-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--ct-gold);
  border-radius: 10px;
}

/* ============================================================
   TRAVELWEB MANAGER v5 — MOTORES Y RESERVA (enfoque por ámbito)
   ------------------------------------------------------------
   La hoja del motor tiene cientos de reglas con colores fijos.
   En vez de ir caja por caja, aquí se hace un BARRIDO por las
   raíces de cada motor/página y luego se REAFIRMAN los acentos
   (dorado en precios, verde/rojo en estados, etc.).
   ============================================================ */

:root {
  --ct-border-soft: rgba(
    255,
    255,
    255,
    0.1
  ); /* sustituye a #e6e6e6 / #d3d3d3 */
  --ct-success: #6fbf73;
  --ct-danger: #ff6f60;
  --ct-warn: #e0c07a;
  --ct-info: #7ec1e8;
  --ct-info-bg: rgba(94, 151, 189, 0.16);
}

/* ============================================================
   1) BARRIDO DE TEXTO → claro en todo lo que cuelga de un motor
   ============================================================ */
.availEngines,
.availEngines *,
.availHotels,
.availHotels *,
.availFlights,
.availFlights *,
.availFerries,
.availFerries *,
.availTransfers,
.availTransfers *,
.availTours,
.availTours *,
.availTour,
.availTour *,
.availPackages,
.availPackages *,
.availCombinedSales,
.availCombinedSales *,
.productHotel,
.productHotel *,
.productActivity,
.productActivity *,
.productTour,
.productTour *,
.ferryResume,
.ferryResume *,
.transferResume,
.transferResume *,
.flightBreakdown,
.flightBreakdown *,
.bookingPage,
.bookingPage *,
.receiptPage,
.receiptPage *,
.budgetPage,
.budgetPage *,
.clientBooking,
.clientBooking *,
.paymentOrder,
.paymentOrder * {
  color: var(--ct-text) !important;
  border-color: var(--ct-border-soft);
}

/* md-icons neutros (gris/oscuro) → claros */
.availEngines md-icon,
.availHotels md-icon,
.availFerries md-icon,
.availTransfers md-icon,
.availTours md-icon,
.availTour md-icon,
.availPackages md-icon,
.availCombinedSales md-icon,
.productHotel md-icon,
.productActivity md-icon,
.productTour md-icon,
.ferryResume md-icon,
.transferResume md-icon,
.bookingPage md-icon,
.receiptPage md-icon,
.budgetPage md-icon,
.clientBooking md-icon {
  color: var(--ct-text) !important;
}

/* ============================================================
   2) FONDOS → oscuros
   ============================================================ */
/* 2a) Cajas blancas (#fff/#ffffff) → superficie */
.searchResume,
.loadingResults,
.loadingBooking,
.loadingValuation,
.hotelContainer,
.flightContainer,
.activityContainer,
.insuranceContainer,
.modalityContainer,
.ferryContainer,
.transferContainer,
.tourContainer,
.configService,
.boxModality,
.boxSegment,
.roomContainer,
.roomsContainer,
.galleryHotel,
.galleryActivity,
.galleryTour,
.hotelGeneralData,
.activityGeneralData,
.infoTour,
.informationContainer,
.modalitiesContainer,
.searchCalendar,
.boxContainer,
.boxFlight,
.formContainerBox,
.serviceContainer,
.priceContainer,
.contactUs,
.progressBarContainer,
.listBox,
.detailsContiner .boxSegment,
.securePayment,
.availEngines md-card,
.productTour md-card,
.availTour md-card,
.availEngines md-sidenav md-content,
.availTour md-sidenav md-content,
.availPackages md-sidenav md-content {
  background-color: var(--ct-surface) !important;
  border-color: var(--ct-border-soft) !important;
}

/* 2b) Cajas gris claro (#e6e6e6 / #f7f7f7 / #f8f8f8 / #eee) → superficie elevada */
.roomName,
.journeyBox,
.tariffTitle,
.dateHeader,
.sectionSubservice,
.secondBox,
.loginBox,
.boxSummary,
.includesTour,
.modalityName,
.ratingsContainer,
.b2bInfoPrice,
.headerLeft,
.orderTools span.titleOrder,
.orderTools .md-button.orderActive,
.detailsOption .title,
.roomHeader,
.paxHeader,
.transferHeader,
.btnShowDetails.open,
.detailsContiner,
.serviceData.journey .time,
.serviceData.extra,
.boxRadio,
.group-filter-category .btn-filter-category.categoryActive,
.infoGDPR,
.errorAlert,
.panel.panel-default > .panel-heading,
.panel > .panel-heading {
  background-color: var(--ct-surface-2) !important;
  border-color: var(--ct-border-soft) !important;
}

/* 2c) Hover claro de opciones → superficie elevada */
.boardOption:hover {
  background-color: var(--ct-surface-2) !important;
}

/* 2d) md-card y panel dentro de motores (fallback) */
.availEngines .panel,
.productHotel .panel,
.productTour .panel,
.availTour .panel,
.availPackages .panel {
  background-color: var(--ct-surface) !important;
  border-color: var(--ct-border-soft) !important;
}

/* 2e) Cabeceras que YA eran oscuras (#0b1315) — se reafirman por si acaso */
.boxHeader,
.headerBox,
.headerFixed,
.headerOptions,
.searchBox,
.searcherBox,
.tabsOperation .btnPageOperation.active,
.configurationTour > .resumeConfiguration,
.configurationPackage > .resumeConfiguration,
.changeService > .resumeConfiguration,
.availableModality .resultsContainer > .resumeConfiguration {
  background-color: var(--ct-color-primary) !important;
}

/* ============================================================
   3) REAFIRMAR ACENTOS (sobre el barrido de texto)
   ============================================================ */
/* 3a) Precios y totales → dorado */
.price,
.priceAmount,
.totalPrice,
.totalPrice .price,
.priceInformation .price,
.priceInfo .amount,
.hotelPriceDetails .price,
.activityPriceDetails .price,
.tourPriceDetails .price,
.boxPrice .optionPrice .price,
.infoTour .priceInformation .price,
.resumePrice .lineTotal .price,
.b2bInfoPrice .price {
  color: var(--ct-gold) !important;
}
.totalPrice .info,
.priceInformation .info,
.priceInfo .info,
.hotelPriceDetails .info,
.tourPriceDetails .info {
  color: var(--ct-text-muted) !important;
}

/* 3b) Enlaces / acciones doradas + sus iconos */
.newSearch,
.newSearch md-icon,
.moreOptions,
.moreOptions md-icon,
.moreInformation,
.moreInfo,
.fileLink,
.showDetails,
.showDetails md-icon,
.btnShowHotels,
.btnShowHotels md-icon,
.btnAddFlight,
.btnAddFlight md-icon,
.btnDeleteFlight,
.btnShowDetails a,
.iconInfo,
.infoSubTitle md-icon {
  color: var(--ct-gold) !important;
}

/* 3c) Botones de acción (fondo dorado, texto claro) — texto en blanco */
.md-button.moreInfo,
.md-button.price,
.md-button.viewTour,
.md-button.btnSearch,
.btnBooking,
.btnContinue,
.goBooking,
.tourBook,
.chooseService,
.modifiyService,
.btnPageOperation,
.btnGoToPay,
.btnLogin {
  color: #fff !important;
}

/* 3d) Estados: éxito (verde) y selección */
.selectedService,
.selectedService md-icon,
.chooseService md-icon,
.promotionalCodeContainer.valid label {
  color: var(--ct-success) !important;
}
.payMethod {
  background-color: rgba(111, 191, 115, 0.15) !important;
  color: var(--ct-success) !important;
}

/* 3e) Estados: error / aviso (rojo-naranja) */
.md-input-invalid label,
.md-input-invalid .md-input,
.md-input-invalid .md-input-message-animation,
.infoDestination b small,
.nightly,
.nightly md-icon,
.promotionalCodeContainer.invalid label {
  color: var(--ct-danger) !important;
}

/* 3f) Chips de reglas/promos (amarillo claro → ámbar sobre oscuro) */
.rules span {
  background-color: rgba(224, 192, 122, 0.15) !important;
  color: var(--ct-warn) !important;
}

/* 3g) Cajas informativas azules (#d9edf6 / #d9edf7 / #e3f3fd / #bce2f7) */
.formImportantMsg,
.alert-info,
.detailsScale,
.filtersContainer .panel-body .subTitle {
  background-color: var(--ct-info-bg) !important;
  color: var(--ct-info) !important;
  border-color: rgba(126, 193, 232, 0.4) !important;
}

/* 3h) Franja izquierda de servicios del resumen → dorada (más visible) */
.boxSummary .serviceContainer {
  border-left-color: var(--ct-gold) !important;
}

/* ============================================================
   4) FORMULARIOS DEL MOTOR (labels dorados, inputs con borde dorado)
   ============================================================ */
.availEngines md-input-container label,
.productHotel md-input-container label,
.productActivity md-input-container label,
.productTour md-input-container label,
.bookingPage md-input-container label,
.availTour md-input-container label,
.availPackages md-input-container label {
  color: var(--ct-gold) !important;
}
.availEngines md-input-container .md-input,
.productHotel md-input-container .md-input,
.productTour md-input-container .md-input,
.bookingPage md-input-container .md-input,
.availTour md-input-container .md-input,
.availPackages md-input-container .md-input,
.bookingPage md-input-container input {
  color: var(--ct-text) !important;
  border-color: var(--ct-gold) !important;
}
.availEngines md-input-container md-select .md-select-value,
.productTour md-input-container md-select .md-select-value,
.bookingPage md-input-container md-select .md-select-value {
  color: var(--ct-text) !important;
  border-bottom-color: var(--ct-gold) !important;
}

/* ============================================================
   5) DATEPICKER, SLIDER, TOOLBAR, MENÚS (popups del motor)
   ============================================================ */
.ui-datepicker {
  background-color: var(--ct-surface);
  color: var(--ct-text);
  border-color: var(--ct-gold);
}
.ui-datepicker th {
  color: var(--ct-gold);
}
.ui-datepicker td span,
.ui-datepicker td a {
  color: var(--ct-text);
}
.ui-datepicker .ui-datepicker-title select {
  color: var(--ct-text);
  background-color: var(--ct-surface-2);
}
.ui-datepicker .ui-state-hover {
  background-color: var(--ct-surface-2);
}
.ui-datepicker.travel-datepicker td > span,
.ui-datepicker.travel-datepicker td > a {
  background-color: var(--ct-surface-2);
  border-color: var(--ct-border-soft);
  color: var(--ct-text);
}
.ui-datepicker.travel-datepicker
  .ui-datepicker-unselectable.ui-state-disabled
  .ui-state-default {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--ct-text-muted);
}
.ui-datepicker.travel-datepicker
  .ui-datepicker-calendar
  td
  a[data-custom-price]::after,
.ui-datepicker.travel-datepicker .infoPrice {
  color: var(--ct-gold);
}
.ui-datepicker td a.ui-state-active {
  background-color: var(--ct-gold);
  color: #fff;
}

.ui-slider {
  background: rgba(255, 255, 255, 0.2);
}
.ui-slider .ui-slider-handle,
.ui-slider .ui-slider-range {
  background-color: var(--ct-gold);
}

md-toolbar:not(.md-menu-toolbar) {
  background-color: var(--ct-color-primary) !important;
  color: #fff;
}

/* ============================================================
   6) DETALLES VARIOS
   ============================================================ */
.bookingPage .progressBarContainer > div.step {
  background-color: var(--ct-surface-2) !important;
}
.bookingPage .progressBarContainer > div.step md-icon {
  background-color: var(--ct-surface) !important;
}
.notFoundContent h1,
.notFoundContent span {
  color: var(--ct-text) !important;
}
.clientMenu md-icon,
.agencyMenu md-icon {
  color: var(--ct-text-muted) !important;
}
.bookingPage .timeMessage {
  background-color: #12526f;
}
.panel-group .panel {
  background-color: var(--ct-surface-2);
}
/* ============================================================
   AJUSTES FINOS — formularios Material, autofill e itinerario
   ============================================================ */

/* ------------------------------------------------------------
   7) md-select: igualar al resto de inputs (subrayado dorado),
      no caja completa. Placeholder y flecha legibles.
   ------------------------------------------------------------ */
md-select .md-select-value,
md-input-container md-select .md-select-value {
  border: 0 !important;
  border-bottom: 1px solid var(--ct-gold) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--ct-text) !important;
}
md-select.md-default-theme:not([disabled]):focus .md-select-value,
md-select:not([disabled]):focus .md-select-value {
  border-bottom-color: var(--ct-gold) !important;
  color: var(--ct-text) !important;
}
/* Texto "País" cuando aún no hay selección */
md-select .md-select-value.md-select-placeholder,
md-select .md-select-value.md-select-placeholder > span {
  color: var(--ct-text-muted) !important;
}
/* Flecha del desplegable */
md-select .md-select-value .md-select-icon {
  color: var(--ct-gold) !important;
}
/* Panel de opciones al desplegar */
md-select-menu,
md-select-menu md-content,
.md-select-menu-container md-select-menu,
.md-select-menu-container md-content {
  background-color: var(--ct-surface) !important;
  color: var(--ct-text) !important;
}
md-select-menu md-option {
  color: var(--ct-text) !important;
}
md-select-menu md-option:not([disabled]):focus,
md-select-menu md-option.md-focused,
md-select-menu md-option[selected] {
  background-color: var(--ct-surface-2) !important;
  color: var(--ct-gold) !important;
}
.md-button.md-default-theme.md-primary.md-fab,
.md-button.md-primary.md-fab,
.md-button.md-default-theme.md-primary.md-raised,
.md-button.md-primary.md-raised {
  background-color: var(--ct-gold);
}
/* ------------------------------------------------------------
   8) Checkbox y radio: marca dorada, etiqueta clara
   ------------------------------------------------------------ */
md-checkbox:not(.md-checked) .md-icon,
md-checkbox.md-default-theme:not(.md-checked) .md-icon {
  border-color: var(--ct-gold) !important;
}
md-checkbox.md-checked .md-icon,
md-checkbox.md-default-theme.md-checked .md-icon {
  background-color: var(--ct-gold) !important;
  border-color: var(--ct-gold) !important;
}
md-checkbox.md-checked .md-icon:after {
  border-color: #0b1315 !important;
} /* el "tick" oscuro sobre dorado */
md-checkbox .md-label,
md-radio-button .md-label {
  color: var(--ct-text) !important;
}

md-radio-button:not(.md-checked) .md-off {
  border-color: var(--ct-gold) !important;
}
md-radio-button.md-checked .md-on {
  background-color: var(--ct-gold) !important;
}
md-radio-button.md-checked .md-off {
  border-color: var(--ct-gold) !important;
}

/* ------------------------------------------------------------
   9) AUTOFILL (Chrome/Safari/Firefox): mantener fondo oscuro
      y texto claro. El box-shadow interior tapa el azul del
      navegador; el text-fill-color fuerza el color del texto.
      NOTA: el color interior (--ct-bg) está pensado para
      formularios sobre fondo general. Si tu formulario va dentro
      de una tarjeta clara, cambia --ct-bg por --ct-surface aquí.
   ------------------------------------------------------------ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--ct-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--ct-bg) inset !important;
  -webkit-text-fill-color: var(--ct-text) !important;
  caret-color: var(--ct-text) !important;
  border-bottom-color: var(--ct-gold) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
/* Firefox */
input:autofill,
textarea:autofill,
select:autofill {
  background-color: var(--ct-bg) !important;
  color: var(--ct-text) !important;
  box-shadow: 0 0 0 1000px var(--ct-bg) inset !important;
}

/* ------------------------------------------------------------
   10) Itinerario del tour: fila "contrast" (fondo claro fijo)
   ------------------------------------------------------------ */
.productTour .itineraryDescription .dayItinerary.contrast {
  background-color: var(--ct-surface-2) !important;
  border-left-color: var(--ct-gold) !important;
}
.productTour .itineraryDescription .dayItinerary .dayInformation {
  border-left-color: var(--ct-border-soft) !important;
}
.productTour
  .itineraryDescription
  .dayItinerary
  .dayInformation
  .itinerary-day {
  background-color: var(--ct-gold) !important;
  border-color: var(--ct-surface) !important;
}