/* Variables CSS */
:root {
    /* Colores principales */
    --color-primary: #005e59;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-light: #E6E6E6;
    --color-gray-medium: #929292;
    --color-gray-dark: #cecece;
    --color-reserved: #CFE9E4;

    /* Dimensiones del calendario */
    --day-size: 29px;
    --day-line-height: 28px;
    --day-font-size: 14px;
    --calendar-gap: 45px;
    --calendar-width: calc(var(--day-size) * 14 + var(--calendar-gap));
    --month-width: calc(var(--day-size) * 8);
    --weekday-width: calc(var(--day-size) * 7);

    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 32px;

    /* Tipografía */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, "Noto Sans";
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;

    /* Z-index */
    --z-dropdown: 10;
    --z-calendar: 999;
    --z-tooltip: 10000;

    /* Tooltip positioning */
    --tooltip-distance: 36px;
}

/* Contenedor principal */
.unified-calendar-container {
    position: relative;
    width: 100%;
}

/* ===== POSICIONAMIENTO DEL CALENDARIO FLATPICKR ===== */
/* COMENTADO: Estas líneas causaban que el calendario se mostrara automáticamente
.flatpickr-calendar {
  position: absolute !important;
  z-index: 9999 !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 5px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  border: 1px solid #e0e0e0 !important;
  display: none !important;
}

.flatpickr-calendar.open {
  display: block !important;
}
*/

/* Posicionamiento específico para el contexto de ficha/listados en Homeclub */
.barra-fecha-box {
    /* transition: all 250ms linear; */
}

html body.gfw-detail-page .barra-fecha-box .flatpickr-calendar,
html body.gfw-listing-page .barra-fecha-box .flatpickr-calendar {
    position: absolute !important;
    z-index: 10000 !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 10px !important;
}

@media only screen and (orientation: landscape) {
	html body.gfw-detail-page .barra-fecha-box .flatpickr-calendar {
        top: 10px !important;
    }
	html body.gfw-detail-page .barra-fecha-box .gfw-clear-dates-btn {
        top: 10px!important;
    }
    html body.gfw-detail-page #barra-fecha-box #FlatpickrPlaceholder::before,
    html body.gfw-detail-page #barra-fecha-box.active #FlatpickrPlaceholder::before {
        content: '';
        display: block;
        position: absolute;
        top: 6px!important;
        left: 37px;
        width: calc(100% - 70px);
        height: 1px;
        background-color: rgb(222, 226, 230);
        pointer-events: none;
    }
	html body.gfw-detail-page #barra-fecha-box.active {
        padding-top: 0 !important;
    }
	html body.gfw-detail-page .gfw-calendars-container {
        position: relative !important;
    }
}


/* Contenedor del calendario en Homeclub */
.gfw-calendars-container {
    position: absolute !important; /*  relative !important; */
    /* display: block !important; */
}

/* Input del calendario */
#daterange {
    position: relative !important;
    z-index: 1 !important;
}

/* Botón de limpiar fechas */
.gfw-clear-dates-btn {
    background: #005e59 !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: background-color 0.3s ease !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gfw-clear-dates-btn.active {
    opacity: 1;
    pointer-events: auto;
}

.gfw-clear-dates-btn:hover {
    background: #004d47 !important;
}

.unified-calendar-inputs {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.unified-calendar-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-gray-light);
    border-radius: 4px;
    font-size: var(--font-size-base);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.unified-calendar-input:hover,
.unified-calendar-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

.unified-calendar-input::placeholder {
    color: var(--color-gray-medium);
}

/* ===== VERSIÓN MÓVIL ===== */
@media screen and (orientation: portrait) {
    .gfw-desktop-daterange-container {
        display: none;
    }

    .gfw-mobile-daterange-container .gfw-calendars-container {
        /*display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        flex-direction: column;*/
        display: block!important;
        position: relative!important;
        padding-bottom: 0px !important;
    }

    .gfw-mobile-daterange-container-item {
        position: relative;
    }

    .gfw-mobile-daterange-container label {
        display: block !important;
        position: absolute !important;
        z-index: 10 !important;
        top: 26px !important;
        left: 7px !important;
        width: 95px !important;
        height: 28px !important;
        line-height: 30px !important;
        text-align: left !important;
        padding-right: 5px !important;
        font-size: 14px !important;
        background-color: #FFF !important;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .gfw-mobile-daterange-container label.active {
        top: -4px !important;
        left: 0 !important;
        width: 95px !important;
        height: 24px !important;
        line-height: 1em !important;
        line-height: 30px !important;
        text-align: left !important;
        padding-right: 5px !important;
        font-size: 13px !important;
    }

    .gfw-mobile-daterange-container label.highlighted {
        color: #005e59 !important;
    }

    .gfw-mobile-daterange-container input.mobile-date-input.highlighted {
        border-color: #005e59 !important;
        transition: all 0.3s ease !important;
    }

    .gfw-mobile-daterange-container input {
        width: 120px !important;
        height: 30px !important;
        padding: 0 5px;
        font-size: 12px !important;
        outline: none !important;
        border: none !important;
        border-radius: 0 !important;
        border: 1px solid #E4E4E4 !important;
        border-radius: 0 !important;
        color: #000 !important;
        background-color: #fff !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .gfw-mobile-daterange-container input:hover {
        border-color: #E4E4E4 !important;
        background-color: #fff !important;
    }

    .gfw-mobile-daterange-container input:focus {
        border-color: #E4E4E4 !important;
        background-color: #fff !important;
    }

    .gfw-mobile-daterange-container input:active {
        border-color: #E4E4E4 !important;
        background-color: #fff !important;
    }

    .gfw-mobile-daterange-container svg {
        display: block;
        transform: translate(0, -6px) !important;
    }
}

@media screen and (orientation: landscape) {
    .gfw-desktop-daterange-container {
        display: block;
        transition: all 300ms linear;
    }
    .gfw-listing-page #barra-fecha-box.active .gfw-desktop-daterange-container {
        margin-top: 40px;
    }

    .gfw-mobile-daterange-container {
        display: none;
    }

    .unified-calendar-mobile .mobile-date-inputs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-md);
    }

    .unified-calendar-mobile .mobile-date-item {
        position: relative;
        flex: 1;
    }

    .unified-calendar-mobile label {
        display: block;
        position: absolute;
        z-index: var(--z-dropdown);
        top: 26px;
        left: 7px;
        width: 95px;
        height: 28px;
        line-height: 30px;
        text-align: left;
        padding-right: 5px;
        font-size: var(--font-size-base);
        background-color: var(--color-white);
        pointer-events: none;
        transition: all 0.3s ease;
        color: var(--color-gray-medium);
    }

    .unified-calendar-mobile label.active {
        top: -4px;
        left: 0;
        width: 95px;
        height: 24px;
        line-height: 1em;
        font-size: var(--font-size-sm);
        color: var(--color-primary);
    }

    .unified-calendar-mobile label.highlighted {
        color: var(--color-primary);
    }

    .unified-calendar-mobile input.mobile-date-input {
        width: 100%;
        height: 30px;
        padding: 0 5px;
        font-size: var(--font-size-sm);
        outline: none;
        border: 1px solid #E4E4E4;
        border-radius: 0;
        color: var(--color-black);
        background-color: var(--color-white);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .unified-calendar-mobile input.mobile-date-input.highlighted {
        border-color: var(--color-primary);
    }

    .unified-calendar-mobile input.mobile-date-input:hover,
    .unified-calendar-mobile input.mobile-date-input:focus {
        border-color: var(--color-primary);
    }

    .unified-calendar-mobile .mobile-separator {
        display: block;
        transform: translate(0, -6px);
    }
}

