/* =============================================================
   HT-DAY-STRIP  —  Horizontal scrollable day picker
   Reusable component: customer page, agenda, booking, etc.

   Status dot variants:
     .ht-day-strip__dot--available  → green  (hay disponibilidad)
     .ht-day-strip__dot--full       → red    (completo / sin plazas)
     .ht-day-strip__dot--empty      → hidden (sin eventos, día deshabilitado)

   Optional price label:
     <span class="ht-day-strip__price">€50</span>
   ============================================================= */

/* ── Wrapper ────────────────────────────────────────────────── */
.ht-day-strip-wrap {
    position: relative;
}

/* ── Strip body (animated: slides away when full calendar opens) */
.ht-day-strip__body {
    position: relative;          /* scope for the "Hoy" absolute button */
    max-height: 160px;           /* enough for any strip height */
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.22s ease, opacity 0.18s ease;
}
.ht-day-strip-wrap--cal-open .ht-day-strip__body {
    max-height: 0;
    opacity: 0;
}

/* ── Month header ───────────────────────────────────────────── */
.ht-day-strip__header {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 28px;
    padding: 6px 16px 4px;
    background: var(--color-bg-card);
}

/* ── Mode toggle (Día | Rango) ──────────────────────────────── */
.ht-mode-toggle {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 2px;
    margin-left: auto;
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
}

