/* ──────────────────────────────────────────────────────────────────
   Booking público — todos los colores se derivan del surface system
   inyectado por BrandingService::cssVariables() en el layout.
   No hardcodear blancos/grises: usa var(--surface-*) y var(--text-*).
   ────────────────────────────────────────────────────────────────── */

/* ── Booking wizard: stepper sticky + compact mode ───────────────── */

.bk-stepper {
    transition: padding 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Modo compacto: oculto por defecto */
.bk-stepper .bk-stepper-compact {
    display: none;
}

/* Al activarse .is-compact ocultamos el expandido y mostramos la barra */
.bk-stepper.is-compact .bk-stepper-expanded {
    display: none;
}
.bk-stepper.is-compact .bk-stepper-compact {
    display: block;
}
.bk-stepper.is-compact {
    /* Fondo semitransparente con blur para sentirse premium */
    background-color: color-mix(in srgb, var(--surface-card) 82%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.18);
}

/* En desktop mantenemos siempre el modo expandido */
@media (min-width: 768px) {
    .bk-stepper.is-compact .bk-stepper-expanded {
        display: block;
    }
    .bk-stepper.is-compact .bk-stepper-compact {
        display: none;
    }
}

/* ── Booking wizard: stepper ──────────────────────────────────────── */

.bk-step[data-state="active"] .bk-step-num {
    background-color: var(--tenant-primary, #6366f1);
    color: var(--tenant-on-primary, #fff);
}
.bk-step[data-state="active"] .bk-step-txt {
    color: var(--tenant-primary-text, var(--tenant-primary, #6366f1));
    font-weight: 600;
}

.bk-step[data-state="done"] .bk-step-num {
    background-color: var(--tenant-primary, #6366f1);
    color: var(--tenant-on-primary, #fff);
}
.bk-step[data-state="done"] .bk-step-txt {
    color: var(--tenant-primary-text, var(--tenant-primary, #6366f1));
}

.bk-step-conn--done {
    background-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
    opacity: 1 !important;
}

/* ── Booking wizard: card selected state ─────────────────────────── */

[data-service-card].bk-selected .bk-card,
[data-staff-card].bk-selected .bk-card {
    border-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
    background-color: color-mix(in srgb, var(--tenant-primary, #6366f1) 12%, var(--surface-card)) !important;
    box-shadow: 0 0 0 3px var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
}

[data-service-card].bk-selected .bk-check,
[data-staff-card].bk-selected .bk-check {
    display: flex !important;
}

[data-staff-card].opacity-40 {
    cursor: not-allowed;
}

/* ── Booking wizard: time slot buttons ───────────────────────────── */

.bk-slot {
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.bk-slot--selected {
    border-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
    box-shadow: 0 0 0 2px var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
}

/* ── Validation modal: slide-up animation ────────────────────────── */

@keyframes bk-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

#booking-validation-modal .relative {
    animation: bk-modal-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Stepper: smooth done-state transition ───────────────────────── */

.bk-step-num,
.bk-step-txt {
    transition: background-color 0.18s ease, color 0.18s ease;
}

.bk-step-conn {
    transition: background-color 0.25s ease;
}

/* ── Form inputs: softer default border ──────────────────────────── */

#booking-form input,
#booking-form textarea,
#booking-form select {
    border-color: var(--surface-border);
    background-color: var(--surface-card);
    color: var(--text-primary);
}

#booking-form input::placeholder,
#booking-form textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* ── Booking: Calendar header ────────────────────────────────────── */

.bk-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.bk-cal-month {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.bk-cal-range {
    font-family: ui-monospace, 'SFMono-Regular', monospace;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.bk-cal-nav {
    display: flex;
    gap: 6px;
}

.bk-cal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s, opacity 0.12s;
}

.bk-cal-btn:hover:not(:disabled) {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.bk-cal-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Booking: Date Rail ──────────────────────────────────────────── */

.bk-date-rail {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.bk-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border-radius: 14px;
    border: 1.5px solid var(--surface-border);
    background: var(--surface-card);
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
    user-select: none;
    min-height: 64px;
    font: inherit;
}

.bk-date:hover:not(.bk-date--disabled):not(.bk-date--full):not(.bk-date--unavailable):not(.bk-date--selected) {
    border-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1));
    background: color-mix(in srgb, var(--tenant-primary, #6366f1) 6%, var(--surface-card));
}

.bk-date--today {
    border-color: var(--surface-border);
    background: var(--surface-muted);
}

.bk-date--selected {
    border-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
    background: color-mix(in srgb, var(--tenant-primary, #6366f1) 14%, var(--surface-card)) !important;
    box-shadow: 0 0 0 2px var(--tenant-primary-ui, var(--tenant-primary, #6366f1));
}

.bk-date--full {
    border-color: var(--surface-border);
    background: var(--surface-muted);
    opacity: 0.7;
}

.bk-date--unavailable {
    border-color: var(--surface-border);
    background: var(--surface-card);
    opacity: 0.72;
}

.bk-date--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.bk-date-dow {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.bk-date-d {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.bk-date-mo {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.bk-date--today .bk-date-mo {
    color: var(--tenant-primary-text, var(--tenant-primary, #6366f1));
    font-weight: 700;
}

.bk-date--selected .bk-date-dow,
.bk-date--selected .bk-date-d,
.bk-date--selected .bk-date-mo {
    color: var(--tenant-primary-text, var(--tenant-primary, #6366f1));
}

.bk-date--full .bk-date-d {
    color: var(--text-muted);
}

.bk-date--unavailable .bk-date-d,
.bk-date--unavailable .bk-date-mo {
    color: var(--text-muted);
}

@media (max-width: 639px) {
    .bk-date-rail {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(56px, 1fr);
        overflow-x: auto;
        padding: 2px 2px 8px;
        scroll-padding-inline: 2px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .bk-date {
        min-width: 56px;
        min-height: 64px;
        scroll-snap-align: start;
    }
}

/* ── Booking: Slots head ─────────────────────────────────────────── */

.bk-slots-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
    margin-bottom: 2px;
}

.bk-slots-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.bk-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    color: var(--text-muted);
}

.bk-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bk-legend-free,
.bk-legend-booked {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1.5px;
}

.bk-legend-free {
    background: color-mix(in srgb, var(--tenant-primary, #6366f1) 12%, var(--surface-card));
    border-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1));
}

.bk-legend-booked {
    background: var(--surface-muted);
    border-color: var(--surface-border);
}

/* ── Booking: Day-part sections (Mañana / Tarde / Noche) ─────────── */

.bk-day-part {
    margin-top: 14px;
}

.bk-day-part-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ── Booking: Slots grid ─────────────────────────────────────────── */

.bk-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}

@media (min-width: 640px) {
    .bk-slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }
}

.bk-slots-grid .bk-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    border-radius: 12px;
    border: 1.5px solid var(--surface-border);
    background: var(--surface-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0 8px;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s;
}

.bk-slot-time {
    line-height: 1.1;
}

.bk-slot-state {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bk-slots-grid .bk-slot:hover:not(:disabled):not(.bk-slot--selected) {
    border-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1));
    background: color-mix(in srgb, var(--tenant-primary, #6366f1) 8%, var(--surface-card));
}

.bk-slots-grid .bk-slot.bk-slot--selected {
    border-color: var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
    background: color-mix(in srgb, var(--tenant-primary, #6366f1) 16%, var(--surface-card)) !important;
    box-shadow: 0 0 0 2px var(--tenant-primary-ui, var(--tenant-primary, #6366f1)) !important;
    color: var(--tenant-primary-text, var(--tenant-primary, #6366f1));
}

.bk-slots-grid .bk-slot:disabled {
    background: var(--surface-muted);
    border-color: var(--surface-border);
    color: var(--text-muted);
    opacity: 0.72;
    cursor: not-allowed;
}

.bk-slots-grid .bk-slot--booked {
    position: relative;
    overflow: hidden;
}

.bk-slots-grid .bk-slot--booked::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    border-top: 1.5px solid currentColor;
    transform: rotate(-8deg);
    opacity: 0.62;
}
/* Indicador de foco consistente y visible para toda la experiencia pública. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tenant-primary-ui, var(--tenant-primary));
  outline-offset: 2px;
}

/* Las barras de progreso son información de estado, no decoración. */
#bk-compact-progress {
    background-color: var(--tenant-primary-ui, var(--tenant-primary)) !important;
}