/* ===== VERSIÓN DESKTOP ===== */
@media screen and (orientation: landscape) {
    .unified-calendar-desktop {
        display: block;
    }

    .unified-calendar-mobile {
        display: none;
    }

    /* ===== CONTENEDOR PRINCIPAL ===== */
    .unified-calendar-container {
        position: relative;
        max-width: 450px;
        height: 280px;
    }

    .unified-clear-dates-btn {
        position: absolute;
        top: var(--spacing-xs);
        right: var(--spacing-xs);
        font-size: var(--font-size-sm);
        text-decoration: underline;
        cursor: pointer;
        color: var(--color-gray-medium);
        z-index: var(--z-calendar);
    }

    .unified-clear-dates-btn:hover {
        color: var(--color-primary);
    }

    /* ===== CALENDARIO PRINCIPAL ===== */
    .flatpickr-calendar {
        /* position: absolute !important; */
        top: 0;
        left: 0;
        display: block !important;
        z-index: var(--z-calendar) !important;
        margin-top: 0.5rem !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: var(--color-white);
    }

    .flatpickr-calendar::before,
    .flatpickr-calendar::after {
        display: none !important;
    }

    /* ===== HEADERS DEL CALENDARIO ===== */
    .flatpickr-months {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .flatpickr-month {
        width: var(--month-width) !important;
        min-width: var(--month-width) !important;
        max-width: var(--month-width) !important;
        white-space: nowrap !important;
    }

    .flatpickr-month:nth-of-type(1) {
        transform: translateX(-15px) !important;
    }

    .flatpickr-month:nth-of-type(2) {
        transform: translateX(15px) !important;
    }

    .flatpickr-month:nth-of-type(1) span {
        display: inline-block;
        width: calc(100% - 80px);
        text-align: right !important;
    }

    .flatpickr-month:nth-of-type(2) span {
        display: inline-block;
        width: calc(100% - 80px);
        text-align: left !important;
    }

    /* ===== SELECTORES DE MES Y AÑO ===== */
    .flatpickr-current-month .cur-month {
        display: none !important;
    }

    .flatpickr-year-select,
    .fp-month-select {
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: transparent;
        font: inherit;
        cursor: pointer;
        color: inherit;
    }

    .flatpickr-year-select {
        padding: 0 .25rem;
        height: 1.75rem;
        line-height: 1;
    }

    .flatpickr-current-year select.flatpickr-year-select {
        margin-top: -2px;
    }

    .fp-month-select {
        padding: 0;
        margin: 0;
    }

    .flatpickr-current-month span,
    .flatpickr-current-month input {
        font-family: inherit;
        font-weight: 300 !important;
        text-transform: uppercase !important;
        font-size: var(--font-size-base) !important;
    }

    .flatpickr-current-month select {
        display: inline-block !important;
        font-size: var(--font-size-base) !important;
        text-transform: uppercase !important;
        text-align: right !important;
        padding-right: var(--spacing-md) !important;
        transform: translateX(-5px) !important;
        border: none !important;
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width=%22100%%22 height=%22100%%22 viewBox=%220 0 14 8%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg transform=%22matrix(-1,0,0,-1,19,10)%22%3E%3Cpath d=%22M18.79,8.387C19.095,8.779 19.068,9.347 18.707,9.707C18.317,10.098 17.683,10.098 17.293,9.707L12,4.414L6.707,9.707L6.613,9.79C6.221,10.095 5.653,10.068 5.293,9.707C4.902,9.317 4.902,8.683 5.293,8.293L11.293,2.293L11.387,2.21C11.779,1.905 12.347,1.932 12.707,2.293L18.707,8.293L18.79,8.387Z%22 fill=%22%23212121%22/%3E%3C/g%3E%3C/svg%3E') !important;
        background-size: 9px auto !important;
        background-repeat: no-repeat !important;
        background-position: calc(100% - 5px) center !important;
    }

    .flatpickr-current-month select:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* ===== NAVEGACIÓN (FLECHAS) ===== */
    .flatpickr-prev-month,
    .flatpickr-next-month {
        width: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
        height: 16px !important;
        padding: 0 !important;
        margin: 11px 0 0 0 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 2 !important;
    }
    .flatpickr-prev-month.flatpickr-disabled {
        display: block !important;
        pointer-events: none !important;
        cursor: default !important;
        opacity: 0.2 !important;
        filter: grayscale(100%) !important;
    }

    .flatpickr-prev-month svg,
    .flatpickr-next-month svg {
        width: 14px !important;
        height: 14px !important;
        fill: var(--color-black) !important;
    }

    .flatpickr-prev-month svg {
        transform: translate(-5px, -1px) !important;
    }

    .flatpickr-next-month svg {
        transform: translate(5px, -1px) !important;
    }

    /* ===== SELECTOR DE AÑO (input base) ===== */
    .numInputWrapper {
        background: transparent !important;
        position: relative !important;
        display: inline-block !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        transform: translateX(-8px) !important;
    }

    .numInputWrapper span {
        opacity: 1 !important;
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        width: 10px !important;
        height: 8px !important;
        cursor: pointer !important;
        transform: translate(0, 2px) !important;
    }

    .numInputWrapper:hover span {
        background-color: var(--color-white) !important;
    }

    .numInputWrapper .arrowUp,
    .numInputWrapper .arrowDown {
        opacity: 0 !important;
    }

    .numInputWrapper .arrowUp::after,
    .numInputWrapper .arrowDown::after {
        content: none !important;
    }

    .flatpickr-current-month .numInputWrapper {
        width: 45px !important;
        padding-left: 5px !important;
        margin-left: 5px !important;
    }

    .flatpickr-current-month input.cur-year {
        width: 45px;
        padding: 0;
        transform: translateX(-5px) !important;
    }

    .flatpickr-current-month span.cur-month {
        width: fit-content !important;
        margin-left: 0 !important;
    }

    /* ===== DÍAS DE LA SEMANA ===== */
    .flatpickr-weekday {
        text-transform: uppercase;
        letter-spacing: .02em;
        text-align: center;
    }

    .flatpickr-weekdaycontainer {
        width: var(--weekday-width) !important;
        min-width: var(--weekday-width) !important;
        max-width: var(--weekday-width) !important;
        font-weight: 500 !important;
    }

    .flatpickr-weekdaycontainer span {
        font-weight: 500 !important;
    }

    /* ===== DÍAS DEL CALENDARIO ===== */
    .dayContainer {
        width: var(--weekday-width) !important;
        min-width: var(--weekday-width) !important;
        max-width: var(--weekday-width) !important;
    }

    .dayContainer+.dayContainer {
        box-shadow: none !important;
    }

    .flatpickr-day {
        position: relative !important;
        width: var(--day-size) !important;
        max-width: var(--day-size);
        height: var(--day-line-height) !important;
        line-height: var(--day-line-height) !important;
        font-size: var(--day-font-size) !important;
    }

    html body .gfw-calendars-container .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover {
        color: #bebebe !important
    }

    /* ===== DÍAS SELECCIONADOS / RANGO ===== */
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover,
    .flatpickr-day.selected.prevMonthDay,
    .flatpickr-day.startRange.prevMonthDay,
    .flatpickr-day.endRange.prevMonthDay,
    .flatpickr-day.selected.nextMonthDay,
    .flatpickr-day.startRange.nextMonthDay,
    .flatpickr-day.endRange.nextMonthDay {
        background: var(--color-black) !important;
        box-shadow: none !important;
        color: var(--color-white) !important;
        border-color: var(--color-black) !important;
    }

    .flatpickr-day.selected.startRange,
    .flatpickr-day.startRange.startRange,
    .flatpickr-day.endRange.startRange,
    .flatpickr-day.selected.endRange,
    .flatpickr-day.startRange.endRange,
    .flatpickr-day.endRange.endRange {
        border-radius: 50% !important;
        background-color: var(--color-black) !important;
        border: none !important;
    }

    /* IMPORTANTE: permitir hover en todo el rango -> sin z-index negativo */
    .flatpickr-day.inRange {
        z-index: auto !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .flatpickr-day.hidden {
        display: inline-block!important;
    }
    html body .dayContainer span.flatpickr-day.flatpickr-disabled,
    html body .flatpickr-day.flatpickr-disabled:hover {
        cursor: default!important;
        color: #bebebe!important;
    }

    .flatpickr-day.nextMonthDay.hidden.selected.startRange:before,
    .flatpickr-day.prevMonthDay.hidden.selected.endRange::before {
        background-color: transparent !important;
    }

    /* Conectores visuales del rango */
    .flatpickr-day.selected.startRange::before,
    .flatpickr-day.startRange.startRange::before,
    .flatpickr-day.endRange.startRange::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 50% !important;
        width: calc(var(--day-size) / 2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-gray-light) !important;
    }

    .flatpickr-day.selected.endRange::before,
    .flatpickr-day.startRange.endRange::before,
    .flatpickr-day.endRange.endRange::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 0 !important;
        width: calc(var(--day-size) / 2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-gray-light) !important;
    }

    /* ===== DÍAS RESERVADOS ===== */
    .flatpickr-day.hs-reserved,
    .flatpickr-day.hs-reserved:hover {
        background-color: var(--color-reserved) !important;
        border-color: transparent !important;
        color: inherit !important;
        cursor: not-allowed !important;
    }

    .flatpickr-day.hs-reserved-between {
        border-radius: 0 !important;
        box-shadow: -5px 0 0 var(--color-reserved), 5px 0 0 var(--color-reserved) !important;
    }

    .flatpickr-day.hs-reserved-start,
    .flatpickr-day.hs-reserved-end,
    .flatpickr-day.hs-reserved-single {
        border-radius: 50% !important;
        background-color: var(--color-reserved) !important;
        border: none !important;
    }

    .flatpickr-day.hs-reserved-start::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 50% !important;
        width: calc(var(--day-size)/2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-reserved) !important;
    }

    .flatpickr-day.hs-reserved-end::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 0 !important;
        width: calc(var(--day-size)/2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-reserved) !important;
    }

    .flatpickr-day.hs-reserved-single::before {
        content: none !important;
    }

    /* ===== DÍAS DESHABILITADOS (estancia mínima opcional) ===== */
    html body .gfw-calendars-container .flatpickr-day.hs-disabled-minstay,
    html body .dayContainer span.flatpickr-day.hs-disabled-minstay,
    html body .gfw-calendars-container .flatpickr-day.hs-disabled-minstay.inRange,
    html body .dayContainer span.flatpickr-day.hs-disabled-minstay.inRange,
    html body .gfw-calendars-container .flatpickr-day.flatpickr-disabled.hs-disabled-minstay,
    html body .dayContainer span.flatpickr-day.flatpickr-disabled.hs-disabled-minstay,
    html body .gfw-calendars-container .flatpickr-day.flatpickr-disabled.hs-disabled-minstay.inRange,
    html body .dayContainer span.flatpickr-day.flatpickr-disabled.hs-disabled-minstay.inRange {
        color: var(--color-gray-dark) !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        opacity: 0.5 !important;
        background-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    /* ===== TOOLTIPS ===== */
    .hs-tooltip {
        position: fixed !important;
        color: var(--color-white) !important;
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        border-radius: var(--spacing-xs) !important;
        font-size: var(--font-size-xs) !important;
        white-space: nowrap !important;
        z-index: var(--z-tooltip) !important;
        pointer-events: none !important;
        box-shadow: 0 6px var(--spacing-md) rgba(0, 0, 0, .2) !important;
    }

    .hs-tooltip::after {
        content: '' !important;
        position: absolute !important;
        z-index: var(--z-tooltip) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: -6px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 6px solid transparent !important;
        border-right: 6px solid transparent !important;
        border-top: 6px solid currentColor !important;
    }

    .hs-tooltip--reserved {
        background: var(--color-primary) !important;
    }

    .hs-tooltip--reserved::after {
        color: var(--color-primary) !important;
    }

    .hs-tooltip--nights,
    .hs-tooltip--minstay {
        background: var(--color-gray-medium) !important;
    }

    .hs-tooltip--nights::after,
    .hs-tooltip--minstay::after {
        color: var(--color-gray-medium) !important;
    }

    /* ===== OVERFLOW Y Z-INDEX ===== */
    .flatpickr-calendar,
    .flatpickr-days,
    .dayContainer {
        overflow: visible !important;
    }

    /* ===== ELIMINAR TRANSICIONES ===== */
    .flatpickr-calendar,
    .flatpickr-calendar *,
    .flatpickr-calendar *:before,
    .flatpickr-calendar *:after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        /* COMENTADO: visibility: visible !important; - causaba calendario siempre visible */
    }

    /* COMENTADO: Estas líneas causaban que el calendario se mostrara automáticamente
  .flatpickr-calendar.open,
  .flatpickr-calendar.inline {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  */

    .flatpickr-day,
    .flatpickr-day:hover,
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.inRange {
        transition: none !important;
        animation: none !important;
    }

    .flatpickr-calendar {
        width: var(--calendar-width) !important;
        min-width: var(--calendar-width) !important;
        max-width: var(--calendar-width) !important;
    }

    .flatpickr-months,
    .flatpickr-weekdays,
    .flatpickr-days {
        width: var(--calendar-width) !important;
        min-width: var(--calendar-width) !important;
        max-width: var(--calendar-width) !important;
        justify-content: space-between !important;
    }

    /* ===== Prev/Next month ocultos ===== */
    .prevMonthDay,
    .nextMonthDay {
        visibility: hidden !important;
    }
}