.ht-mode-toggle__btn {
    padding: 4px 10px;
    font-family: var(--font-family-heading);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    transition: background 0.18s ease, color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.ht-mode-toggle__btn.is-active {
    color: var(--color-text-inverse);
    background: var(--color-primary, #1D174D);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.ht-mode-toggle__btn:focus-visible {
    outline: 2px solid var(--color-primary, #1D174D);
    outline-offset: 1px;
}

.ht-day-strip__month-label {
    font-family: var(--font-family-heading);
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-primary, #1D174D);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

/* ── Scrollable track ───────────────────────────────────────── */
.ht-day-strip {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 5px 16px 10px 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-light);
    -webkit-overflow-scrolling: touch;
}

.ht-day-strip::-webkit-scrollbar {
    display: none;
}

/* ── Day button ─────────────────────────────────────────────── */
.ht-day-strip__item {
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    width: 48px;
    min-width: 44px;
    padding: 6px 0;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    /* height adjusts automatically to fit optional price row */
}

/* Disabled state (status = 'empty') */
.ht-day-strip__item:disabled,
.ht-day-strip__item.is-disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.38;
}

/* Blocked state (status = 'blocked'): visually muted but clickable — alternatives may exist */
.ht-day-strip__item.is-blocked {
    opacity: 0.5;
}
.ht-day-strip__item.is-blocked:hover {
    background: rgba(148, 163, 184, 0.1);
    opacity: 0.72;
}
.ht-day-strip__item.is-blocked .ht-day-strip__num {
    color: var(--color-text-muted);
}

/* ── Day name (Mon, Hoy…) ───────────────────────────────────── */
.ht-day-strip__name {
    margin-bottom: 1px;
    font-family: var(--font-family-heading);
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Day number ─────────────────────────────────────────────── */
.ht-day-strip__num {
    font-family: var(--font-family-heading);
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    color: var(--color-text-heading);
}

/* ── Status dot ─────────────────────────────────────────────── */
.ht-day-strip__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 3px;
    border-radius: 50%;
    transition: var(--transition-fast);
}

/* Default (legacy): primary color dot  */
.ht-day-strip__dot:not([class*="dot--"]) {
    background: var(--color-primary, #1D174D);
}

/* Available → green */
.ht-day-strip__dot--available {
    background: var(--color-success);
}

/* Full → red */
.ht-day-strip__dot--full {
    background: var(--color-danger);
}

/* Blocked → grey (closed but alternatives may exist) */
.ht-day-strip__dot--blocked {
    background: var(--color-text-muted);
    opacity: 0.6;
}

/* Empty → hidden */
.ht-day-strip__dot--empty {
    background: transparent;
    opacity: 0;
}

/* ── Optional price label ───────────────────────────────────── */
.ht-day-strip__price {
    margin-top: 2px;
    font-family: var(--font-family-heading);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-text-subtle);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ── Today modifier ─────────────────────────────────────────── */
.ht-day-strip__item.today:not(.active):not(.is-range-start):not(.is-range-end) .ht-day-strip__name,
.ht-day-strip__item.today:not(.active):not(.is-range-start):not(.is-range-end) .ht-day-strip__num {
    color: var(--color-primary, #1D174D);
}

/* ── Active (selected) state ────────────────────────────────── */
.ht-day-strip__item.active {
    background: var(--color-primary, #1D174D);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 29, 23, 77), 0.22);
    transform: translateY(-2px);
}

.ht-day-strip__item.active .ht-day-strip__name,
.ht-day-strip__item.active .ht-day-strip__num,
.ht-day-strip__item.active .ht-day-strip__price {
    color: var(--color-text-inverse);
}

.ht-day-strip__item.active .ht-day-strip__dot {
    background: rgba(255, 255, 255, 0.85) !important;
}

/* ── Full day: number tint (when not active) ────────────────── */
.ht-day-strip__item.is-full:not(.active) .ht-day-strip__num {
    color: var(--color-danger);
}

/* ── "Go to today" floating shortcut ───────────────────────── */
/* Positioned within .ht-day-strip__body so it never overlaps the full calendar */
.ht-today-shortcut {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 3px 18px 3px 8px;
    font-family: var(--font-family-heading);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary, #1D174D);
    white-space: nowrap;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 15px 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateY(-50%);
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.ht-today-shortcut i {
    font-size: 16px;
}

.ht-today-shortcut:hover {
    background: var(--color-bg-card);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.ht-today-shortcut.d-none {
    display: none !important;
}

/* ── Range selection mode ───────────────────────────────────── */

.ht-day-strip__item.is-range-start {
    background: var(--color-primary, #1D174D);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 29, 23, 77), 0.22);
    transform: translateY(-2px);
}

.ht-day-strip__item.is-range-end {
    background: var(--color-primary, #1D174D);
    border-radius: 0 16px 16px 0;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 29, 23, 77), 0.22);
    transform: translateY(-2px);
}

/* Single-day range: restore full border-radius */
.ht-day-strip__item.is-range-start.is-range-end {
    border-radius: var(--radius-md);
}

/* Days between start and end */
.ht-day-strip__item.is-range-mid {
    background: rgba(var(--color-primary-rgb, 29, 23, 77), 0.10);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

/* Text on start/end endpoints */
.ht-day-strip__item.is-range-start .ht-day-strip__name,
.ht-day-strip__item.is-range-start .ht-day-strip__num,
.ht-day-strip__item.is-range-start .ht-day-strip__price,
.ht-day-strip__item.is-range-end .ht-day-strip__name,
.ht-day-strip__item.is-range-end .ht-day-strip__num,
.ht-day-strip__item.is-range-end .ht-day-strip__price {
    color: var(--color-text-inverse);
}

.ht-day-strip__item.is-range-start .ht-day-strip__dot,
.ht-day-strip__item.is-range-end .ht-day-strip__dot {
    background: rgba(255, 255, 255, 0.85) !important;
}

/* Text on mid days: primary color tint */
.ht-day-strip__item.is-range-mid .ht-day-strip__name,
.ht-day-strip__item.is-range-mid .ht-day-strip__num {
    color: var(--color-primary, #1D174D);
}

/* Hover preview while selecting end date (desktop only) */
.ht-day-strip__item.is-range-preview {
    background: rgba(var(--color-primary-rgb, 29, 23, 77), 0.05);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

/* ── Expand calendar toggle ─────────────────────────────────── */
.ht-cal-expand-toggle {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 16px 8px;
    font-family: var(--font-family-heading);
    font-size: 0.62rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary, #1D174D);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    background: var(--color-bg-card);
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0.55;
    transition: opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ht-cal-expand-toggle:hover { opacity: 1; }
.ht-cal-expand-toggle .ht-cal-expand-toggle__icon {
    font-size: 16px;
    transition: transform 0.22s ease;
}
.ht-cal-expand-toggle[aria-expanded="true"] .ht-cal-expand-toggle__icon {
    transform: rotate(180deg);
}

/* ── Inline full-month calendar ─────────────────────────────── */
/* Hidden by default via max-height; slides in when .is-open is added */
.ht-cal-expand {
    max-height: 0;
    overflow: hidden;
    background: var(--color-bg-card);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    /* delay slightly so strip finishes collapsing first */
    transition: max-height 0.28s ease 0.15s;
}
.ht-cal-expand.is-open {
    max-height: 600px; /* tall enough for any month grid */
    transition: max-height 0.3s ease 0.15s;
}
.ht-cal { padding: 12px 16px 16px; }

/* Nav row */
.ht-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ht-cal__title {
    font-family: var(--font-family-heading);
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary, #1D174D);
    text-transform: capitalize;
}
.ht-cal__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    color: var(--color-primary, #1D174D);
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 50%;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ht-cal__nav-btn:hover { background: rgba(0, 0, 0, 0.06); }
.ht-cal__nav-btn i { font-size: 20px; }

/* Weekday header labels */
.ht-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
}
.ht-cal__weekdays span {
    padding: 4px 0;
    font-family: var(--font-family-heading);
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Day grid */
.ht-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px 0;
}
.ht-cal__day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 50%;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ht-cal__day:hover:not([disabled]):not(.is-range-start):not(.is-range-end) {
    background: rgba(0, 0, 0, 0.05);
}
.ht-cal__day-num {
    font-family: var(--font-family-heading);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    color: var(--color-text-body);
}
.ht-cal__dot {
    flex-shrink: 0;
    width: 4px; height: 4px;
    border-radius: 50%;
}
.ht-cal__dot--available { background: var(--color-success); }
.ht-cal__dot--full      { background: var(--color-danger); }
.ht-cal__dot--empty     { display: none; }

/* Other-month days */
.ht-cal__day.is-other-month { cursor: default; }
.ht-cal__day.is-other-month .ht-cal__day-num { color: #D1D5DB; }

/* Disabled */
.ht-cal__day.is-disabled { cursor: default; }
.ht-cal__day.is-disabled:not(.is-other-month) .ht-cal__day-num { color: #D1D5DB; }

/* Today indicator — subtle underline on the number only */
.ht-cal__day.is-today:not(.is-range-start):not(.is-range-end) .ht-cal__day-num {
    font-weight: 800;
    color: var(--color-primary, #1D174D);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-primary, #1D174D);
    text-underline-offset: 2px;
}

/* Full day tint */
.ht-cal__day.is-full:not(.is-range-start):not(.is-range-end) .ht-cal__day-num {
    color: var(--color-danger);
}

/* Range endpoints — pill shape */
.ht-cal__day.is-range-start:not(.is-range-end) {
    background: var(--color-primary, #1D174D);
    border-radius: 50% 0 0 50%;
}
.ht-cal__day.is-range-end:not(.is-range-start) {
    background: var(--color-primary, #1D174D);
    border-radius: 0 50% 50% 0;
}
.ht-cal__day.is-range-start.is-range-end {
    background: var(--color-primary, #1D174D);
    border-radius: 50%;
}
.ht-cal__day.is-range-start .ht-cal__day-num,
.ht-cal__day.is-range-end   .ht-cal__day-num { color: #fff; }
.ht-cal__day.is-range-start .ht-cal__dot,
.ht-cal__day.is-range-end   .ht-cal__dot { background: rgba(255, 255, 255, 0.85); }

/* Range mid */
.ht-cal__day.is-range-mid {
    background: rgba(var(--color-primary-rgb, 29, 23, 77), 0.10);
    border-radius: 0;
}
.ht-cal__day.is-range-mid .ht-cal__day-num { color: var(--color-primary, #1D174D); }

/* Hover preview */
.ht-cal__day.is-range-preview {
    background: rgba(var(--color-primary-rgb, 29, 23, 77), 0.05);
    border-radius: 0;
}

/* ==========================================================================
   DESKTOP: SELECTOR DE FECHAS (Calendario / Day Strip)
   ========================================================================== */
/* ==========================================================================
   DESKTOP: ESTADO DE LA RESERVA (Tarjeta "Ya tienes reserva")
   ========================================================================== */

@media (min-width: 992px) {
    
    /* 1. EL CONTENEDOR CENTRAL DE ESTADO */
    /* Este es el div que envuelve "Ya tienes reserva" y "Cancelar" */
    #booking_status_area,
    .booking-status-container { 
        max-width: 650px !important; /* Más estrecho que el calendario para no competir */
        padding: 48px 40px !important;
        margin: 0 auto 64px auto !important; /* Centrado matemáticamente bajo el calendario */
        text-align: center !important;
        background: var(--color-bg-card) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08) !important; /* Sombra de flotación suave */
    }

    /* Ocultamos el fondo gris claro genérico si estaba estirado */
    .bg-light {
        background-color: transparent !important;
    }

    /* 2. LA TARJETA DE "CANCELAR RESERVA" */
    /* Hacemos que parezca un botón/tarjeta de acción crítica pero elegante */
    .ht-booking-cancel-card,
    .cancel-booking-btn-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Centramos el contenido rojo */
        padding: 16px 24px !important;
        margin-top: 32px !important;
        cursor: pointer !important;
        background: var(--color-danger-soft) !important;
        border: 1px solid var(--color-danger-shadow) !important;
        border-radius: var(--radius-md) !important;
        transition: var(--transition-fast) !important;
    }

    .ht-booking-cancel-card:hover {
        background: var(--color-danger-soft) !important;
        box-shadow: 0 8px 16px rgba(225, 29, 72, 0.1) !important;
        transform: translateY(-2px) !important;
    }
    .ht-cal-expand.is-open {
    max-width: 400px;
    margin: auto;
}
}