@media (min-width: 1220px) {.SearchLabel .fa{background:#8b7f6f;color:#fff}}.BoxHover:hover{box-shadow:1px 1px 10px #8b7f6f}.SearchBar .GreenButton .ui-button-text{background-color:#8b7f6f}.SiteTopBar{background-color:rgba(139,127,111,0.8)}:root{--color:#8b7f6f!important;--color-rotation:34.71500395394821deg!important;}.button, .button span.ui-button-text, .customButton span.ui-button-text{background-color:#8b7f6f!important;}/* ============================================================
   ABAL PLACES · Personalización Booking Engine Octorate
   Nivel 1 · Estética de marca MEJORADA
   Pegar en: Octorate → Booking Engine EVO → Style and graphic → CSS
   
   VERSIÓN OPTIMIZADA: Color taupe elegante + tipografía sofisticada
   ============================================================ */

/* ---- GOOGLE FONTS IMPORT ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   PALETA DE COLORES - ACTUALIZADA
   ============================================================ */
/* 
  taupe           #6B6B6B   (texto body - elegante y cálido)
  piedra          #F5F3EF   (fondos)
  piedra-2        #F0EDE6
  piedra-3        #EAE6DC
  tinta           #3A3A3A   (títulos, headers)
  tinta-suave     #6E6A62
  blanco          #FBFAF7
  línea           #CFC8BF
  gris-suave      #A89878   (cancelación, info secundaria)
*/

/* ============================================================
   TIPOGRAFÍA BASE
   ============================================================ */
body, .FontBold, .customButtonGreen, section.room div.options .row .action a.button,
.customSelect, .customSelect select, .slct select, .slct select option {
  font-family: 'Inter', system-ui, sans-serif !important;
}

h1, h2, h3, h4, h6, .RoomHeader, .rate-name {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   FONDO Y COLOR DE TEXTO GLOBAL
   ============================================================ */
body {
  background-color: #F5F3EF !important;
  padding: 0 !important;
  color: #6B6B6B !important;
}

/* Títulos en tinta oscura (impacto visual) */
h1, h2, h3, h4, h6, .RoomInfo, .RoomHeader, .rate-name {
  color: #3A3A3A !important; 
}

.Blue, .row span strong,
section.room div.details .view .box strong, .MarRight5 { 
  color: #6B6B6B !important; 
}

h1 { 
  font-weight: 500 !important; 
  font-size: 2.6rem !important; 
}

/* ============================================================
   CABECERA Y FECHAS
   ============================================================ */
header .information { 
  display: none !important; 
}

#iconDiv .information { 
  display: block !important; 
}

header .datetheme2 { 
  margin: 20px 0 0 !important; 
}

header .datetheme2 label, .customDate input, .customSpan,
section.room div.offert .box strong { 
  color: #6B6B6B !important; 
}

/* SEARCH BUTTON - VISIBLE Y LEGIBLE */
.customSearch, .search-button, button.search, 
.ui-button.ui-button-default, section.room div.options .row .action a.button {
  background-color: #3A3A3A !important;
  color: #FBFAF7 !important;
  border: none !important;
  font-weight: 600 !important;
}

.customSearch:hover, .search-button:hover,
button.search:hover, .ui-button.ui-button-default:hover {
  background-color: #1a1a1a !important;
  color: #FBFAF7 !important;
}

/* ============================================================
   TIPOGRAFÍA DE PRECIOS Y NEGRITAS
   ============================================================ */
.MarRight5, section.confirm div.content .total, .rowSection1 .flex .name>h4 {
  font-weight: 500 !important; 
  font-size: 2rem !important;
  color: #3A3A3A !important;
}

.FontBold {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important; 
  font-size: 1.2rem !important;
  text-transform: uppercase; 
  letter-spacing: 0.12em;
  color: #3A3A3A !important;
}

span.Orange.FontBold { 
  padding: 6px 10px; 
  letter-spacing: .5px; 
  color: #6B6B6B !important; 
}

span.Green.FontBold {
  padding: 6px 10px; 
  border: 1px solid #6B6B6B; 
  border-radius: 4px; 
  letter-spacing: .5px;
  color: #6B6B6B !important;
}

/* ============================================================
   OCULTAR ELEMENTOS GENÉRICOS DE OCTORATE
   ============================================================ */
section.cover .picture, 
section.cover .picture img, 
footer .flex-auto { 
  display: none !important; 
}

section.cover div.information { 
  background-color: transparent !important; 
  box-shadow: none !important; 
}

/* ============================================================
   TARJETAS DE HABITACIÓN
   ============================================================ */
section.room div.details span.offers {
  background-color: #3A3A3A !important; 
  color: #FBFAF7 !important;
}

section.room div.offert .box .price,
section.room div.options .row .action .price { 
  color: #3A3A3A !important; 
}

section.room div.offert .box .price sup, 
section.room div.options .row .action .price sup { 
  color: #3A3A3A !important; 
}

section.room div.offert .box .price p sup, 
section.room div.options .row .action .price p sup {
  color: #6B6B6B !important; 
  font-weight: 400 !important;
}

/* ============================================================
   BOTONES (HOVER = INVERSIÓN)
   ============================================================ */
section.room div.offert .button:hover,
.customButtonGreenOffert:hover, 
.customButtonGreenOffert.ui-state-hover,
.customButtonGreenOffert.ui-state-hover .ui-button-text,
section.room div.options .row .action a.button:hover,
.customButtonGreen.ui-state-hover, 
.customButtonGreen.ui-state-hover .ui-button-text {
  background-color: #6B6B6B !important; 
  color: #FBFAF7 !important;
}

.customButtonGreenOffert span.ui-button-text, 
.customButtonGreen span.ui-button-text,
section.room div.details .offers {
  background-color: #3A3A3A !important; 
  color: #FBFAF7 !important;
}

/* ============================================================
   FILAS DE OPCIONES Y TARIFAS
   ============================================================ */
section.room div.options .row {
  background-color: #FBFAF7 !important;
  border-left: 4px solid #6B6B6B !important;
}

.shortDesc, section.room div.details.big p {
  margin-top: 10px; 
  font-size: 1.4rem !important; 
  color: #6B6B6B !important; 
  font-weight: 400 !important;
}

section.room div.offert .box .old p { 
  color: #a31518 !important; 
}

.RoomHeader button { 
  margin-right: 0 !important; 
  border: 10px solid #F5F3EF; 
}

.RoomBottom li {
  list-style: square; 
  font-size: 1.4rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #6B6B6B !important;
}

section.room div.details .getinfo { 
  margin-top: 10px !important; 
}

section.room div.offert .box {
  text-align: right !important; 
  margin: 10px !important;
  background-color: #FBFAF7 !important; 
  border-color: #EAE6DC !important; 
  padding-top: 0 !important;
}

/* ============================================================
   CANCELACIÓN - SIN CAJAS, TEXTO SUAVE
   ============================================================ */
/* Ocultar bordes y fondos de cajas de cancelación */
.Leaden, .cancellation-info, .cancellation-box,
.ui-messages, .ui-message {
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  padding: 0.3rem 0 !important;
}

/* Texto de cancelación en gris suave, sin énfasis */
.Leaden, .cancellation-text, section.room div.options .row .cancellation,
.ui-message-text {
  color: #A89878 !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Si hay iconos de cancelación, hacerlos suaves también */
.cancellation-icon, .ui-message-icon {
  color: #A89878 !important;
}

/* ============================================================
   CALENDARIO - COMPRIMIDO Y ELEGANTE
   ============================================================ */
.customDayCalendarAvailable, .ui-datepicker-calendar {
  font-size: 0.85rem !important;
  padding: 0.4rem !important;
  background-color: #FBFAF7 !important; 
  color: #6B6B6B; 
  border-color: #EAE6DC; 
}

.ui-datepicker-calendar thead tr th,
.ui-datepicker-calendar tbody tr td {
  padding: 0.3rem !important;
  height: auto !important;
  font-size: 0.8rem !important;
}

.ui-datepicker-calendar tbody tr td a {
  padding: 0.2rem 0.4rem !important;
  font-size: 0.8rem !important;
  color: #6B6B6B !important;
}

.ui-datepicker-calendar tbody tr td.ui-state-active a {
  background-color: #3A3A3A !important;
  color: #FBFAF7 !important;
  padding: 0.2rem 0.4rem !important;
}

.ui-datepicker-header {
  background-color: #F0EDE6 !important;
  color: #3A3A3A !important;
  font-size: 0.9rem !important;
  padding: 0.4rem !important;
}

/* ============================================================
   SELECTS Y DROPDOWNS
   ============================================================ */
section.room div.options .row .action .slct { 
  border: 1px solid #6B6B6B !important; 
}

.ui-selectonemenu-trigger.ui-state-default.ui-corner-right { 
  background-color: #3A3A3A !important; 
}

/* ============================================================
   BARRA DE NOTIFICACIÓN
   ============================================================ */
.ui-notificationbar { 
  background-color: #3A3A3A !important; 
  display: none !important; 
}

/* ============================================================
   CONFIRMACIÓN / CHECKOUT
   ============================================================ */
section.confirm div.content .total, 
section.confirm div.content .total strong,
#checkPrivacy span, 
.checkout span.Orange.FontBold {
  color: #3A3A3A !important; 
  font-size: 15px !important; 
  margin-right: 0 !important;
}

.checkout .customInput input, 
.checkout .customInput label, 
.checkout .customInput.ui-inputfield {
  color: #6B6B6B !important; 
  border: 1px solid #6B6B6B !important;
}

.checkout .selectOneMenuTheme2 div.ui-selectonemenu-trigger, 
.checkout .selectOneMenuTheme2 label,
.checkout .ui-selectonemenu label.ui-selectonemenu-label { 
  border: 1px solid #6B6B6B !important; 
}

#checkPrivacy .ui-chkbox-box { 
  border: 1px solid #6B6B6B !important; 
}

.ui-dialog .ui-dialog-titlebar { 
  background-color: #3A3A3A !important; 
  text-transform: uppercase; 
}

/* ============================================================
   TABLAS
   ============================================================ */
.ui-datatable table thead tr th, 
.ui-datatable table tfoot tr td {
  background-color: #FBFAF7 !important; 
  color: #6B6B6B; 
  border-color: #EAE6DC;
}

.ui-datatable .ui-datatable-even, 
.roomPaxTable.ui-datatable .ui-datatable-odd { 
  background-color: #F0EDE6 !important; 
}

.ui-button-text, 
.ui-button-icon-left { 
  background-color: #3A3A3A !important; 
  color: #FBFAF7; 
}

.ui-inputfield { 
  background-color: #FBFAF7 !important; 
  color: #6B6B6B; 
  border-color: #EAE6DC; 
}

.ui-selectonemenu-panel tr.ui-state-highlight td { 
  background-color: #3A3A3A !important; 
  color: #FBFAF7; 
}

#prefix_table { 
  background-color: #FBFAF7; 
}

.ui-selectonemenu-panel .ui-selectonemenu-table td { 
  color: #6B6B6B; 
}

/* ============================================================
   DATEPICKER Y RESPONSIVE
   ============================================================ */
@media only screen and (max-width: 1450px) {
  .ui-datepicker-calendar, 
  .ui-datepicker-calendar thead tr th, 
  .ui-datepicker-header,
  .ui-overlaypanel .ui-overlaypanel-content, 
  .ui-selectonemenu-panel .ui-selectonemenu-list,
  .ui-selectcheckboxmenu .ui-selectcheckboxmenu-list {
    background-color: #FBFAF7 !important; 
    color: #6B6B6B !important;
    font-family: 'Inter', system-ui, sans-serif; 
    font-size: 1.4rem;
  }
  
  .ui-datepicker-header .ui-datepicker-next, 
  .ui-datepicker-header .ui-datepicker-prev,
  .ui-selectonemenu-panel .ui-state-highlight, 
  .ui-selectcheckboxmenu-panel .ui-state-highlight {
    background-color: #3A3A3A !important;
  }
  
  .ui-datepicker-calendar tbody tr td a, 
  .ui-datatable table tbody tr td { 
    color: #6B6B6B !important; 
  }
  
  .ui-datepicker-calendar tbody tr td { 
    border-color: #EAE6DC !important; 
  }
  
  .ui-accordion-header {
    background-color: #F0EDE6 !important; 
    color: #3A3A3A !important;
    text-transform: uppercase; 
    font-weight: 600 !important; 
    font-size: 1.5rem !important;
  }
  
  .ui-chkbox, .ui-chkbox-box { 
    border-color: #6B6B6B !important; 
  }
}

/* ============================================================
   IFRAME (SI SE INCRUSTA EN LA WEB)
   ============================================================ */
body.inside-iframe { 
  background: #F5F3EF !important; 
}

body.inside-iframe .SiteHeader { 
  display: none; 
}

body.inside-iframe .customHeaderLeft, 
body.inside-iframe .emai, 
body.inside-iframe .website { 
  display: none !important; 
}

section.checkout, 
section.relative, 
section.room { 
  margin: 0 !important; 
}

/* FIN DEL CSS */

/* ============================================================
   MOTOR MULTIUNIDAD - SELECTORES TAILWIND ESPECÍFICOS
   ============================================================ */

/* Cancelación - Sin colores chillones (especificidad aumentada) */
body span.text-orange-500,
body span.text-green-500,
body span.text-red-500,
body .text-orange-500.font-semibold,
body .text-green-500.font-semibold,
span.text-orange-500,
span.text-green-500,
span.text-red-500,
.text-orange-500,
.text-green-500,
.text-red-500 {
  color: #6B6B6B !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Descripción larga - Más legible */
.F3l3,
.TextCut.F3l3.DisplaylBlock {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #6B6B6B !important;
}

/* Título de habitación - Impacto visual */
.RoomTitle,
.RoomTitle.Fs20 {
  color: #3A3A3A !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* Botones Book Now en multiunidad */
.book-now-button,
button.book-now,
.btn-book-now {
  background-color: #3A3A3A !important;
  color: #FBFAF7 !important;
  border: none !important;
}

.book-now-button:hover,
button.book-now:hover,
.btn-book-now:hover {
  background-color: #1a1a1a !important;
}

/* FIN DEL CSS */

/* ============================================================
   AJUSTES FINALES MULTIUNIDAD
   ============================================================ */

/* Iconos "i" rojos y verdes → gris */
.text-red-500 i, .text-red-500 .pi, .text-red-500 svg,
.text-green-500 i, .text-green-500 .pi, .text-green-500 svg,
.text-orange-500 i, .text-orange-500 .pi, .text-orange-500 svg,
i.pi-info-circle, .pi-info-circle, .pi-exclamation-circle,
span.text-red-500, span.text-green-500, span.text-orange-500 {
  color: #A0A0A0 !important;
}

/* "EUR" verde → gris */
.text-green-600, .text-green-500, .text-green-700,
span.text-green-600, span.text-green-500,
.price-currency, .currency {
  color: #6B6B6B !important;
}

/* Cancelación: más pequeña y ligera que el nombre del apartamento */
.text-orange-500, .text-green-500, .text-red-500,
span.text-orange-500, span.text-green-500, span.text-red-500,
body span.text-orange-500, body span.text-green-500, body span.text-red-500 {
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  color: #8A8A8A !important;
  line-height: 1.4 !important;
}

/* Nombre del apartamento en tarifas: peso claro */
.font-semibold, .font-bold {
  color: #3A3A3A !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* Círculos negros (favoritos, share, volver) → suaves */
.p-button-rounded, .p-button-icon-only, button.p-button-rounded,
.RoomTop button, .RoomPhoto button,
.ui-button.ui-button-icon-only, .rounded-full,
.surface-900, .bg-gray-900, .bg-black {
  background-color: rgba(58, 58, 58, 0.55) !important;
  border: none !important;
  color: #FBFAF7 !important;
}

.p-button-rounded:hover, .p-button-icon-only:hover,
.RoomTop button:hover, .rounded-full:hover {
  background-color: rgba(58, 58, 58, 0.85) !important;
}

/* Botón RESERVAR: negro suave */
.p-button, button.p-button, .p-button-label {
  background-color: #3A3A3A !important;
  color: #FBFAF7 !important;
  border: none !important;
}

.p-button:hover, button.p-button:hover {
  background-color: #2A2A2A !important;
}

/* FIN AJUSTES */

/* ============================================================
   LATEST VERSION - FONDO Y CABECERA
   ============================================================ */

/* Fondo piedra en todos los contenedores posibles de la versión nueva */
html, body, #SiteMain, .SiteMain, .WhiteBack, .content-result,
.surface-100, .surface-ground, .surface-section, .surface-0,
.bg-gray-800, .bg-gray-900, .bg-black, .surface-900, .surface-800,
.page, .page-wrapper, .main, main, .container-fluid, .booking-page {
  background-color: #F5F3EF !important;
  background-image: none !important;
}

/* Ocultar cabecera con logo roto */
section.cover, .cover, section.header-cover,
header .logo img[src=""], header .logo img:not([src]),
.SiteHeader .logo, .logo-container:empty {
  display: none !important;
}

/* Contenedor principal sin marco */
.container, .wrap, .wrapper, .content {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* FIN LATEST VERSION */