/* ===== OPCION FLEX  ===== */
.flexibility-options {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: #F1F1F1;
    border-radius: 4px;
}

.flexibility-option {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-gray-light);
    background: var(--color-white);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
}

.flexibility-option:hover,
.flexibility-option.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

/* ===== BOTONES DE ACCIÓN ===== */
.unified-calendar-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.unified-calendar-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-gray-light);
    background: var(--color-white);
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}

.unified-calendar-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.unified-calendar-btn.primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.unified-calendar-btn.primary:hover {
    background: var(--color-black);
    border-color: var(--color-black);
}

.unified-calendar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ESTILOS HOME */
html body.hs-home-page #barra-fecha-box.modal-box-banner.barra-fecha-box {
    top: calc(50vh - 130px) !important; /* calc(50vh - 240px) !important; */
    left: 112px !important;
    width: 510px !important;
    min-width: 510px !important;
    max-width: 510px !important;
    min-height: 280px !important; /* 380px !important; */
    transition: all 300ms linear;
}

html body.hs-home-page #barra-fecha-box.modal-box-banner.barra-fecha-box.active {
    top: calc(50vh - 240px) !important; /* calc(50vh - 240px) !important; */
    left: 112px !important;
    width: 510px !important;
    min-width: 510px !important;
    max-width: 510px !important;
    min-height: 380px !important; /* 380px !important; */
}

html body.hs-home-page #barra-fecha-box.modal-box-banner.barra-fecha-box #daterange {
    opacity: 0 !important;

}

html body.hs-home-page #barra-fecha-box.modal-box-banner.barra-fecha-box .flatpickr-calendar.arrowTop.arrowLeft,
html body.hs-home-page #barra-fecha-box.modal-box-banner.barra-fecha-box .flatpickr-calendar.arrowTop.arrowLeft.open {
    padding: 0 !important;
    /* width: 440px!important;
        min-width: 440px!important;
        max-width: 440px!important; */
    margin: 0 10px !important;
    top: 20px !important; /* 60px !important; */
    left: 20px !important;
}
html body.hs-home-page #barra-fecha-box.modal-box-banner.barra-fecha-box.active .flatpickr-calendar.arrowTop.arrowLeft,
html body.hs-home-page #barra-fecha-box.modal-box-banner.barra-fecha-box.active .flatpickr-calendar.arrowTop.arrowLeft.open {
    top: 65px !important;
}

/* ===== CLEAR DATES ===== */
.gfw-clear-dates-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    /* var(--spacing-xs); */
    font-size: 13px;
    /* var(--font-size-sm); */
    text-decoration: underline;
    color: black !important;
    border: none !important;
    background-color: transparent !important;
    cursor: pointer;
}

@media only screen and (orientation: landscape) {
	.gfw-listing-page .gfw-clear-dates-btn {
        top: 10px;
    }
}


/* ===== BARRA SUEPERIOR FLATPICKR ===== */
.flatpickr-prev-month svg {
    transform: translate(7px, -3px) !important;
}

.flatpickr-next-month svg {
    transform: translate(-7px, -3px) !important;
}

.flatpickr-month:nth-of-type(1) .flatpickr-current-month {
    transform: translateX(15px) !important;
}

.flatpickr-month:nth-of-type(2) .flatpickr-current-month {
    transform: translateX(-25px) !important;
}


/* ===== FLEX BANNER ===== */
.gfw-flex-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 15px 0 20px;
    background-color: #E3F6FE;
    color: #3A7EA0;
    font-size: 14px;
    opacity: 0;
    max-height: 1px;
    transition: all 750ms ease;
}

.gfw-flex-banner.active {
    opacity: 1;
    max-height: 100px;
    padding: 15px 15px 15px 20px;
}

.gfw-flex-banner-text div {
    display: inline-block;
    border: solid 1px #3A7EA0;
    padding: 5px 10px;
    margin-right: 5px !important;
    border-radius: 5px;
    white-space: nowrap;
    cursor: pointer;
}

/* // ESTILOS HOME */
/* MOBILE*/
@media screen and (orientation: portrait) {

    /* ===== CONTENEDOR PRINCIPAL ===== */
    .unified-calendar-container {
        position: relative;
        max-width: 450px;
        height: 280px;
    }

    .unified-clear-dates-btn {
        position: absolute;
        top: var(--spacing-xs);
        right: var(--spacing-xs);
        font-size: var(--font-size-sm);
        text-decoration: underline;
        cursor: pointer;
        color: var(--color-gray-medium);
        z-index: var(--z-calendar);
    }

    .unified-clear-dates-btn:hover {
        color: var(--color-primary);
    }

    /* ===== CALENDARIO PRINCIPAL ===== */
    .flatpickr-calendar {
        /* position: absolute !important; */
        top: 0;
        left: 0;
        display: block !important;
        z-index: var(--z-calendar) !important;
        margin-top: 0.5rem !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: var(--color-white);
    }

    .flatpickr-calendar::before,
    .flatpickr-calendar::after {
        display: none !important;
    }

    /* ===== HEADERS DEL CALENDARIO ===== */
    .flatpickr-months {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .flatpickr-month {
        width: var(--month-width) !important;
        min-width: var(--month-width) !important;
        max-width: var(--month-width) !important;
        white-space: nowrap !important;
    }

    .flatpickr-month:nth-of-type(1) {
        transform: translateX(-15px) !important;
    }

    .flatpickr-month:nth-of-type(2) {
        transform: translateX(15px) !important;
    }

    .flatpickr-month:nth-of-type(1) span {
        display: inline-block;
        width: calc(100% - 80px);
        text-align: right !important;
    }

    .flatpickr-month:nth-of-type(2) span {
        display: inline-block;
        width: calc(100% - 80px);
        text-align: left !important;
    }

    /* ===== SELECTORES DE MES Y AÑO ===== */
    .flatpickr-current-month .cur-month {
        display: none !important;
    }

    .flatpickr-year-select,
    .fp-month-select {
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: transparent;
        font: inherit;
        cursor: pointer;
        color: inherit;
    }

    .flatpickr-year-select {
        padding: 0 .25rem;
        height: 1.75rem;
        line-height: 1;
    }

    .flatpickr-current-year select.flatpickr-year-select {
        margin-top: -2px;
    }

    .fp-month-select {
        padding: 0;
        margin: 0;
    }

    .flatpickr-current-month span,
    .flatpickr-current-month input {
        font-family: inherit;
        font-weight: 300 !important;
        text-transform: uppercase !important;
        font-size: var(--font-size-base) !important;
    }

    .flatpickr-current-month select {
        display: inline-block !important;
        font-size: var(--font-size-base) !important;
        text-transform: uppercase !important;
        text-align: right !important;
        padding-right: var(--spacing-md) !important;
        transform: translateX(-5px) !important;
        border: none !important;
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width=%22100%%22 height=%22100%%22 viewBox=%220 0 14 8%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg transform=%22matrix(-1,0,0,-1,19,10)%22%3E%3Cpath d=%22M18.79,8.387C19.095,8.779 19.068,9.347 18.707,9.707C18.317,10.098 17.683,10.098 17.293,9.707L12,4.414L6.707,9.707L6.613,9.79C6.221,10.095 5.653,10.068 5.293,9.707C4.902,9.317 4.902,8.683 5.293,8.293L11.293,2.293L11.387,2.21C11.779,1.905 12.347,1.932 12.707,2.293L18.707,8.293L18.79,8.387Z%22 fill=%22%23212121%22/%3E%3C/g%3E%3C/svg%3E') !important;
        background-size: 9px auto !important;
        background-repeat: no-repeat !important;
        background-position: calc(100% - 5px) center !important;
    }

    .flatpickr-current-month select:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* ===== NAVEGACIÓN (FLECHAS) ===== */
    .flatpickr-prev-month,
    .flatpickr-next-month {
        width: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
        height: 16px !important;
        padding: 0 !important;
        margin: 11px 0 0 0 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 2 !important;
    }

    .flatpickr-prev-month svg,
    .flatpickr-next-month svg {
        width: 14px !important;
        height: 14px !important;
        fill: var(--color-black) !important;
    }

    .flatpickr-prev-month svg {
        transform: translate(-5px, -1px) !important;
    }

    .flatpickr-next-month svg {
        transform: translate(5px, -1px) !important;
    }

    /* ===== SELECTOR DE AÑO (input base) ===== */
    .numInputWrapper {
        background: transparent !important;
        position: relative !important;
        display: inline-block !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        transform: translateX(-8px) !important;
    }

    .numInputWrapper span {
        opacity: 1 !important;
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        width: 10px !important;
        height: 8px !important;
        cursor: pointer !important;
        transform: translate(0, 2px) !important;
    }

    .numInputWrapper:hover span {
        background-color: var(--color-white) !important;
    }

    .numInputWrapper .arrowUp,
    .numInputWrapper .arrowDown {
        opacity: 0 !important;
    }

    .numInputWrapper .arrowUp::after,
    .numInputWrapper .arrowDown::after {
        content: none !important;
    }

    .flatpickr-current-month .numInputWrapper {
        width: 45px !important;
        padding-left: 5px !important;
        margin-left: 5px !important;
    }

    .flatpickr-current-month input.cur-year {
        width: 45px;
        padding: 0;
        transform: translateX(-5px) !important;
    }

    .flatpickr-current-month span.cur-month {
        width: fit-content !important;
        margin-left: 0 !important;
    }

    /* ===== DÍAS DE LA SEMANA ===== */
    .flatpickr-weekday {
        text-transform: uppercase;
        letter-spacing: .02em;
        text-align: center;
    }

    .flatpickr-weekdaycontainer {
        width: var(--weekday-width) !important;
        min-width: var(--weekday-width) !important;
        max-width: var(--weekday-width) !important;
        font-weight: 500 !important;
    }

    .flatpickr-weekdaycontainer span {
        font-weight: 500 !important;
    }

    /* ===== DÍAS DEL CALENDARIO ===== */
    .dayContainer {
        width: var(--weekday-width) !important;
        min-width: var(--weekday-width) !important;
        max-width: var(--weekday-width) !important;
    }

    .dayContainer+.dayContainer {
        box-shadow: none !important;
    }

    .flatpickr-day {
        position: relative !important;
        width: var(--day-size) !important;
        max-width: var(--day-size);
        height: var(--day-line-height) !important;
        line-height: var(--day-line-height) !important;
        font-size: var(--day-font-size) !important;
    }

    html body .gfw-calendars-container .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover {
        color: #bebebe !important
    }

    /* ===== DÍAS SELECCIONADOS / RANGO ===== */
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover,
    .flatpickr-day.selected.prevMonthDay,
    .flatpickr-day.startRange.prevMonthDay,
    .flatpickr-day.endRange.prevMonthDay,
    .flatpickr-day.selected.nextMonthDay,
    .flatpickr-day.startRange.nextMonthDay,
    .flatpickr-day.endRange.nextMonthDay {
        background: var(--color-black) !important;
        box-shadow: none !important;
        color: var(--color-white) !important;
        border-color: var(--color-black) !important;
    }

    .flatpickr-day.selected.startRange,
    .flatpickr-day.startRange.startRange,
    .flatpickr-day.endRange.startRange,
    .flatpickr-day.selected.endRange,
    .flatpickr-day.startRange.endRange,
    .flatpickr-day.endRange.endRange {
        border-radius: 50% !important;
        background-color: var(--color-black) !important;
        border: none !important;
    }

    /* IMPORTANTE: permitir hover en todo el rango -> sin z-index negativo */
    .flatpickr-day.inRange {
        z-index: auto !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .flatpickr-day.nextMonthDay.hidden.selected.startRange:before,
    .flatpickr-day.prevMonthDay.hidden.selected.endRange::before {
        background-color: transparent !important;
    }

    /* Conectores visuales del rango */
    .flatpickr-day.selected.startRange::before,
    .flatpickr-day.startRange.startRange::before,
    .flatpickr-day.endRange.startRange::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 50% !important;
        width: calc(var(--day-size) / 2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-gray-light) !important;
    }

    .flatpickr-day.selected.endRange::before,
    .flatpickr-day.startRange.endRange::before,
    .flatpickr-day.endRange.endRange::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 0 !important;
        width: calc(var(--day-size) / 2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-gray-light) !important;
    }

    /* ===== DÍAS RESERVADOS ===== */
    .flatpickr-day.hs-reserved,
    .flatpickr-day.hs-reserved:hover {
        background-color: var(--color-reserved) !important;
        border-color: transparent !important;
        color: inherit !important;
        cursor: not-allowed !important;
    }

    .flatpickr-day.hs-reserved-between {
        border-radius: 0 !important;
        box-shadow: -5px 0 0 var(--color-reserved), 5px 0 0 var(--color-reserved) !important;
    }

    .flatpickr-day.hs-reserved-start,
    .flatpickr-day.hs-reserved-end,
    .flatpickr-day.hs-reserved-single {
        border-radius: 50% !important;
        background-color: var(--color-reserved) !important;
        border: none !important;
    }

    .flatpickr-day.hs-reserved-start::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 50% !important;
        width: calc(var(--day-size)/2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-reserved) !important;
    }

    .flatpickr-day.hs-reserved-end::before {
        content: '' !important;
        position: absolute !important;
        z-index: -2 !important;
        top: 0 !important;
        left: 0 !important;
        width: calc(var(--day-size)/2) !important;
        height: var(--day-line-height) !important;
        background-color: var(--color-reserved) !important;
    }

    .flatpickr-day.hs-reserved-single::before {
        content: none !important;
    }

    /* ===== DÍAS DESHABILITADOS (estancia mínima opcional) ===== */
    html body .gfw-calendars-container .flatpickr-day.hs-disabled-minstay,
    html body .dayContainer span.flatpickr-day.hs-disabled-minstay,
    html body .gfw-calendars-container .flatpickr-day.hs-disabled-minstay.inRange,
    html body .dayContainer span.flatpickr-day.hs-disabled-minstay.inRange,
    html body .gfw-calendars-container .flatpickr-day.flatpickr-disabled.hs-disabled-minstay,
    html body .dayContainer span.flatpickr-day.flatpickr-disabled.hs-disabled-minstay,
    html body .gfw-calendars-container .flatpickr-day.flatpickr-disabled.hs-disabled-minstay.inRange,
    html body .dayContainer span.flatpickr-day.flatpickr-disabled.hs-disabled-minstay.inRange {
        color: var(--color-gray-dark) !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        opacity: 0.5 !important;
        background-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    /* ===== TOOLTIPS ===== */
    .hs-tooltip {
        position: fixed !important;
        color: var(--color-white) !important;
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        border-radius: var(--spacing-xs) !important;
        font-size: var(--font-size-xs) !important;
        white-space: nowrap !important;
        z-index: var(--z-tooltip) !important;
        pointer-events: none !important;
        box-shadow: 0 6px var(--spacing-md) rgba(0, 0, 0, .2) !important;
    }

    .hs-tooltip::after {
        content: '' !important;
        position: absolute !important;
        z-index: var(--z-tooltip) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: -6px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 6px solid transparent !important;
        border-right: 6px solid transparent !important;
        border-top: 6px solid currentColor !important;
    }

    .hs-tooltip--reserved {
        background: var(--color-primary) !important;
    }

    .hs-tooltip--reserved::after {
        color: var(--color-primary) !important;
    }

    .hs-tooltip--nights,
    .hs-tooltip--minstay {
        background: var(--color-gray-medium) !important;
    }

    .hs-tooltip--nights::after,
    .hs-tooltip--minstay::after {
        color: var(--color-gray-medium) !important;
    }

    /* ===== OVERFLOW Y Z-INDEX ===== */
    .flatpickr-calendar,
    .flatpickr-days,
    .dayContainer {
        overflow: visible !important;
    }

    /* ===== ELIMINAR TRANSICIONES ===== */
    .flatpickr-calendar,
    .flatpickr-calendar *,
    .flatpickr-calendar *:before,
    .flatpickr-calendar *:after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        /* COMENTADO: visibility: visible !important; - causaba calendario siempre visible */
    }

    /* COMENTADO: Estas líneas causaban que el calendario se mostrara automáticamente
    .flatpickr-calendar.open,
    .flatpickr-calendar.inline {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    */

    .flatpickr-day,
    .flatpickr-day:hover,
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.inRange {
        transition: none !important;
        animation: none !important;
    }

    .flatpickr-calendar {
        width: var(--calendar-width) !important;
        min-width: var(--calendar-width) !important;
        max-width: var(--calendar-width) !important;
    }

    .flatpickr-months,
    .flatpickr-weekdays,
    .flatpickr-days {
        width: var(--calendar-width) !important;
        min-width: var(--calendar-width) !important;
        max-width: var(--calendar-width) !important;
        justify-content: space-between !important;
    }

    /* ===== Prev/Next month ocultos ===== */
    .prevMonthDay,
    .nextMonthDay {
        visibility: hidden !important;
    }
}

#MobileFlatpickrPlaceholder {
    display: block;
    position: relative;
    width: 100%;
    left: 50% !important;
    /* 0px!important; */
    max-width: 210px;
    min-height: 240px;
    margin: 0;
    /* 0 0 20px 0; */
    /* 0 100px 0 !important; */
    transform: translateX(calc(-50% + 3px));
}

#MobileFlatpickrPlaceholder .flatpickr-calendar {
    top: 0 !important;
    max-width: 210px !important;
    width: 210px !important;
    min-width: 210px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#MobileFlatpickrPlaceholder .flatpickr-calendar .flatpickr-months {
    position: relative !important;
    max-width: 210px !important;
    width: 210px !important;
    min-width: 210px !important;
}

#MobileFlatpickrPlaceholder .flatpickr-monthDropdown-months {
    left: 0 !important;
}

#MobileFlatpickrPlaceholder .flatpickr-months .flatpickr-prev-month,
#MobileFlatpickrPlaceholder .flatpickr-months .flatpickr-next-month {
    top: 100px !important;
}

#MobileFlatpickrPlaceholder .flatpickr-months .flatpickr-prev-month svg {
    transform: translate(-40px, -1px) !important;
}

#MobileFlatpickrPlaceholder .flatpickr-months .flatpickr-next-month svg {
    transform: translate(35px, -1px) !important;
}

#MobileFlatpickrPlaceholder .flatpickr-current-month select.flatpickr-monthDropdown-months {
    background-image: none !important;
    background-color: #fff !important;
    text-align: left !important;
}

#MobileFlatpickrPlaceholder .flatpickr-current-month select::after {
    content: '' !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    right: 0 !important;
    width: 10px !important;
    height: 10px !important;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg width=%22100%%22 height=%22100%%22 viewBox=%220 0 14 8%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg transform=%22matrix(-1,0,0,-1,19,10)%22%3E%3Cpath d=%22M18.79, 8.387C19.095, 8.779 19.068, 9.347 18.707, 9.707C18.317, 10.098 17.683, 10.098 17.293, 9.707L12, 4.414L6.707, 9.707L6.613, 9.79C6.221, 10.095 5.653, 10.068 5.293, 9.707C4.902, 9.317 4.902, 8.683 5.293, 8.293L11.293, 2.293L11.387, 2.21C11.779, 1.905 12.347, 1.932 12.707, 2.293L18.707, 8.293L18.79, 8.387Z%22 fill=%22%23212121%22/%3E%3C/g%3E%3C/svg%3E) !important;
    background-size: 9px auto !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 5px) center !important;
}

#MobileFlatpickrPlaceholder .flatpickr-month:nth-of-type(1) .flatpickr-current-month {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    transform: translateX(15px) !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    left: 10px !important;
    text-align: left !important;
}

#MobileFlatpickrPlaceholder .flatpickr-day.selected.startRange,
#MobileFlatpickrPlaceholder .flatpickr-day.startRange.startRange,
#MobileFlatpickrPlaceholder .flatpickr-day.endRange.startRange,
#MobileFlatpickrPlaceholder .flatpickr-day.selected.endRange,
#MobileFlatpickrPlaceholder .flatpickr-day.startRange.endRange,
#MobileFlatpickrPlaceholder .flatpickr-day.endRange.endRange {
    color: white !important;
    z-index: 2 !important;
}

/* #MobileFlatpickrPlaceholder .flatpickr-day.selected.startRange::before,
#MobileFlatpickrPlaceholder .flatpickr-day.startRange.startRange::before,
#MobileFlatpickrPlaceholder .flatpickr-day.endRange.startRange::before,
#MobileFlatpickrPlaceholder .flatpickr-day.selected.endRange::before,
#MobileFlatpickrPlaceholder .flatpickr-day.startRange.endRange::before,
#MobileFlatpickrPlaceholder .flatpickr-day.endRange.endRange::before {
    background-color: transparent !important;
} */
#MobileFlatpickrPlaceholder .flatpickr-day.selected.startRange::after,
#MobileFlatpickrPlaceholder .flatpickr-day.startRange.startRange::after,
#MobileFlatpickrPlaceholder .flatpickr-day.endRange.startRange::after {
    content: '' !important;
    position: absolute !important;
    z-index: -2 !important;
    top: 0px !important;
    right: 0 !important;
    width: 16px !important;
    height: 28px !important;
    border-radius: 0 15px 15px 0 !important;
    background: rgba(0, 0, 0, 5) !important;
}

#MobileFlatpickrPlaceholder .flatpickr-day.selected.endRange::after,
#MobileFlatpickrPlaceholder .flatpickr-day.startRange.endRange::after,
#MobileFlatpickrPlaceholder .flatpickr-day.endRange.endRange::after {
    content: '' !important;
    position: absolute !important;
    z-index: -2 !important;
    top: 0px !important;
    left: 0 !important;
    width: 16px !important;
    height: 28px !important;
    border-radius: 15px 0 0 15px !important;
    background: rgba(0, 0, 0, 5) !important;
}

/* #MobileFlatpickrPlaceholder .flatpickr-day.inRange {
    position: relative !important;
    z-index: 1 !important;
}
#MobileFlatpickrPlaceholder .flatpickr-day.inRange::before {
    content: '' !important;
    position: absolute !important;
    z-index: -2 !important;
    top: -1px !important;
    left: -16px !important;
    width: 60px !important;
    height: 27px !important;
    background: rgba(230, 230, 230, 5)!important;
} */

.gfw-mobile-daterange-container {
    margin-top: -10px !important;
}

.gfw-clear-dates-btn {
    display: inline-block !important;
    z-index: 2 !important;
    cursor: pointer;
}

.gfw-clear-dates-btn:hover {
    background: none !important;
}

.gfw-mobile-daterange-container .gfw-calendars-container>#ClearDatesBtnMobile.gfw-clear-dates-btn {
    position: relative !important;
    top: -5px !important;
    right: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    text-decoration: underline !important;
    font-size: 14px !important;
}

#FlexBannerMobile {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative !important;
    margin: 0 !important;
    padding: 0 12px;
    font-size: 13px;
    overflow: hidden;
}

#FlexBannerMobile.gfw-flex-banner.active {
    padding: 12px;
}

#FlexBannerMobile .gfw-flex-banner-text div {
    padding: 1px 7px;
    margin-top: 0 !important;
}

#FlexBannerMobile .gfw-flex-banner-text strong {
    display: inline-block !important;
    padding-right: 20px !important;
    line-height: 1em !important;
}

#FlexBannerMobile .gfw-flex-banner-text span {
    display: inline-block !important;
    padding-right: 45px !important;
    line-height: 1em !important;
   transform: translateY(-3px) !important;
}

#FlexBannerMobile .gfw-calendars-container {
    gap: 0 !important;
}

.gfw-mobile-selection-tip {
    display: block;
    position: absolute;
    top: -24px;
    right: 0;
    width: 300px;
    min-height: 20px;
    opacity: 0;
    text-align: right;
    font-size: 13px !important;
    color: #929292 !important;
    transition: all 300ms linear;
}

.gfw-mobile-selection-tip.active {
    opacity: 1;
}

@media only screen and (orientation: landscape) {
	#barra-fecha-box.active {
        padding-top: 20px!important;
    }

    #barra-fecha-box.active #FlatpickrPlaceholder::before {
        content: '';
        display: block;
        position: absolute;
        top: 57px;
        left: 37px;
        width: calc(100% - 70px);
        height: 1px;
        background-color: rgb(222, 226, 230);
        pointer-events: none;
        /* border-top: solid 1px rgb(222, 226, 230); */
    }
    .gfw-listing-page #barra-fecha-box.active #FlatpickrPlaceholder::before {
        content: '';
        top: -3px;
        left: 5px;
        width: calc(100% - 10px);
    }
}


/* LISTADOS */
.gfw-listing-page #FlatpickrPlaceholder {
    margin-bottom: 0!important; /* 45px !important; */
}

.gfw-listing-page #FlatpickrPlaceholder,
.gfw-listing-page #FlatpickrPlaceholder .flatpickr-calendar {
    position: relative !important;
}

.gfw-listing-page #FlatpickrPlaceholder .flatpickr-calendar {
    margin: 0 auto !important;
}

@media only screen and (orientation: landscape) {
	.gfw-listing-page #barra-fecha-box.active {
        padding-top: 15px !important;
        height: 360px;
    }
    .gfw-listing-page #FlatpickrPlaceholder.active {
        position: relative !important;
        margin-top: 40px;
    }
}


/* PAGINAS DE FICHAS*/
html body.gfw-detail-page #barra-fecha-box.modal-box-banner.barra-fecha-box #daterange {
    opacity: 0 !important; /*Poner en 0 al terminar el debug  */
}
html body.gfw-detail-page .gfw-mobile-daterange-container {
    margin-top: 30px !important;
}

html body.gfw-detail-page #FlatpickrPlaceholder,
html body.gfw-detail-page #FlatpickrPlaceholder .flatpickr-calendar {
    display: block !important;
    z-index: 10000 !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 510px;
    min-height: 250px;
}

html body.gfw-detail-page .flatpickr-day.inRange {
        cursor: pointer!important;
        outline: 0!important;
        background: #e6e6e6!important;
        border-color: #e6e6e6!important;
        color: #000000 !important;
    }
    html body.gfw-detail-page .flatpickr-day.startRange,
    html body.gfw-detail-page .flatpickr-day.endRange {
        color: white!important;
    }


/* FICHA DETALLE: centrar calendario dentro del overlay */
html body.gfw-detail-page #FlatpickrPlaceholder,
html body.gfw-detail-page #FlatpickrPlaceholder .flatpickr-calendar {
    position: relative !important;
}

html body.gfw-detail-page #FlatpickrPlaceholder .flatpickr-calendar {
    margin: 20px auto 0 auto !important;
    /* Forzar ancho razonable en ficha, evitando el width inline de 2px que pone flatpickr */
    width: var(--calendar-width) !important;
    min-width: var(--calendar-width) !important;
    max-width: var(--calendar-width) !important;
    min-height: 210px !important;
    max-height: 210px !important;
}

html body.gfw-detail-page .barra-fecha-box {
    overflow: visible !important;
}

/* Asegurar que el grid de días tenga altura suficiente en la ficha */
/* html body.gfw-detail-page .flatpickr-days {
    display: block !important;
} */
html body.gfw-detail-page .flatpickr-days .dayContainer {
    display: inline-block !important;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
    .flatpickr-current-month .flatpickr-monthDropdown-months {
        margin: -1px 0 0 -5px!important;
        padding: 0 0 0 0 !important;
    }
    html body.gfw-detail-page .flatpickr-rContainer,
    html body.gfw-detail-page .flatpickr-days {
        height: 210px !important;
        min-height: 210px !important;
        max-height: 210px !important;
    }
	/* html body.gfw-detail-page .flatpickr-days .dayContainer {
        margin-left: -250px !important;
    }
    html body.gfw-detail-page  #ClearDatesBtnMobile {
        background-color: red!important;
    } */
    html body.gfw-detail-page .barra-fecha-box {
        padding: 5px 30px 24px 30px;
    }
    html body.gfw-detail-page  .gfw-min-stay-container {
        pointer-events: none !important;
        margin-top: -1.3em!important;
        transform: translateY(-3px) !important;
    }
    html body.gfw-detail-page  .gfw-min-stay-container strong {
        font-size: 14px !important;
        font-weight: 400 !important;
     }
}
@media only screen and (min-width: 768px) and (orientation: landscape) {
    html body.gfw-detail-page #FlatpickrPlaceholder,
    html body.gfw-detail-page #FlatpickrPlaceholder .flatpickr-calendar {
        min-width: 508px;
        min-height: 240px;
    }
    html body.gfw-detail-page .barra-fecha-box {
        padding: 0!important;
        width: 508px!important;
    }
    html body.gfw-detail-page div.hs-date-box-overlay.modal-box-banner {
        margin-left: -50px!important;
    }
    html body.gfw-detail-page .flatpickr-rContainer,
    html body.gfw-detail-page .flatpickr-days {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
	html body.gfw-detail-page .flatpickr-days .dayContainer:nth-of-type(1) {
        margin-left: 0 !important;
    }
	/* html body.gfw-detail-page .flatpickr-days .dayContainer:nth-of-type(2) {
        margin-left: 50px !important;
    } */

    html body.gfw-detail-page .gfw-flex-banner {
        position: relative!important;
        border-radius: 0 0 8px 8px!important;
    }

    html body.gfw-detail-page div#minimum-stay {
        position: absolute;
        top: 18px;
        left: 35px;
        pointer-events: none;
        font-size: 14px !important;
    }
    html body.gfw-detail-page div#minimum-stay strong {
        font-size: 14px !important;
        font-weight: normal!important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1365px) and (orientation: landscape) {
    html body.gfw-detail-page #barra-fecha-box {
        margin-left: 50%!important;
        transform: translate(-50%, 20%)!important;
    }
    html body.gfw-detail-page #FlatpickrPlaceholder,
    html body.gfw-detail-page #FlatpickrPlaceholder .flatpickr-calendar {
        min-width: 508px;
        min-height: 240px;
    }
}

@media only screen and (min-width: 1366px) and (orientation: landscape) {
    html body.gfw-detail-page #FlatpickrPlaceholder,
    html body.gfw-detail-page #FlatpickrPlaceholder .flatpickr-calendar {
        min-height: 250px;
    }
}

/* Asegurar contraste de los días en la ficha */
html body.gfw-detail-page .flatpickr-day {
    background: #ffffff !important;
    color: #000000 !important;
}

html body.gfw-listing-page #barra-fecha-box #daterange {
    opacity: 0 !important;
    pointer-events: none !important;
}

html body.gfw-listing-page .barra-fecha-box {
    padding: 24px 30px 35px 30px;
}
html body.gfw-listing-page .barra-fecha-box.active {
    padding: 24px 30px 55px 30px;
}

html body.gfw-listing-page .gfw-flex-banner {
    position: absolute !important;
    margin-bottom: 0 !important;
}

html body.gfw-listing-page .barra-fecha-box {
    width: 510px !important;
}


/* PANTALLAS PEQUEÑAS y ALGUNOS TABLET: */
@media only screen and (min-width: 768px) and (max-width: 1365px) and (orientation: landscape) {
    html body.gfw-detail-page #barra-fecha-box {
        margin-left: 50% !important; /* 45% */
        transform: translate(-50%, 10%) !important;
        min-height: 300px !important;
    }
    html body.gfw-detail-page #barra-fecha-box.active {
        min-height: 370px !important;
    }
    html body.gfw-detail-page .barra-fecha-box.active #FlatpickrPlaceholder .flatpickr-calendar {
        margin-bottom: 15px !important;
    }
    /* .gfw-flex-banner {
        bottom: -13px!important;
    } */
}


/* BUG CLICK YEAR SELECTOR EN DESKTOP */
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .numInputWrapper .arrowDown,
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .numInputWrapper .arrowUp {
    opacity: 0!important;
    pointer-events: none!important;
    cursor: default!important;
}
/* // BUG CLICK YEAR SELECTOR EN DESKTOP */

/* UNIFICACIÓN DE ESTILOS SELECTORES DE MESES CROSSBROWSER */
@media only screen and (orientation: portrait) {
    #MobileFlatpickrPlaceholder .flatpickr-month:nth-of-type(1) .flatpickr-current-month {
        position: relative!important;
    }
    #MobileFlatpickrPlaceholder .flatpickr-month .flatpickr-current-month::after {
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        left: 78px;
        width: 40px;
        height: 24px;
        z-index: 1000;

        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width=%22100%%22 height=%22100%%22 viewBox=%220 0 14 8%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg transform=%22matrix(-1,0,0,-1,19,10)%22%3E%3Cpath d=%22M18.79,8.387C19.095,8.779 19.068,9.347 18.707,9.707C18.317,10.098 17.683,10.098 17.293,9.707L12,4.414L6.707,9.707L6.613,9.79C6.221,10.095 5.653,10.068 5.293,9.707C4.902,9.317 4.902,8.683 5.293,8.293L11.293,2.293L11.387,2.21C11.779,1.905 12.347,1.932 12.707,2.293L18.707,8.293L18.79,8.387Z%22 fill=%22%23212121%22/%3E%3C/g%3E%3C/svg%3E') !important;
        background-size: 9px auto !important;
        background-repeat: no-repeat !important;
        background-position: calc(100% - 15px) center !important;
        background-color: white!important;
        pointer-events: none!important;
    }

    #MobileFlatpickrPlaceholder .flatpickr-month .flatpickr-current-month select.flatpickr-monthDropdown-months {
        font-size: 13px!important;
        transform: translateY(2px)!important;
        width: calc(100% - 70px)!important;
    }

    .flatpickr-prev-month.flatpickr-disabled,
    .flatpickr-next-month.flatpickr-disabled {
        display: block!important;
        opacity: 0.2!important;
    }
}

/* // UNIFICACIÓN DE ESTILOS SELECTORES DE MESES CROSSBROWSER */