/* ===== BOOKING SYSTEM CSS - BOOTSTRAP COMPATIBLE ===== */

/* Estilos para el modal de ubicación en mobile */
.contact-info-mobile {
    padding: 0;
}

.contact-item-mobile {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.contact-icon-mobile {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
}

.schedule-list {
    background-color: white;
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid #e9ecef;
}

.schedule-item-mobile {
    padding: 0.25rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.schedule-item-mobile:last-child {
    border-bottom: none;
}

/* Botón de ubicación para mobile */
.btn-outline-primary {
    border-width: 2px;
    font-weight: 600;
}

.btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

/* Ajustes del modal */
#locationModal .modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#locationModal .modal-header {
    background: var(--primary-color);
    color: white;
    border-radius: 15px 15px 0 0;
}

#locationModal .modal-header .btn-close {
    filter: invert(1);
}

/* Estilo para el botón de horario con tooltip */
.schedule-tooltip-btn {
    color: #495057 !important;
    font-size: 0.9rem;
}

.schedule-tooltip-btn:hover {
    color: #007bff !important;
}

.schedule-tooltip-btn i {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Personalización del tooltip */
.tooltip {
    font-size: 0.85rem;
}

.tooltip-inner {
    max-width: 250px;
    text-align: left;
    background-color: #343a40;
    border-radius: 6px;
    padding: 8px 12px;
}

/* Header */
.header-container {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;

    /* background: rgb(255, 255, 255);
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 4px 0px; */
}

/* Ocultar el header global de TurnoBoost cuando el wizard de reserva está activo
   (en otros pasos no se notaba porque el wizard-header crece y lo tapa, pero en
   el paso de selección de profesional el wizard-header es más bajo y lo deja asomar). */
body:has(.booking-wizard) .header-container {
    display: none !important;
}
.container-fluid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: calc(var(--wizard-header-h, 64px) + 20px) !important;
    padding-bottom: calc(var(--wizard-nav-h, 140px) + 60px) !important;
}
.wizard-header {
    background-color: #fff;
    z-index: 11;
    box-shadow: rgba(57, 65, 73, 0.08) 0px 6px 8px 0px;
}
.wizard-navigation {
    box-shadow: rgba(57, 65, 73, 0.08) 0px 0px 9px;
}
#prev-step {
    padding: 0;
}
#confirm-booking {
    padding: 10px;
}

/* Variables CSS */
:root {
    /* --primary-color: #0d6efd;
    --primary-dark: #0b5ed7; */
    --success-color: #198754;
    --info-color: #0dcaf0;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --border-radius: 0.5rem;
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --transition: all 0.15s ease-in-out;
    --grey-color: #eee;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}


body {
    background-color: #eee;
}
/* Estilos específicos para el booking */
/* Las reglas de `.location-card` vivían acá: eran de la card vieja de sucursal, que se reemplazó por
   `.booking-location-card` (al final de este archivo). El nombre viejo NO se reusó a propósito: lo
   usa también la lista del admin (assets/styles/location.css) y compartir el selector entre la
   pantalla pública y el panel es pedir que un cambio de una rompa la otra. */

.selection-item {
    transition: var(--transition);
}

.selection-item.completed {
    background-color: rgba(25, 135, 84, 0.1);
    border-left: 3px solid var(--success-color);
    padding-left: 0.75rem;
}

/* Tarjetas de servicios */
.service-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    height: auto;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

.service-card.selected {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 6%, #fff);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.service-card h6 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Descripción de servicios con truncado */
.service-description-container {
    position: relative;
}

.service-description {
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.service-description.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-description.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Preservar saltos de línea en descripciones de servicios */
.service-description.preserve-lines {
    white-space: pre-line;
}

/* Ajustar el truncado para que funcione con saltos de línea */
.service-description.preserve-lines.truncated {
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-description.preserve-lines.expanded {
    white-space: pre-line;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    text-overflow: unset;
}

.expand-btn, .collapse-btn {
    font-size: 0.75rem;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    margin-top: 0.25rem;
}

.expand-btn:hover, .collapse-btn:hover {
    text-decoration: underline;
}

.service-card p {
    color: #6c757d;
    font-size: 0.875rem;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.service-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.duration-badge {
    background-color: var(--info-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.price-badge {
    background-color: var(--success-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Badges del servicio: unificar con el color de marca (la duración en gris
   neutro, el precio en var(--primary-color)) en vez del celeste/verde de
   Bootstrap que peleaba con la identidad del cliente. */
.service-badges .badge.bg-info {
    background-color: #eef1f5 !important;
    color: #5b6373 !important;
    font-weight: 500;
}

.service-badges .badge.bg-success {
    background-color: color-mix(in srgb, var(--primary-color) 12%, #fff) !important;
    color: var(--primary-color) !important;
}

.service-select-actions {
    width: 100%;
}

.service-selected-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

.service-remove-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
}

.service-qty-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 700;
}

.service-qty {
    flex: 1;
    text-align: center;
    font-weight: 700;
    color: var(--dark-color);
}

.booking-cta-pulse {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    animation: bookingCtaPulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.booking-cta-pulse > * {
    position: relative;
    z-index: 1;
}

.booking-cta-pulse::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 40%, rgba(255, 255, 255, 0) 70%);
    animation: bookingCtaRipple 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.booking-cta-pulse:hover {
    filter: brightness(0.98);
}

@keyframes bookingCtaRipple {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    10% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.35); }
    45% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
    50% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

@keyframes bookingCtaPulse {
    0% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
    36% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
    41% { transform: translateY(-1px) scale(1.03); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); }
    46% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
    50% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
}

.booking-multi-service-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(calc(100% - 2rem), 780px);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
    z-index: 1050;
}

.booking-multi-service-inner {
    padding: 1.5rem;
}

.booking-multi-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.booking-multi-service-left {
    min-width: 0;
}

.booking-multi-service-count {
    font-weight: 700;
    color: #212529;
    line-height: 1.15;
    font-size: 16px;
}

.booking-multi-service-total {
    margin-top: 2px;
    font-weight: 800;
    font-size: 14px;
    color: #212529;
    line-height: 1.15;
}

.booking-multi-service-meta {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.2;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-multi-service-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.booking-multi-service-clear {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #6c757d;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.booking-multi-service-clear:hover {
    background: rgba(0, 0, 0, 0.03);
    color: #495057;
}

.booking-multi-service-cta {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
    border-radius: 14px;
    height: 40px;
    padding: 0 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.booking-multi-service-cta:hover {
    filter: brightness(0.98);
    color: #fff;
}

@media (max-width: 576px) {
    .booking-multi-service-bar {
        width: calc(100% - 1rem);
        bottom: 12px;
    }

    .booking-multi-service-inner {
        padding: 0.7rem 0.8rem;
    }

    .booking-multi-service-total {
        font-size: 1rem;
    }

    .booking-multi-service-clear {
        width: 38px;
        height: 38px;
    }

    .booking-multi-service-cta {
        height: 38px;
    }
}

/* Tarjetas de profesionales */
.professional-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    height: 100%;
}

.professional-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

.professional-card.selected {
    border-color: var(--primary-color);
    background-color: rgba(13, 110, 253, 0.05);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.professional-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 auto 1rem;
}

.professional-card h6 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0;
}

/* Selector de fechas horizontal con navegación */
.date-selector {
    margin-bottom: 2rem;
}

.days-horizontal-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-nav-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    background: white;
    color: #6c757d;
    transition: var(--transition);
    z-index: 2;
}

.date-nav-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(13, 110, 253, 0.05);
}

.date-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.days-horizontal-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.days-horizontal {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
}

.days-horizontal::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.day-item {
    min-width: 80px;
    padding: 0.75rem;
    text-align: center;
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    background: white;
    flex-shrink: 0;
    position: relative;
}

.day-item:hover {
    border-color: var(--primary-color);
    background-color: rgba(13, 110, 253, 0.05);
}

.day-item.selected {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: white;
}

.day-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
    color: #6c757d;
}

.day-item.disabled:hover {
    border-color: #e9ecef;
    background-color: #f8f9fa;
}

.day-month {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    opacity: 0.7;
    color: #6c757d;
}

.day-item.selected .day-month {
    color: rgba(255, 255, 255, 0.8);
}

.day-name {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.day-number {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.day-item.selected .day-name,
.day-item.selected .day-number {
    color: white;
}

/* Contador de slots en el día */
.slots-count {
    font-size: 0.7rem;
    opacity: 0.8;
    font-weight: 500;
}

.day-item.selected .slots-count {
    color: rgba(255, 255, 255, 0.8);
}

.day-item.disabled .slots-count {
    opacity: 0.5;
}

/* Indicador para el día actual */
.day-item.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Cuando el día actual está seleccionado, el punto se ve en blanco */
.day-item.today.selected::after {
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Mensaje cuando no hay fechas disponibles */
.no-dates-available {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.no-dates-available i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-dates-available p {
    font-size: 1.1rem;
    margin: 0;
}

.timeslots-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.timeslots-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Loading spinner */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 0.25em solid rgba(13, 110, 253, 0.25);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Animaciones de entrada */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .professional-card {
        padding: 1rem;
    }

    /* Selectores de ubicación/servicio: recuperar ancho útil en mobile.
       El padding se apilaba en 5 capas (col + panel + accordion + card + card-body),
       comiendo ~36% del ancho en pantallas de ~375px. */

    /* Full-bleed: el panel del selector llega al filo de la pantalla en mobile,
       vía clase propia (no se pisa la utility global .col-12). */
    .booking-page-container .booking-selector-col {
        padding-left: 0;
        padding-right: 0;
    }

    .card.shadow-lg > .card-body.p-4 {
        padding: 0.75rem !important;
    }

    /* La .card ya trae 1.5rem propio y el .card-body de Bootstrap suma otro 1rem:
       padding duplicado. Dejamos que solo el card-body padee el contenido. */
    .service-card {
        padding: 0;
    }

    .professional-avatar {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .service-badges {
        justify-content: center;
    }
}

/* Estados de los pasos */
.booking-step {
    transition: var(--transition);
}

.booking-step.d-none {
    display: none !important;
}

/* Mejoras visuales para alertas */
.alert {
    border: none;
    border-radius: var(--border-radius);
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    color: #055160;
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: #0a3622;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #58151c;
}

.btn.btn-primary:first-child:active,
:not(.btn-check)+.btn:active {
    background: var(--primary-dark);
    border-color: #000;
}
/* Estilos para el header */
.card-header.bg-primary {
    background: linear-gradient(26deg, var(--primary-color), var(--grey-color)) !important;
}

/* Botones personalizados */
.btn-success {
    background: linear-gradient(135deg, var(--success-color), #146c43);
    border: none;
    font-weight: 600;
    transition: var(--transition);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-lg);
}

/* Efectos hover para las tarjetas principales */
.card {
    transition: var(--transition);
}

/* Estilos para badges numerados */
.badge.rounded-circle {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Mejoras para formularios */
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-control-lg {
    font-size: 1.125rem;
    padding: 0.75rem 1rem;
}

/* ===== SCHEDULE HOVER CONTAINER STYLES ===== */
/* Estilos para el hover de horarios */
.schedule-hover-container {
    position: relative;
    display: inline-block;
}

.schedule-trigger {
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none; /* No clickeable */
}

.schedule-trigger:hover {
    background-color: #f8f9fa;
    color: #495057;
}

.schedule-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    padding: 12px;
    min-width: 200px;
    max-width: 250px;
    z-index: 9999; /* Z-index muy alto para evitar superposiciones */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-top: 8px;
    white-space: nowrap;
}

.booking-wizard {
    background-color: white;
}

/* Posicionamiento inteligente para evitar superposiciones */
.schedule-hover-container:hover .schedule-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Ocultar otros tooltips cuando uno está activo */
.schedule-hover-container:hover ~ .schedule-hover-container .schedule-tooltip,
.schedule-hover-container:hover + * .schedule-hover-container .schedule-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ajustar posición si está cerca del borde derecho */
.schedule-hover-container:nth-last-child(-n+2) .schedule-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

/* Ajustar posición si está cerca del borde izquierdo */
.schedule-hover-container:nth-child(-n+2) .schedule-tooltip {
    left: 0;
    transform: none;
}

.schedule-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #dee2e6;
    z-index: 10000;
}

.schedule-tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    z-index: 10001;
}

/* Ajustar flechas para tooltips posicionados a la derecha */
.schedule-hover-container:nth-last-child(-n+2) .schedule-tooltip::before {
    left: auto;
    right: 20px;
    transform: none;
}

.schedule-hover-container:nth-last-child(-n+2) .schedule-tooltip::after {
    left: auto;
    right: 21px;
    transform: none;
}

/* Ajustar flechas para tooltips posicionados a la izquierda */
.schedule-hover-container:nth-child(-n+2) .schedule-tooltip::before {
    left: 20px;
    transform: none;
}

.schedule-hover-container:nth-child(-n+2) .schedule-tooltip::after {
    left: 21px;
    transform: none;
}

.schedule-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f1f3f4;
    white-space: nowrap;
}

.schedule-day:last-child {
    border-bottom: none;
}

.schedule-day-name {
    font-weight: 500;
    color: #495057;
    font-size: 0.875rem;
    min-width: 60px;
}

.schedule-day-time {
    color: #6c757d;
    font-size: 0.8rem;
    text-align: right;
}

.schedule-empty {
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
    font-style: italic;
    white-space: normal;
}

/* Agregar un delay para evitar parpadeos */
.schedule-hover-container {
    transition-delay: 0.1s;
}

.schedule-hover-container:hover {
    transition-delay: 0s;
}

/* ===== WIZARD STYLES ===== */

/* Wizard Container */
.wizard-container {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

/* Progress Indicator */
.wizard-progress {
    background: #f8f9fa;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #dee2e6;
    z-index: 1;
    transform: translateY(-50%);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    background: #f8f9fa;
    padding: 0 1rem;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.progress-step.active .step-circle {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.progress-step.completed .step-circle {
    background: var(--success-color);
    color: white;
}

.progress-step.completed .step-circle::before {
    content: '✓';
    font-weight: bold;
}

.step-label {
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
    font-weight: 500;
}

.progress-step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.progress-step.completed .step-label {
    color: var(--success-color);
    font-weight: 600;
}

/* Wizard Content */
.wizard-content {
    padding: 2rem;
    min-height: 400px;
}

.booking-mode-subtitle {
    font-weight: 600;
    color: #495057;
}

.booking-mode-card {
    border: 2px solid #e9ecef;
    border-radius: 18px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
}

.booking-mode-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12);
    border-color: rgba(13, 110, 253, 0.35);
}

.booking-mode-card.border-primary {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18), 0 18px 55px rgba(0, 0, 0, 0.12);
}

.booking-mode-card--disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.booking-mode-card--disabled:hover {
    transform: none;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
    border-color: #e9ecef;
}

.booking-mode-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    display: none;
}

.booking-mode-card--disabled .booking-mode-badge--disabled {
    display: inline-flex;
    align-items: center;
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.25);
}

.booking-mode-card-body {
    padding: 22px 22px 18px;
    text-align: center;
}

.booking-mode-card-kicker {
    margin-top: 14px;
    font-weight: 700;
    color: #f3a685;
}

.booking-mode-card-desc {
    margin-top: 10px;
    color: #343a40;
    font-weight: 600;
}

.booking-mode-card-hint {
    display: block;
    margin-top: 12px;
    color: #b02a37;
    font-weight: 600;
}

.booking-mode-art {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-mode-art-stack {
    position: relative;
    width: 260px;
    height: 140px;
    margin: 0 auto;
    isolation: isolate;
}

.booking-mode-art-sheet {
    width: 210px;
    height: 130px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    position: relative;
    padding: 12px;
    overflow: hidden;
}

.booking-mode-art-sheet--front {
    position: absolute;
    left: 0;
    top: 6px;
    z-index: 2;
}

.booking-mode-art-sheet--back {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: scale(0.92);
    opacity: 0.95;
    z-index: 1;
}

.booking-mode-art-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.8rem;
    z-index: 3;
}

.booking-mode-art-avatar--alt {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.booking-mode-art-header {
    text-align: center;
    margin-top: 6px;
}

.booking-mode-art-day {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    color: #6c757d;
}

.booking-mode-art-date {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #343a40;
    line-height: 1.1;
}

.booking-mode-art-bars {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.booking-mode-art-bar {
    height: 20px;
    border-radius: 8px;
}

.booking-mode-art-bar--green {
    background: rgba(25, 135, 84, 0.78);
}

.booking-mode-art-bar--blue {
    background: rgba(13, 110, 253, 0.65);
}

@media (max-width: 576px) {
    .booking-mode-card-body {
        padding: 18px 16px 16px;
    }

    .booking-mode-art {
        height: 122px;
    }

    .booking-mode-art-stack {
        width: 230px;
        height: 122px;
    }

    .booking-mode-art-sheet {
        width: 190px;
        height: 118px;
        padding: 10px;
    }

    .booking-mode-art-avatar {
        width: 24px;
        height: 24px;
        top: 8px;
        left: 8px;
        font-size: 0.75rem;
    }

    .booking-mode-art-bars {
        margin-top: 12px;
        gap: 8px;
    }

    .booking-mode-art-bar {
        height: 18px;
        border-radius: 7px;
    }
}

.wizard-step {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.wizard-step.active {
    display: block;
}

/* Step Headers */
.step-header {
    text-align: center;
    margin-bottom: 2rem;
}

.step-header h3 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.step-header p {
    color: #6c757d;
    margin-bottom: 0;
}

/* Selection Summary */
.selection-summary {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary-color);
}

.selection-summary h6 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-label {
    color: #6c757d;
    font-weight: 500;
}

.summary-value {
    color: var(--dark-color);
    font-weight: 600;
}

.summary-value.pending {
    color: #6c757d;
    font-style: italic;
}

/* Professional Selection Grid */
.professionals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    /* margin-bottom: 2rem; */
}

/* Calendar Styles */
.calendar-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 2rem;
}

.calendar-header {
    background: #f8f9fa;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
}

.calendar-nav-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: var(--transition);
}

.calendar-nav-btn:hover {
    background: rgba(13, 110, 253, 0.1);
}

.calendar-month-year {
    font-weight: 600;
    color: var(--dark-color);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.calendar-weekday {
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.875rem;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day:hover:not(.past):not(.other-month) {
    background: rgba(13, 110, 253, 0.1);
}

.calendar-day.selected {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

.calendar-day.today {
    background: rgba(13, 110, 253, 0.1);
    font-weight: 600;
    color: var(--primary-color);
}

.calendar-day.past {
    color: #adb5bd;
    cursor: not-allowed;
}

.calendar-day.other-month {
    color: #adb5bd;
    cursor: default;
}

/* Timeslots Styles */
.timeslots-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    min-height: 200px;
}

.timeslot-period {
    margin-bottom: 1.5rem;
}

.timeslot-period:last-child {
    margin-bottom: 0;
}

.timeslot-period h6 {
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

/* Horarios organizados por secciones */
.timeslots-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeslot-section {
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.timeslot-section-header {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    color: var(--dark-color);
}

.timeslot-section-content {
    padding: 1rem;
}

.timeslots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
}

.timeslot-btn {
    background: white;
    border: 2px solid var(--primary-dark);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.timeslot-btn:hover {
    border-color: var(--primary-color);
    background: rgba(13, 110, 253, 0.05);
}

.timeslot-btn.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.timeslot-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

.summary-value--capacity {
    color: #157347;
    font-weight: 600;
}

/* Chip "Grupal · hasta N personas" del encabezado del paso 2. */
.group-capacity-chip {
    background: rgba(102, 126, 234, 0.12);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
}

/* ===== Indicador de cupo (servicios con "Mostrar lugares disponibles") =====
   Sólo aplica a las pastillas que traen .has-capacity: sin el opt-in del servicio el
   horario se renderiza exactamente como siempre, en una sola línea. */
/* Con indicador, la pastilla necesita más ancho: el texto más largo
   ("Todavía no se anotó nadie") no entra en los 100px de la grilla normal
   y se cortaba con ellipsis. */
.timeslots-grid--capacity {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.timeslot-btn.has-capacity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.5rem;
    min-height: 78px;
    justify-content: center;
}

.timeslot-btn.has-capacity .timeslot-time {
    font-size: 1.0625rem;
    line-height: 1.1;
}

.timeslot-capacity-bar {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #e9ecef;
    overflow: hidden;
}

/* Barra continua, no segmentada: tiene que leerse igual con cupo 3 y con cupo 200. */
.timeslot-capacity-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: #198754;
    transition: width 0.2s ease;
}

.timeslot-capacity-text {
    display: block;
    max-width: 100%;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #6c757d;
}

/* Vacío: nadie anotado. Borde punteado para que se lea como "abierto", no como error. */
.timeslot-btn.capacity-empty {
    border-style: dashed;
    border-color: #adb5bd;
}

.timeslot-btn.capacity-ok .timeslot-capacity-text {
    color: #157347;
}

/* Casi lleno: el estado que más empuja a reservar, tiene que notarse. */
.timeslot-btn.capacity-warn {
    border-color: #f59e0b;
}

.timeslot-btn.capacity-warn .timeslot-capacity-fill {
    background: #f59e0b;
}

.timeslot-btn.capacity-warn .timeslot-capacity-text {
    color: #b45309;
    font-weight: 600;
}

.timeslot-btn.capacity-full .timeslot-capacity-fill {
    background: #adb5bd;
}

/* Seleccionado: el fondo pasa a violeta, así que barra y texto van en blanco.
   Tres clases para ganarle a los tonos de arriba, que tienen dos. */
.timeslot-btn.has-capacity.selected .timeslot-capacity-bar {
    background: rgba(255, 255, 255, 0.35);
}

.timeslot-btn.has-capacity.selected .timeslot-capacity-fill {
    background: #ffffff;
}

.timeslot-btn.has-capacity.selected .timeslot-capacity-text {
    color: #ffffff;
    font-weight: 600;
}

/* Contact Form */
.contact-form {
    max-width: 500px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    display: block;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-control.is-invalid {
    border-color: var(--danger-color);
}

.invalid-feedback {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Wizard Navigation */
.wizard-navigation {
    background: #f8f9fa;
    padding: 1.5rem 2rem;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.min-w-0 {
    min-width: 0 !important;
}

.wizard-nav-btn {
    padding: 0.75rem 2rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border-color: #000;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-primary:disabled {
    background: #adb5bd;
    cursor: not-allowed;
}

/* Override de btn-outline-primary para que use el color de la empresa
   (sino Bootstrap default lo pinta de azul). */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: white;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-success:hover {
    background: #157347;
}

/* Loading States */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.spinner-border {
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.company-name {
    font-weight: bold;
    color: var(--dark-color);
}

.text-primary {
    color: var(--primary-color) !important;
}
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h6 {
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wizard-content {
        padding: 1rem;
    }
    
    .wizard-navigation {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .wizard-nav-btn {
        width: 100%;
    }
    
    /* Progreso del wizard en mobile: 1 sola línea horizontal y compacta
       (antes quedaba en columna, ocupando muchísimo alto). */
    .progress-steps {
        flex-direction: row;
        gap: 0;
    }

    .wizard-progress {
        padding: 1rem 0.5rem;
    }

    .step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
        margin-bottom: 0.3rem;
    }

    .progress-step {
        padding: 0 0.35rem;
    }

    .professionals-grid {
        grid-template-columns: 1fr;
    }
    
    .calendar-weekday,
    .calendar-day {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .step-label {
        font-size: 0.68rem;
    }

    .days-horizontal {
        gap: 0.25rem;
    }
    
    .day-item {
        min-width: 70px;
        padding: 0.75rem 0.5rem;
    }
    
    .day-number {
        font-size: 1.1rem;
    }
    
    .timeslots-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 0.375rem;
    }
    
    .timeslot-btn {
        padding: 0.625rem 0.375rem;
        font-size: 0.8rem;
    }

    /* Con indicador de cupo la pastilla necesita 3 líneas: la grilla pasa a 2 columnas
       para que el texto corto entre en un solo renglón, sin scroll horizontal. */
    .timeslots-grid--capacity {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .timeslot-btn.has-capacity {
        min-height: 62px;
        padding: 0.5rem 0.375rem;
    }

    .timeslot-btn.has-capacity .timeslot-time {
        font-size: 1rem;
    }

    .timeslot-capacity-text {
        font-size: 0.66rem;
    }
}

@media (max-width: 576px) {
    .booking-page-container--selector {
        margin-bottom: 16px !important;
    }

    /* Mobile: tarjetas más planas y a lo ancho (menos "modal flotante", más
       parecido al template full-bleed). Saca la sombra grande del selector. */
    .booking-page-container {
        padding-left: 0.6rem;
        padding-right: 0.6rem;

    }

    .booking-selector-col > .card {
        box-shadow: 0 1px 5px rgba(20, 20, 50, 0.06) !important;
        border-radius: 14px;
    }


    .wizard-progress {
        padding: 1rem 0.5rem;
    }

    .wizard-navigation {
        padding: 1rem 1rem 1.25rem;
    }

    .wizard-navigation .service-details p {
        line-height: 1.15;
    }

    .selection-summary {
        padding: 1rem;
    }

    .timeslots-container {
        padding: 1rem;
    }

    .calendar-header {
        padding: 0.75rem;
    }

    .step-circle {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
.wizard-nav-btn:focus,
.calendar-nav-btn:focus,
.timeslot-btn:focus,
.professional-card:focus,
.calendar-day:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .progress-step.active .step-circle,
    .progress-step.completed .step-circle {
        border: 2px solid currentColor;
    }
    
    .calendar-day.selected,
    .timeslot-btn.selected,
    .professional-card.selected {
        border: 3px solid currentColor;
    }
}

/* ===== PANTALLA DE ÉXITO ===== */
.booking-success-screen {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #eef1f5;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 24px 12px;
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    animation: fadeIn 0.5s ease-out;
    position: relative;
}

@media (max-width: 767.98px) {
    /* Confirmación compacta en mobile: paddings apretados para que entre toda la
       info (header + tarjeta + seña + acciones + agendar) sin scroll. */
    .booking-success-screen {
        align-items: flex-start;
        padding: 0;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .booking-success-screen .container {
        padding-left: 0;
        padding-right: 0;
    }
    .booking-success-screen .success-header {
        padding: 10px 16px 8px;
    }
    .booking-success-screen .success-icon {
        margin-bottom: 2px;
    }
    .booking-success-screen .success-icon i {
        font-size: 1.5rem;
    }
    .booking-success-screen .success-title {
        font-size: 1.05rem;
        margin-bottom: 1px;
    }
    .booking-success-screen .success-date-subtitle {
        font-size: 0.78rem;
    }
    .booking-success-screen .success-body {
        padding: 6px 12px 8px;
    }
    .booking-success-screen .detail-item {
        padding: 6px 14px;
    }
    .booking-success-screen .detail-content strong {
        margin-bottom: 0;
    }
    .booking-success-screen #success-deposit-row {
        padding: 8px 12px;
        margin-top: 6px;
    }
    .booking-success-screen .success-actions {
        margin-top: 6px;
        gap: 8px;
    }
    .booking-success-screen .success-action-btn {
        padding: 7px 6px;
    }
    .booking-success-screen .notification-info {
        padding: 6px 10px;
        margin-top: 6px;
    }
    .booking-success-screen .notification-info p {
        font-size: 0.76rem;
    }
    .booking-success-screen .mt-4 {
        margin-top: 0.35rem !important;
    }
    .booking-success-screen .btn-schedule-another {
        padding: 8px 18px;
        font-size: 0.95rem;
    }
}

@media (min-width: 768px) {
    .booking-success-screen {
        align-items: center;
        padding: 32px 16px;
        padding-top: calc(0 + env(safe-area-inset-top));
        padding-bottom: calc(0 + env(safe-area-inset-bottom));
    }
}

.success-card {
    background: white;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: slideInUp 0.6s ease-out;
}

/* Header con degradé de marca (estilo 1a): check + saludo + fecha en blanco. */
.success-header {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 55%, #000));
    color: #fff;
    text-align: center;
    padding: 30px 24px 26px;
}

.success-body {
    padding: 22px 22px 26px;
    text-align: center;
}

.success-icon {
    margin-bottom: 8px;
}

.success-icon i {
    font-size: 2.8rem;
    color: #fff;
    animation: bounceIn 0.8s ease-out;
}

.success-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.35;
    margin-bottom: 4px;
}

.success-date-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.booking-details {
    margin: 0;
    text-align: left;
}

.success-appointments-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.success-appointments-item {
    flex: 0 0 230px;
    scroll-snap-align: start;
    border-radius: 16px;
    box-shadow: rgba(51, 51, 51, 0.15) 0px 4px 8px;
    overflow: hidden;
    margin-top: 2px;
}

.success-appointments-item:first-child {
    margin-left: 2px;
}

.success-appointments-item .success-appointment-card {
    border-radius: 16px;
    box-shadow: none;
}

@media (min-width: 768px) {
    .success-appointments-item {
        flex: 1 1 calc(50% - 12px);
        /* max-width: calc(50% - 12px); */
        min-width: 260px;
    }
}

@media (min-width: 992px) {
    .success-appointments-item {
        flex: 1 1 calc(33.333% - 12px);
        /* max-width: calc(33.333% - 12px); */
        min-width: 260px;
    }
}

.success-appointments-list.is-single {
    overflow-x: hidden;
}

.success-appointments-list.is-single .success-appointments-item {
    flex: 1 1 100%;
    min-width: 0;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    padding: 14px 16px;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid #f1f2f6;
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    color: var(--primary-color);
    flex-shrink: 0;
}

.detail-content {
    flex: 1;
    min-width: 0;
}

.detail-content strong {
    display: block;
    color: #8b93a5;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: normal;
}

.detail-content span {
    color: #333;
    font-weight: 700;
    font-size: 14px;
}

.notification-info {
    background: #f6f7fb;
    border: 1px solid #eceef4;
    border-radius: 10px;
    padding: 10px;
    margin-top: 0;
}

.notification-info p {
    color: #5b6373;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ===== Rediseño 1a — confirmación: tarjeta limpia (icono + label/valor) ===== */
/* Tarjeta de turno como recuadro con borde (no sombra pesada). */
.booking-success-screen .success-appointments-item {
    border: 1px solid #eceef4;
    border-radius: 14px;
    box-shadow: none;
    overflow: hidden;
}

/* Las filas llevan su propio padding: la card no agrega el suyo. */
.booking-success-screen .success-appointment-card .card-body {
    padding: 0 !important;
}

/* Total a la derecha de la fila "Dónde" (como el prototipo 1a). */
.detail-total {
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
}

.detail-total strong {
    display: block;
    font-size: 12px;
    color: #8b93a5;
    font-weight: 400;
    margin-bottom: 2px;
}

.detail-total span {
    font-weight: 800;
    font-size: 16px;
    color: var(--primary-color);
}

/* Fila "Total" del resumen (reservas de varios turnos): resaltada en marca. */
.booking-success-screen #success-total-row {
    justify-content: flex-start;
    text-align: left;
}

.booking-success-screen #success-total-row .detail-content span {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
}

/* Seña: resaltado sutil con el color de marca para que no se pierda entre las filas. */
.booking-success-screen #success-deposit-row {
    background: color-mix(in srgb, var(--primary-color) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, #fff);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 10px;
}

/* Seña sin pagar: es lo único que queda por hacer, así que sale del gris del resumen y late unas
   pocas veces. El pulso es finito a propósito — una animación infinita en la pantalla final molesta
   más de lo que avisa. (El `prefers-reduced-motion` global de este archivo ya la neutraliza.) */
.booking-success-screen #success-deposit-row.is-pending,
.booking-success-screen #success-pack-row.is-pending .alert {
    background: #fff7ed;
    border: 2px solid #fb923c;
}

/* La clase la agrega wizard.js cuando el bloque entra en pantalla, no al renderizar: en mobile
   queda debajo del pliegue y el pulso se consumía antes de que el usuario lo viera. */
.booking-success-screen #success-deposit-row.is-pending.is-pulsing,
.booking-success-screen #success-pack-row.is-pending.is-pulsing .alert {
    animation: tb-deposit-pulse 1.6s ease-out 3;
}

.booking-success-screen #success-deposit-row.is-pending .detail-content strong {
    color: #7c2d12;
}

.booking-success-screen #success-deposit-row.is-pending > i {
    color: #ea580c !important;
}

@keyframes tb-deposit-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); }
    50% { box-shadow: 0 0 0 8px rgba(251, 146, 60, 0.3); }
}

/* Acciones útiles de la confirmación (agregar al calendario / cómo llegar). */
.success-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.success-action-btn {
    flex: 1 1 140px;
    border: 1px solid #e2e4ec;
    background: #fff;
    color: #3a3f4b;
    border-radius: 11px;
    padding: 12px 8px;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
}

.success-action-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.success-action-btn i {
    color: var(--primary-color);
    font-size: 1rem;
}

/* ===== MODAL DE ERROR ===== */
.error-icon i {
    animation: shake 0.5s ease-in-out;
}

/* ===== BOTONES DE LA PANTALLA DE ÉXITO ===== */

/* Botón de cerrar (cruz) */
.btn-close-success {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #000;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-success:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.btn-close-success:active {
    transform: scale(0.95);
}

/* Botón de agendar otro turno */
.btn-schedule-another {
    background: linear-gradient(135deg, var(--primary-color), #1976d2);
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-schedule-another:hover {
    background: linear-gradient(135deg, #1976d2, var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
}

.btn-schedule-another:active {
    transform: translateY(0);
}

.btn-schedule-another i {
    margin-right: 8px;
}

/* Estilos para las imágenes en booking */
.company-logo {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

/* Acá vivían `.company-cover-container`, `.company-cover`, `.company-logo-overlay`,
   `.company-logo-centered` y `.company-info-card`: la portada de 260px con el logo centrado encima
   que tenía la pantalla vieja de elegir sucursal. Ese markup se borró al pasar al hero compacto, y
   ninguna de las cinco clases tiene un solo consumidor en templates/ ni en assets/scripts/. */

.reviews-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.reviews-summary .reviews-avg {
    font-weight: 800;
    color: #2c3e50;
}
.reviews-summary .reviews-link {
    font-size: 0.9rem;
    color: var(--dark-color);
    text-decoration: underline;
    cursor: pointer;
}

.professional-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
}

.service-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* Galería de imágenes del servicio */
.service-image-gallery {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 0.5rem 0.5rem 0 0;
}

.service-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 0.3s ease;
}

.service-image-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.service-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 2;
}

.service-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.service-gallery-nav.prev {
    left: 8px;
}

.service-gallery-nav.next {
    right: 8px;
}

.service-gallery-indicators {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}

.service-gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.2s;
}

.service-gallery-dot.active {
    background: white;
}

.professional-avatar {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.contact-details,
.contact-item .contact-by-whatsapp,
.contact-item .contact-see-schedule {
    font-size: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .success-card {
        padding: 0;
        margin: 0;
    }

    #booking-success-screen .success-card {
        border-radius: 0;
    }


    .success-title {
        font-size: 1.3rem;
    }

    .success-icon i {
        font-size: 3rem;
    }
    
    .btn-close-success {
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .btn-schedule-another {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
}

:root {
    --booking-neutral-bg: rgb(243, 243, 243);
    --booking-neutral-text: rgb(71, 71, 71);
}

.booking-accordion-button::after {
    display: none;
}

.booking-accordion-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.booking-mobile-search-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.booking-category-sidebar {
    max-height: calc(100vh - 220px);
    overflow: auto;
    padding-right: 2px;
}

.service-name {
    font-size: 14px;
}

.start-element {
    width: 130px;
}

/* ========== Packs en booking público (Fase 4b — rediseño) ========== */

/* Contenedor envolvente: el col que tiene packs se convierte en una "caja" con
   borde verde sutil, fondo blanco y header "Opciones para este servicio". */
.col-12.has-packs,
.col-md-6.has-packs {
    /* El col de bootstrap tiene padding lateral; movemos los estilos visuales a un
       inner wrapper virtual usando padding interno extra y un background sólido. */
}

.has-packs {
    position: relative;
}

/* Sobre el padding lateral de bootstrap (px-2 según g-3), agregamos un visual wrapper
   creando background + border en un pseudo-elemento absoluto, así no rompemos el grid. */
.has-packs::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    background: white;
    border: 1px solid rgba(25, 135, 84, 0.35);
    border-radius: 0.75rem;
    z-index: 0;
    pointer-events: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.has-packs > * {
    position: relative;
    z-index: 1;
}

/* Padding interno para separar del borde visual del wrapper */
.has-packs {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.has-packs > .service-card {
    height: auto;
    /* Borde gris claro: card anidada dentro del contenedor verde */
    border-color: #e5e7eb !important;
    background: white;
    margin-left: 0.35rem;
    margin-right: 0.35rem;
}

.has-packs > .service-card:hover {
    border-color: #198754 !important;
    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.12) !important;
}

/* Header "Opciones para este servicio" */
.service-packs-group-header {
    color: #198754;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0 1rem 0.5rem 1rem;
    display: flex;
    align-items: center;
}

.booking-service-packs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0.35rem 0 0.35rem;
}

.pack-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: color-mix(in srgb, var(--primary-color) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, #fff);
    border-radius: var(--border-radius, 0.5rem);
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    transition: var(--transition, all 0.15s ease-in-out);
}

.pack-card:hover {
    border-color: #198754;
    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.15);
    transform: translateY(-1px);
}

.pack-card--hidden {
    display: none !important;
}

.pack-card__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.pack-card__body {
    flex: 1;
    min-width: 0;
}

.pack-card__title {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.95rem;
    line-height: 1.2;
}

.pack-card__meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 2px;
}

.pack-card__desc {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 2px;
}

.pack-card__owned-hint {
    font-size: 0.78rem;
    color: #0f5132;
    margin-top: 4px;
    font-weight: 500;
}

.pack-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pack-card__price {
    background: #198754;
    color: white;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pack-card__cta {
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
}

/* Estado: pack ya activo para el paciente logueado */
.pack-card--owned {
    background: #f9fafb;
    opacity: 0.85;
    cursor: default;
}

.pack-card--owned:hover {
    border-color: #e5e7eb;
    box-shadow: none;
    transform: none;
}

.pack-card--owned .pack-card__icon {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
}

.pack-card--owned .pack-card__price {
    background: #9ca3af;
}

/* Toggle "Ver más packs" */
.pack-card__show-more {
    align-self: flex-start;
    color: #198754;
    font-size: 0.82rem;
    text-decoration: none;
    padding: 0.25rem 0.4rem;
}

.pack-card__show-more:hover {
    color: #0f5132;
    text-decoration: underline;
}

/* Responsive: stack vertical en mobile */
@media (max-width: 575.98px) {
    .pack-card {
        flex-wrap: wrap;
    }
    .pack-card__body {
        flex-basis: calc(100% - 44px); /* deja lugar al ícono */
    }
    .pack-card__side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 0.4rem;
        padding-left: 44px; /* alinear con el body */
    }
}

/* ========== Mini-resumen de packs usados en la pantalla de éxito ========== */

.success-packs-summary {
    margin-top: 12px;
    padding: 12px 16px;
    background-color: #e8f5e9;
    border: 1px solid rgba(25, 135, 84, 0.3);
    border-radius: 0.5rem;
}

.packs-summary-item {
    color: #0f5132;
    font-size: 0.9rem;
    line-height: 1.4;
}

.packs-summary-item + .packs-summary-item {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(25, 135, 84, 0.15);
}

/* ========== Pantalla de éxito en modo compra de pack (Fase 4b) ========== */

.success-screen-pack .success-card {
    padding: 1.25rem;
}

.success-screen-pack .success-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.success-screen-pack .success-title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.success-screen-pack .booking-details {
    margin-top: 8px !important;
}

/* Compactar las cards de items del appointment */
.success-screen-pack #success-appointments .detail-item {
    padding: 0.4rem 0.6rem !important;
    margin-bottom: 4px !important;
}

.success-screen-pack #success-appointments .detail-item strong {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.success-screen-pack #success-appointments .detail-item span {
    font-size: 0.9rem;
}

.success-screen-pack #success-appointments > div {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.success-screen-pack .notification-info {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.success-screen-pack .btn-schedule-another {
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
}

.success-screen-pack #success-pack-row .alert {
    margin-bottom: 0.5rem;
}

.success-screen-pack #success-pack-row .alert .fw-bold {
    font-size: 0.95rem;
}

/* ─── Cupón de descuento (chip en la barra + modal) ─── */
.coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border: 1px dashed var(--primary-color, #0d6efd);
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.06);
    color: var(--primary-color, #0d6efd);
    font-size: 0.8rem;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
}

.coupon-chip:hover {
    background: rgba(13, 110, 253, 0.12);
}

.coupon-chip.coupon-chip-applied {
    border-style: solid;
    border-color: #198754;
    color: #0a3622;
    background: rgba(25, 135, 84, 0.12);
    font-weight: 600;
}

.coupon-input-group .form-control {
    text-transform: uppercase;
}

.coupon-feedback {
    color: var(--danger-color, #dc3545);
    font-size: 0.875rem;
    margin-top: 0.35rem;
}

.coupon-applied .coupon-totals {
    font-size: 0.9rem;
}

.coupon-price-original {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Importe del pack en el resumen: es lo que se cobra, así que pesa más que el resto de la fila. */
.service-price-row__pack-amount {
    font-size: 1.1em;
    font-weight: 700;
}

/* Tamaños alineados al prototipo + "Agregar" como outline de marca (antes: relleno sólido). */
.service-card .card-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.service-card .service-add-btn {
    background-color: #fff;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 0.9rem;
}

.service-card .service-add-btn:hover {
    background-color: color-mix(in srgb, var(--primary-color) 8%, #fff);
    color: var(--primary-color);
}

/* Modo "solo packs": la card del servicio deja de ser clickeable (el turno suelto
   no existe para este servicio), así que tampoco debe parecerlo. */
.service-card--pack-only {
    cursor: default;
}

.service-pack-only-hint {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
    margin-bottom: 0.5rem;
}

.service-pack-only-link {
    font-size: 0.85rem;
}

.has-packs::before {
    border-color: color-mix(in srgb, var(--primary-color) 28%, #fff);
}

.has-packs > .service-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--primary-color) 15%, transparent) !important;
}

.pack-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.pack-card__icon {
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
    color: var(--primary-color);
}

.pack-card__price {
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
    color: var(--primary-color);
}

.pack-card__show-more {
    color: var(--primary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Selector de servicios — tabs + grilla horizontal
   Reemplaza el par lista-de-categorías + acordeón cerrado (spec/selector-servicios-booking.md).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buscador full width: con catálogos de 78 servicios es el camino principal, no un accesorio */
.booking-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.9rem;
}

.booking-search__icon {
    position: absolute;
    left: 0.9rem;
    color: #8b93a5;
    pointer-events: none;
}

.booking-search__input.form-control {
    padding: 0.7rem 2.5rem 0.7rem 2.4rem;
    border: 1.5px solid #dfe3ea;
    border-radius: 0.7rem;
    font-size: 0.95rem;
}

.booking-search__input.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.booking-search__clear {
    position: absolute;
    right: 0.55rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #8b93a5;
    border-radius: 50%;
}

.booking-search__clear:hover {
    background: #f1f3f7;
    color: #5b6373;
}

/* ── Tabs de categoría ────────────────────────────────────────────────────── */
.booking-tabs-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    border-bottom: 1px solid #eceef4;
    margin-bottom: 0.9rem;
}

/* Scroll horizontal con degradado: nunca apilar las tabs en dos renglones, el alto
   salta y empuja los servicios abajo del pliegue */
.booking-tabs {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent 100%);
}

.booking-tabs::-webkit-scrollbar {
    height: 0;
}

.booking-tab {
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 0.62rem 0;
    font-size: 0.87rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

/* Sin subrayado: la barra de progreso del carril ocupa esa misma línea y dos marcas ahí abajo
   se confunden entre sí. El peso y el color alcanzan para señalar cuál está abierta.

   Y el color deja de ser el de la marca: es la etiqueta más importante de la fila y sobre
   blanco 9 de las 16 empresas pagas de la base no llegan a 4,5:1 con su acento (la peor,
   #8ad3de, da 1,69:1). El acento se queda en el borde de "Ver todas", donde no hay que leerlo. */
.booking-tab.is-active {
    font-weight: 800;
    color: #1f2430;
}

.booking-tab__count {
    margin-left: 0.35rem;
    color: #b8bec9;
    font-weight: 700;
}

.booking-tab.is-active .booking-tab__count {
    color: #6b7280;
}

/* El estilo terminado vive en la pasada final del fondo del archivo, junto al scroller y la
   barra de progreso. Acá queda sólo lo estructural, que es lo que ordena la fila. */
.booking-tabs__all-slot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.booking-tabs__all {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Panel "Todas (N)": popover en desktop, hoja inferior en mobile */
.booking-tabs-panel {
    position: absolute;
    z-index: 20;
    right: 1.5rem;
    width: min(420px, calc(100% - 3rem));
    background: #fff;
    border: 1px solid #e3e6ee;
    border-radius: 0.9rem;
    box-shadow: 0 18px 44px rgba(20, 20, 50, 0.16);
    overflow: hidden;
}

.booking-tabs-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f0f3f6;
    font-size: 0.8rem;
    font-weight: 700;
    color: #5b6373;
}

.booking-tabs-panel__close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #8b93a5;
}

.booking-tabs-panel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.25rem;
    max-height: 60vh;
    overflow-y: auto;
}

.booking-tabs-panel__item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    text-align: left;
    border: none;
    background: transparent;
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    color: #5b6373;
}

.booking-tabs-panel__item > span:first-child {
    flex: 1;
    min-width: 0;
}

.booking-tabs-panel__item.is-active {
    background: color-mix(in srgb, var(--primary-color) 10%, #fff);
    color: var(--primary-color);
    font-weight: 700;
}

.booking-tabs-panel__count {
    color: #b8bec9;
    font-weight: 700;
}

.booking-search-summary {
    font-size: 0.82rem;
    color: #5b6373;
    margin-bottom: 0.7rem;
}

/* ── Grilla y card horizontal ─────────────────────────────────────────────── */
.booking-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    align-items: start;
}

/* min-width:0 es obligatorio: los grid items nacen con min-width:auto y no se encogen por
   debajo de su contenido mínimo, así que en 375px la fila (thumb + nombre + precio + botón)
   desbordaba la grilla y hacía scrollear la página entera en horizontal. */
.booking-service-cell {
    min-width: 0;
}

.booking-service-cell[hidden] {
    display: none;
}

/* Sin cursor:pointer: la card no tiene handler propio. Las dos acciones son explícitas
   ("+" agrega, "Ver más" abre el detalle) y un pointer sobre algo que no responde miente. */
.service-card--row {
    border: 1px solid #e6e9ef;
    border-radius: 0.85rem;
    padding: 0.7rem;
    height: auto;
}

.service-card--row .service-card__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-card__thumb {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 0.65rem;
    overflow: hidden;
}

.service-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card__thumb-count {
    position: absolute;
    right: 2px;
    bottom: 2px;
    background: rgba(20, 16, 16, 0.72);
    color: #fff;
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 0.55rem;
    font-weight: 700;
}

/* Sin foto no va tile ni placeholder. El espaciador sólo ocupa lugar cuando la grilla
   es mixta: así los nombres se alinean sin inventar un tile beige. */
.service-card__thumb-spacer {
    display: none;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.booking-service-grid--indent .service-card__thumb-spacer {
    display: block;
}

.service-card__body {
    flex: 1;
    min-width: 0;
}

.service-card__name {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-card__more {
    border: none;
    background: transparent;
    padding: 0;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Ancho fijo: si algo se comprime que sea el nombre, no el precio */
.service-card__meta {
    flex-shrink: 0;
    width: 74px;
    text-align: right;
}

/* El paréntesis que salió del nombre: una línea, gris, con elipsis. Nunca elipsis en el
   nombre — corta justo donde está la diferencia entre dos servicios parecidos. */
.service-card__detail {
    font-size: 0.69rem;
    color: #8b93a5;
    margin-top: 0.12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Primer párrafo de la descripción, recortado por ALTO y no por caracteres: el ancho de la card
   cambia entre desktop y mobile y un umbral fijo se equivoca en los dos. */
.service-card__desc {
    font-size: 0.72rem;
    line-height: 1.45;
    color: #5b6373;
    margin-top: 0.18rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Con paréntesis en el nombre, la descripción baja a 2 líneas: el bloque gris son 3 en total
   (1 + 2) y la card no cambia de alto según si el nombre tiene paréntesis o no. */
.service-card__desc--short {
    -webkit-line-clamp: 2;
}

.service-card__duration {
    font-size: 0.7rem;
    color: #8b93a5;
}

.service-card__price {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.service-card__action {
    flex-shrink: 0;
}

.service-card--row .service-add-btn {
    width: 40px;
    height: 40px;
    border-radius: 0.6rem;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
}

.service-card--row .service-add-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.service-card--row.selected {
    border: 2px solid var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 4%, #fff);
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.service-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 0.2rem;
}

/* Verde para el dato (se puede afirmar), ámbar para lo elegido a dedo (palabra neutra):
   decir "lo más pedido" sobre un destacado manual sería prueba social falsa */
.service-badge--most-booked {
    background: #e8f6ee;
    color: #1e8449;
}

.service-badge--featured {
    background: #fef3e2;
    color: #b45309;
}

.service-card--most_booked {
    border-color: #cfe8d8;
    border-width: 1.5px;
}

.service-card--featured {
    border-color: #f3d9ae;
    border-width: 1.5px;
}

/* ── Ver los N / vacío ────────────────────────────────────────────────────── */
.booking-show-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.8rem;
}

.booking-show-more {
    border: 1px solid #dfe3ea;
    background: #fff;
    border-radius: 0.65rem;
    padding: 0.62rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #5b6373;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.booking-show-more i {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.booking-show-more.is-expanded i {
    transform: rotate(180deg);
}

.booking-services-empty {
    text-align: center;
    padding: 1.6rem 1rem;
}

.booking-services-empty__title {
    font-weight: 700;
    color: #5b6373;
    margin-bottom: 0.7rem;
}

/* Verde de WhatsApp, no el color de marca: acá el botón es "salida de emergencia" y tiene
   que leerse como el canal, no como una acción más de la página. */
/* El verde era el de WhatsApp, porque este botón era "Escribinos". Ahora devuelve al catálogo, así
   que va con el color de la marca: un botón verde acá seguía prometiendo chat. */
.booking-services-empty .btn {
    border: none;
    background: var(--primary-color, #764ba2);
    color: #fff;
    border-radius: 0.65rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 800;
}

.booking-services-empty .btn:hover {
    filter: brightness(.92);
    color: #fff;
}

/* ── Detalle: modal en desktop, hoja completa en mobile ───────────────────── */
.booking-detail {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-detail[hidden] {
    display: none;
}

.booking-detail__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 50, 0.45);
}

.booking-detail__dialog {
    position: relative;
    z-index: 1;
    width: min(480px, calc(100% - 2rem));
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(20, 20, 50, 0.3);
}

.booking-detail__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #5b6373;
}


.booking-detail__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

.booking-detail__nav--prev { left: 0.5rem; }
.booking-detail__nav--next { right: 0.5rem; }

.booking-detail__counter {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.7rem;
    background: rgba(20, 16, 16, 0.72);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.6rem;
    font-weight: 700;
}

.booking-detail__body {
    padding: 1.1rem 1.2rem 1.3rem;
}

.booking-detail__name {
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.booking-detail__desc {
    font-size: 0.87rem;
    color: #5b6373;
    line-height: 1.55;
}

.booking-detail__detail {
    font-size: 0.75rem;
    color: #8b93a5;
    margin-top: 0.25rem;
}

.booking-detail__meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid #f1f0f5;
    font-size: 0.85rem;
    color: #5b6373;
}

.booking-detail__meta b {
    color: var(--primary-color);
    font-size: 1.05rem;
}

.booking-detail__packs {
    margin-top: 0.75rem;
}

.booking-detail__packs .booking-service-packs {
    margin: 0;
}

.booking-detail__cta {
    margin-top: 0.8rem;
    border-radius: 0.7rem;
    padding: 0.8rem;
    font-weight: 800;
}

body.booking-detail-open {
    overflow: hidden;
}

/* ── Packs como tira dentro de la card ────────────────────────────────────── */
.pack-card--strip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.6rem;
    font-size: 0.78rem;
}

.pack-card--strip .pack-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pack-card--strip .pack-card__title {
    font-weight: 700;
}

.pack-card--strip .pack-card__meta {
    color: #6b7280;
    font-size: 0.72rem;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .booking-service-grid {
        grid-template-columns: 1fr;
    }

    /* La duración y el precio van a la DERECHA, al lado del "+", igual que en desktop y que
       el prototipo mobile. Se probó bajarlos debajo del nombre por un supuesto desborde en
       375px, pero era un artefacto de Chrome headless: medido en el navegador real la fila
       entra (card 351px, la acción termina en 350). */
    .service-card__meta {
        width: 66px;
    }

    .service-card--row .service-card__main {
        gap: 10px;
    }


    /* Área táctil mínima de 44px en las flechas del carrusel. La X va a 36px a pedido:
       el sheet además se cierra tocando el fondo o tirando del handle, así que no es la
       única salida. */
    .booking-detail__nav {
        min-width: 44px;
        min-height: 44px;
    }

    /* Hoja inferior, no popover: en 390px un popover flotante tapa la grilla entera */
    .booking-tabs-panel {
        position: fixed;
        inset: auto 0 0 0;
        width: 100%;
        border-radius: 1rem 1rem 0 0;
        max-height: 70vh;
    }

    /* En mobile NO va full-screen: con `height:100%` el diálogo se estiraba a toda la
       pantalla y dejaba un vacío blanco enorme debajo del botón. El prototipo usa la misma
       card centrada que en desktop (máx 460px / 88vh), sólo que ocupa casi todo el ancho. */
    .booking-detail {
        padding: 16px;
    }

    .booking-detail__dialog {
        width: 100%;
        max-width: none;
        max-height: 88vh;
        height: auto;
    }
}

/* ── Desborde horizontal en mobile (bug preexistente) ─────────────────────────
   Un .row compensa con margin negativo (--bs-gutter-x / 2) el padding de su container.
   Acá hay dos lugares donde ese supuesto no se cumple y la página entera scrollea en
   horizontal: el header, que no es un .container y no tiene padding; y el container del
   booking, al que en mobile se le bajó el padding a 0.6rem sin tocar el gutter.
   La variable NO se puede setear en el padre: Bootstrap la redeclara dentro de .row. */
.header-container > .row {
    --bs-gutter-x: 0;
}

@media (max-width: 576px) {
    .booking-page-container > .row {
        --bs-gutter-x: 1.2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero compacto — portada 140px, logo al costado, mapa en el modal
   Antes: portada de 260px + logo centrado de 130px se comían la primera pantalla y
   reservar quedaba abajo del pliegue. El mapa vivía en una columna fija de la derecha:
   sirve para llegar, no para decidir, así que pasó a "Ubicación y horario".
   ═══════════════════════════════════════════════════════════════════════════ */
.booking-hero {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6e9ef;
    margin-bottom: 1rem;
}

.booking-hero__cover {
    height: 140px;
    background: linear-gradient(135deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 40%, #764ba2) 100%);
}

.booking-hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.booking-hero__bar {
    display: flex;
    /* Envuelve en todos los anchos, no sólo en mobile: las filas de abajo van en su propio renglón
       a ancho completo (ver .booking-hero__rows). */
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0 1.5rem 0.9rem;
}

.booking-hero__logo {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    margin-top: -46px;
    border-radius: 15px;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
}

.booking-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-hero__main {
    flex: 1;
    min-width: 0;
    padding-top: 0.75rem;
}

.booking-hero__title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.booking-hero__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.booking-hero__reviews .company-hero-reviews,
.booking-hero__reviews {
    font-size: 0.8rem;
}

.booking-hero__social {
    display: flex;
    gap: 0.6rem;
    color: #a0a6ad;
    font-size: 0.95rem;
}

.booking-hero__social a {
    color: inherit;
}

.booking-hero__social a:hover {
    color: var(--primary-color);
}

.booking-hero__desc-wrap {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #5b6373;
    line-height: 1.5;
}

/* Barra de datos del negocio: dirección, horario de hoy, WhatsApp y el acceso al mapa */
/*
    Las filas del hero: ubicación, profesionales y (si la empresa lo prende) WhatsApp.

    Ancho completo y separadas por una línea, en vez de ítems sueltos en una barra que envuelve.
    Cada fila es ícono + etiqueta a la izquierda y contenido a la derecha, así el ojo baja por una
    columna en vez de barrer una línea irregular. Es el mismo layout en desktop y en mobile: antes
    el equipo se dibujaba de dos maneras distintas y había que mantener las dos.
*/
.booking-hero__rows {
    /* Renglón propio y ancho completo: son hermanas del logo, no hijas de la columna del nombre.
       Adentro heredaban la sangría que existe para esquivar el logo —83px de 373 en mobile, medido—
       cuando el logo ya había terminado 137px más arriba. */
    flex: 1 0 100%;
    /* Sin esto el `min-width:auto` que traen los ítems flex deja que el contenido sin cortes
       —etiquetas y dirección van en nowrap— estire el bloque más allá del ancho de la barra: medido,
       603px dentro de una barra de 373. */
    min-width: 0;
    margin-top: 0.6rem;
    /* Sin línea arriba: la separación con las estrellas ya la da el aire, y el borde sumaba un
       tercer trazo horizontal en un hero que ya tiene el de cada fila. */
}

.booking-hero__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.62rem 0;
    border: none;
    border-bottom: 1px solid #edeff5;
    background: transparent;
    color: #2b3040;
    font-size: 0.84rem;
    text-align: left;
    text-decoration: none;
}

.booking-hero__row:hover {
    color: var(--primary-color, #764ba2);
}

.booking-hero__row-icon {
    flex-shrink: 0;
    width: 1rem;
    color: #8b93a5;
    text-align: center;
}

.booking-hero__row-label {
    font-weight: 600;
    white-space: nowrap;
}

/* El contenido de la derecha se come el espacio libre y se recorta en UNA línea: una dirección
   larga ocupaba dos renglones del hero, que es justo lo que este rediseño vino a recuperar. */
.booking-hero__row-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8b93a5;
    text-align: right;
}

.booking-hero__row-arrow {
    flex-shrink: 0;
    margin-left: auto;
    color: #b8bec9;
    font-size: 0.72rem;
    transition: transform .18s ease;
}

/* Con contenido a la derecha, la flecha ya no necesita empujar: el margin-left:auto de arriba
   la mandaría al final igual, pero el valor ya ocupó el espacio. */
.booking-hero__row-value + .booking-hero__row-arrow {
    margin-left: 0.5rem;
}

.booking-hero__row[aria-expanded="true"] .booking-hero__row-arrow {
    transform: rotate(180deg);
}

.booking-hero__row--action {
    color: #25D366;
}

.booking-hero__row--action .booking-hero__row-icon {
    color: inherit;
}

/* Pegados a la etiqueta y NO empujados a la derecha: con `margin-left:auto` el espacio libre de
   desktop se metía entre "Profesionales" y las caras, y quedaban flotando en el medio de la fila.
   La flecha ya se va sola al final con su propio auto. El primer avatar compensa el -7px con el que
   se superponen los demás. */
.booking-hero__row-avatars {
    display: flex;
    align-items: center;
    padding-left: 7px;
}

.booking-hero__av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: -7px;   /* superpuestos: cinco caras entran en el ancho de mobile */
    border: 2px solid #fff;
    border-radius: 50%;
    background: #efe9f8;
    color: #764ba2;
    font-size: 9.5px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.booking-hero__av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-hero__av--more {
    background: #2b3040;
    color: #fff;
}

/* El panel del equipo. `[hidden]` explícito porque display:grid de la clase le gana al del
   user agent — el nodo se togglea por JS y sin esto nacería abierto. */
.booking-hero__team-panel {
    display: grid;
    gap: 0.1rem;
    padding: 0.25rem 0 0.5rem;
    border-bottom: 1px solid #edeff5;
}

.booking-hero__team-panel[hidden] {
    display: none;
}

.booking-hero__pro {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0;
    border: none;
    background: transparent;
    text-align: left;
}

.booking-hero__pro .booking-hero__av {
    margin-left: 0;
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.booking-hero__pro-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 600;
    color: #2b3040;
}

.booking-hero__pro-link {
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--primary-color, #764ba2);
}

/* "Ubicación y horario" es una consulta secundaria y con el color de marca competía con el CTA
   de reservar, que es lo único que la página quiere que pase. Va gris subrayado, en la misma
   línea de los datos. WhatsApp sí se queda con el color: ahí sí querés que se toque. */

/* Equipo a la derecha del hero */

@media (max-width: 991.98px) {

    /* Mobile: los avatares no entran en fila, van superpuestos con el resumen al lado */

    .booking-hero__team-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #fff;
        overflow: hidden;
        background: color-mix(in srgb, var(--primary-color) 12%, #fff);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.62rem;
        font-weight: 800;
    }

    .booking-hero__team-avatar + .booking-hero__team-avatar {
        margin-left: -9px;
    }

    .booking-hero__team-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 576px) {
    .booking-hero__cover {
        height: 96px;
    }

    .booking-hero__bar {
        flex-wrap: wrap;
        padding: 0 0.9rem 0.9rem;
    }

    .booking-hero__logo {
        width: 54px;
        height: 54px;
        margin-top: -34px;
    }

}

/* ── Hero: tipografías exactas del prototipo ──────────────────────────────────
   Los tamaños del hero salían de reglas viejas pensadas para el hero grande (nombre h1,
   estrellas de 15px). Acá van los valores del prototipo, que es una barra compacta:
   nombre 18/800, todo el resto 12,5px, redes 13px. */
.booking-hero__name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

/* El tamaño de mobile va DESPUÉS de la regla base y no en el @media de arriba: con la misma
   especificidad gana el último que se declara, así que allá quedaba pisado por los 18px y el
   nombre nunca se achicaba en el teléfono. */
@media (max-width: 576px) {
    .booking-hero__name {
        font-size: 16.8px;
    }
}

.booking-hero__reviews .reviews-summary {
    gap: 5px;
    font-size: 12.5px;
}

.booking-hero__reviews .reviews-stars {
    font-size: 12.5px;
}

.booking-hero__reviews .reviews-avg {
    font-weight: 700;
    font-size: 12.5px;
    color: #f5a623;
}

.booking-hero__reviews .reviews-link {
    font-size: 12.5px;
    font-weight: 500;
    color: #8b93a5;
}

.booking-hero__social {
    font-size: 13px;
    gap: 9px;
}

.booking-hero .company-hero-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #5b6373;
}

.booking-hero .company-hero-leer-mas {
    font-size: 12.5px;
    margin-top: 2px;
}


/* Avatares del equipo: 34px con el nombre en 10px, como el prototipo */

/* ── Sin el padding del wizard en la vista del selector ───────────────────────
   `.container-fluid` reserva `--wizard-header-h + 20px` arriba porque el WIZARD tiene su
   propio header fijo y alto. En el selector el header fijo es `.header-container`, mucho
   más bajo: 84px de padding + el py-4 dejaban una franja gris enorme sobre la portada.
   En el prototipo la portada arranca pegada al nav. */
.booking-page-container--selector {
    padding-top: var(--booking-header-h, 64px) !important;
    padding-bottom: 1.5rem !important;
    margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ajuste fino al prototipo (segunda pasada, comparando valor por valor)
   ═══════════════════════════════════════════════════════════════════════════ */

/* El área de servicios va sobre gris, no sobre blanco: es lo que hace que las cards
   blancas se lean como cards. En el prototipo el frame es #f6f7fb y sólo las filas
   son blancas — el degradado del scroll de tabs termina en ese mismo #f6f7fb. */
.booking-selector-body {
    background: #f6f7fb;
    padding: 16px 24px 24px;
}

/* Buscador: input 13.5px, ícono 13px */
.booking-search {
    margin-bottom: 14px;
}

.booking-search__input.form-control {
    font-size: 13.5px;
    padding: 11px 40px 11px 38px;
    border-radius: 11px;
}

.booking-search__icon {
    font-size: 13px;
    left: 14px;
}

.booking-search-summary {
    font-size: 12.5px;
    color: #8b93a5;
    margin-bottom: 12px;
}

/* Tabs: gap 15px, borde #e3e6ee, tab 10px 0 / 13.5px */
.booking-tabs-wrap {
    border-bottom-color: #e3e6ee;
    margin-bottom: 14px;
    gap: 0;
}

.booking-tabs {
    gap: 15px;
    /* El degradado va al color del fondo del área, no a transparente */
    -webkit-mask-image: none;
    mask-image: none;
    position: relative;
}

.booking-tabs-wrap::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.booking-tab {
    padding: 10px 0;
    font-size: 13.5px;
}

.booking-tab__count {
    margin-left: 0.3rem;
}

/* La divisoria pasa del botón a su contenedor: el botón ahora tiene borde propio y un
   border-left encima le corta la pastilla. */
.booking-tabs__all-slot {
    padding-left: 11px;
    margin-left: 9px;
    border-left: 1px solid #e3e6ee;
}

/* Grilla y card: gap 10px, nombre 14px */
.booking-service-grid {
    gap: 10px;
}

.service-card__name {
    font-size: 14px;
}

.service-card__detail {
    font-size: 11px;
}

.service-card__more {
    font-size: 11.5px;
    margin-top: 4px;
}

.service-card__duration {
    font-size: 11px;
}

.service-card__price {
    font-size: 14.5px;
}

.service-card__thumb-count {
    font-size: 8.5px;
}

.service-badge {
    font-size: 9px;
    padding: 2px 8px;
    gap: 5px;
}

/* El "+" del prototipo es un botón chico, no un cuadrado de 40px */
.service-card--row .service-add-btn {
    width: auto;
    height: auto;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 700;
}

/* Tira de pack: beige del prototipo, ícono sin fondo */
.pack-card--strip {
    background: #fbf7f4;
    border: 1px solid #e6d3c8;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 11.5px;
    margin-top: 10px;
    box-shadow: none;
}

.pack-card--strip .pack-card__icon {
    background: transparent;
    color: #8a5a3b;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 12px;
}

.pack-card--strip .pack-card__cta {
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

/* "Ver los N": el wrapper del prototipo es text-align center con 14px arriba */
.booking-show-more-wrap {
    margin-top: 14px;
}

.booking-show-more {
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
}

/* Frame único: nav → portada → barra del negocio → servicios, todo dentro del mismo
   contenedor redondeado, como en el prototipo. Antes eran dos cards con un gap gris. */
/* SIN overflow:hidden: un ancestro con overflow distinto de visible mata el
   `position:sticky` de las tabs (quedaban 5px por debajo del header en vez de pegarse).
   El recorte sólo lo necesita la portada, así que va ahí. */
.booking-frame {
    background: #f6f7fb;
    border: 1px solid #d9dced;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 20, 50, 0.10);
}

.booking-hero__cover {
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}

.booking-frame .booking-hero {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}


/* Nombre + reseñas + redes en una línea, como el prototipo. Reseñas y redes forman un solo
   bloque: cuando no entran, envuelven juntas en vez de dejar los tres íconos solos en un
   renglón. El nombre NUNCA se recorta — es lo más importante de la página. */
.booking-hero__aside {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    /* En 375px reseñas + redes no entran en una línea: el bloque envuelve por dentro en
       vez de cortarse contra el borde del frame (que tiene overflow:hidden y lo tapaba). */
    .booking-hero__aside {
        flex-wrap: wrap;
        flex-shrink: 1;
        min-width: 0;
        row-gap: 0.35rem;
    }
}

/* Redes en la barra superior, al lado del nombre (como el prototipo) */
.header-social {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: 12px;
    font-size: 13px;
    color: #a0a6ad;
    flex-shrink: 0;
}

.header-social a {
    color: inherit;
    line-height: 1;
}

.header-social a:hover {
    color: var(--primary-color);
}

/* Sin padding ni margen laterales en la vista del selector: el frame tiene que llegar a sus
   propios bordes, como en el prototipo. El `.container-fluid` aporta padding lateral, el
   `.row` un margen negativo y el `.col-12` otro padding — entre los tres metían ~24px que
   dejaban el frame flotando adentro. Sólo los costados: el padding de arriba (la altura del
   header fijo) y el de abajo se mantienen. */
.booking-page-container--selector {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.booking-page-container--selector > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* El nombre de la barra superior no envuelve: con las redes al lado se partía en tres
   renglones en mobile y el header pasaba de 64 a 176px de alto. El prototipo lo trunca. */
/* Ver el comentario de booking/index.html.twig: donde el nombre se repite, el de la barra baja a
   15px/700 para que el del hero (18px/800) sea el título y este quede como referencia. */
.company-name--compact {
    font-size: 15px;
    font-weight: 700;
}

/*
    Botón "Mis turnos" de la barra superior.

    Flex centrado: adentro puede haber sólo el ícono (mobile) o ícono + texto, y con el botón en
    `display:block` el ícono quedaba corrido — el margen que lo separaba del texto seguía ahí cuando
    el texto no estaba. El `gap` sí desaparece con el texto, porque no hay dos hijos que separar.

    Del atributo style del template quedó sólo el color de la marca, que es lo único que no se puede
    saber desde acá.
*/
.pp-mis-turnos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 2px solid var(--primary-color, #0d6efd);
    background: #fff;
    color: var(--primary-color, #0d6efd);
    font-weight: 600;
}

.header-container .company-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.header-container .d-flex.align-items-center {
    min-width: 0;
}

.header-container a.d-inline-flex {
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pasada final contra el prototipo, elemento por elemento
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tabs pegadas bajo el header: con "Ver los 48 de Láser" desplegado, sin esto la clienta
   pierde de vista en qué categoría está y tiene que scrollear de vuelta para cambiar. */
.booking-tabs-wrap {
    position: sticky;
    top: var(--booking-header-h, 56px);
    z-index: 5;
    background: #f6f7fb;
    align-items: stretch;
}

/* El scroller y su degradado de 38px al borde, como el prototipo */
.booking-tabs-scroller {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.booking-tabs__fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 38px;
    background: linear-gradient(90deg, rgba(246, 247, 251, 0), #f6f7fb);
    pointer-events: none;
}

/* Panel "Todas (N)": en el flujo, empujando la grilla — no un popover flotante. Así no
   tapa los servicios ni depende del z-index contra el frame. */
.booking-tabs-panel {
    position: static;
    width: auto;
    border: 1px solid #d5e0e8;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(20, 20, 50, 0.10);
    margin-bottom: 14px;
}

.booking-tabs-panel__header {
    padding: 10px 13px;
    border-bottom: 1px solid #f0f3f6;
    font-size: 12px;
    font-weight: 700;
    color: #5b6373;
}

.booking-tabs-panel__grid {
    gap: 0;
    padding: 4px;
}

.booking-tabs-panel__item {
    font-size: 12.5px;
}

/* Empty state: card punteada, con subtítulo */
.booking-services-empty {
    background: #fff;
    border: 1px dashed #cbd5cf;
    border-radius: 13px;
    padding: 26px 18px;
}

.booking-services-empty__title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.booking-services-empty__sub {
    font-size: 13px;
    color: #8b93a5;
    margin-bottom: 14px;
}

/* Botón del pack: los valores del prototipo */
.pack-card--strip .pack-card__cta {
    padding: 5px 11px;
    font-size: 11.5px;
}

/* El clear del buscador no lleva fondo en hover */
.booking-search__clear:hover {
    background: transparent;
    color: #5b6373;
}

/* Valores en px exactos: los rem redondeaban a 13,6 / 11,2 / 10,4 / 8,8 donde el prototipo
   usa 13 / 11 / 10 / 9. Se notan sumados en una grilla de 8 cards. */
.service-card--row {
    border-radius: 13px;
    padding: 11px;
}

.service-card--row .service-card__main {
    gap: 12px;
}

.service-card__thumb,
.service-card__thumb-spacer {
    border-radius: 10px;
}

.service-card__name {
    margin-top: 3px;
}

.service-card__detail {
    margin-top: 2px;
}

.pack-card--strip {
    gap: 9px;
}

.booking-service-grid {
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ancho máximo del CONTENIDO (no del frame)
   A borde de pantalla en un monitor grande: la descripción del negocio queda en líneas de
   ~1500px imposibles de leer de corrido, y las cards en 1100px para un texto de 300px dejan
   un agujero entre el nombre y el precio que obliga a barrer la pantalla para relacionarlos.
   El tope va en la barra del hero y en el listado; la portada y la barra superior siguen
   full bleed a propósito.
   ═══════════════════════════════════════════════════════════════════════════ */
.booking-hero__bar,
.booking-selector-body {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* El nombre es un <button> pero se lee como texto: sin chrome de botón, alineado a la
   izquierda y con el line-clamp de 2 líneas que tenía antes. */
.service-card__name {
    display: -webkit-box;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    color: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    margin-top: 3px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-card__name:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 3px;
}

/* La card entera responde al click, así que lo dice el cursor. Las zonas con acción propia
   (agregar, packs) mantienen el suyo. */
.service-card--row {
    cursor: pointer;
}

.service-card--row .service-card__action,
.service-card--row .booking-service-packs {
    cursor: default;
}

/* LANDMINE conocido: la regla base de `.booking-selector-body` está más arriba en el archivo,
   así que un media query anterior con la misma especificidad NO la pisa. Va al final.
   El prototipo usa 14px de padding lateral en mobile (no 24): son 20px más para el nombre,
   que entre la miniatura, el precio y el botón se queda con menos de 100px. */
@media (max-width: 767.98px) {
    .booking-selector-body {
        padding: 16px 14px 24px;
    }

    /* En 375px el nombre se queda con 115px y parte palabras a la mitad ("ELECTROPORA/DOR").
       Se recuperan 18px achicando lo que no pierde nada: gap 12→10, miniatura 60→52 y la
       columna de precio 66→62. El botón se mantiene en 44px, que es el mínimo táctil. */
    .service-card--row .service-card__main {
        gap: 10px;
    }

    .service-card__thumb,
    .service-card__thumb-spacer {
        width: 52px;
        height: 52px;
    }

    .service-card__meta {
        width: 62px;
    }
}

/* Que se note que la card abre el detalle: sin el link "Ver más" la única pista era el
   cursor, y eso no alcanza para descubrirlo. Hover en toda la card + el nombre subrayado. */
.service-card--row:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.service-card--row:hover .service-card__name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* "Ver más" inline dentro de la línea gris del detalle */
.service-card__more {
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
}

.service-card--row:hover .service-card__more {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Detalle del servicio — card en desktop, bottom sheet en mobile
   ═══════════════════════════════════════════════════════════════════════════ */
.booking-detail__dialog {
    display: flex;
    flex-direction: column;
    max-height: 90dvh;
    /* hidden, NO visible: con visible el texto del body scrolleado se dibujaba por encima
       de la foto en vez de recortarse contra el borde del media. La X ya vive dentro del
       diálogo, así que no necesita que el overflow sea visible. */
    overflow: hidden;
}

/* Media a lo ancho con relación fija: antes era una foto de 132px centrada sobre una caja
   gris de 210px — la zona más cara del sheet, medio vacía. */
.booking-detail__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 1rem 1rem 0 0;
}

.booking-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.booking-detail__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.1rem 1.2rem 0.6rem;
}

/* Los saltos de línea de la descripción se respetan: hay negocios que la cargan con
   "Ideal para:" y una lista debajo, y sin esto sale todo corrido en un párrafo ilegible. */
.booking-detail__desc {
    white-space: pre-line;
    font-size: 0.87rem;
    color: #5b6373;
    line-height: 1.55;
}

/* Duración, precio y CTA fijos al pie */
.booking-detail__footer {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #eceef4;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(20, 20, 50, 0.08);
    border-radius: 0 0 1rem 1rem;
}

.booking-detail__footer .booking-detail__meta {
    margin: 0 0 0.6rem;
    padding: 0;
    border: none;
}

.booking-detail__cta {
    width: 100%;
    margin: 0;
    border-radius: 0.7rem;
    padding: 0.8rem;
    font-weight: 800;
}

/* La X dentro de la caja, gris, 36px — no un círculo azul de 64 pisando el borde */
.booking-detail__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #5b6373;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.booking-detail__handle {
    display: none;
}

@media (max-width: 640px) {
    /* Bottom sheet: pegado abajo, a todo el ancho y con las esquinas de arriba redondeadas */
    .booking-detail {
        align-items: flex-end;
        padding: 0;
    }

    .booking-detail__dialog {
        width: 100%;
        max-width: none;
        border-radius: 18px 18px 0 0;
    }

    .booking-detail__media {
        border-radius: 18px 18px 0 0;
    }

    .booking-detail__footer {
        border-radius: 0;
    }

    /* Le dice a la clienta que se cierra tirando para abajo, que es lo que va a intentar */
    .booking-detail__handle {
        display: block;
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #dcdfe6;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Card mobile — que el nombre no se corte donde está la diferencia
   "LIMPIEZA PROFUNDA DE ESPALDA" y "…DE GLUTEOS" quedaban las dos en
   "LIMPIEZA PROFUNDA DE…": indistinguibles. La columna de texto tenía ~150px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* La columna de precio se ajusta al contenido en vez de reservar ancho fijo */
    .service-card__meta {
        width: auto;
        flex: 0 0 auto;
    }

    .service-card__duration {
        font-size: 11px;
    }

    .service-card__price {
        font-size: 14px;
        white-space: nowrap;
    }

    /* 40×40 en mobile (el mínimo táctil de 44 lo cubre el alto de la fila) */
    .service-card--row .service-add-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
    }

    /* Tres líneas: con dos, dos servicios que difieren en la última palabra se ven iguales */
    .service-card__name {
        -webkit-line-clamp: 3;
        font-size: 14px;
        line-height: 1.25;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pack: una tira de ~44px, no un bloque de 200
   En una grilla de 2 columnas un bloque alto deja un hueco blanco enorme al lado y el pack
   se lee como si perteneciera a la card vecina.
   ═══════════════════════════════════════════════════════════════════════════ */
.pack-card--strip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    /* Sin margin propio: el margen lo pone el wrapper, si no se acumulan 16px */
    margin-top: 0;
    padding: 7px 10px;
    background: #fbf7f4;
    border: 1px solid #e6d3c8;
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
}

.pack-card--strip .pack-card__icon {
    flex-shrink: 0;
    background: transparent;
    color: #8a5a3b;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 12px;
}

/* Una sola línea: el pack no puede pesar más que el servicio */
.pack-card__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pack-card__line {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #5b6373;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pack-card__deposit {
    font-size: 11px;
    font-weight: 600;
    color: #5b6373;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pack-card__owned-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f6ee;
    color: #1e8449;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.pack-card--strip .pack-card__cta {
    flex-shrink: 0;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    background: #fff;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

/* Acceso al panel para quien ya compró: una sola vez debajo de la grilla, no por card */
.booking-pack-only-note {
    margin-top: 12px;
    font-size: 12px;
    color: #8b93a5;
    text-align: center;
}

.booking-pack-only-note a {
    color: var(--primary-color);
    font-weight: 700;
}

.pack-card__show-more {
    font-size: 11.5px;
    padding: 4px 0 0;
}

/* Tope del media del modal: con aspect-ratio suelto, en un modal ancho la foto se come la
   mitad de la altura útil antes del primer texto. */
.booking-detail__media {
    max-height: 300px;
}

/* Descripción muy larga: 8 líneas con degradado + "Leer más" que expande in situ */
/* El degradado va en un ::after, NO en mask-image: `mask` crea un contexto de composición
   y en Blink el elemento enmascarado deja de recortarse contra el `overflow` del contenedor
   scrolleable — el texto se dibujaba por encima de la foto al scrollear. */
.booking-detail__desc.is-clamped {
    position: relative;
    max-height: 13em;
    overflow: hidden;
}

.booking-detail__desc.is-clamped::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.booking-detail__desc-more {
    border: none;
    background: transparent;
    padding: 0;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Barra de multiservicio: nombre en la misma línea que el contador, total sin apilar */
.booking-multi-service-count {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-multi-service-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sin min-height en la grilla: buscando algo con pocos resultados quedaba un bloque gris
   vacío de ~120px antes del footer. */
.booking-service-grid {
    min-height: auto;
}

@media (max-width: 640px) {
    .booking-detail__media {
        max-height: 44dvh;
    }
}

/* Barra de multiservicio en DOS líneas, no tres: contador+nombre arriba, total y duración
   abajo. Apilada en tres renglones tapaba media pantalla en mobile. */
.booking-multi-service-left {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "count count"
        "total meta";
    align-items: baseline;
    column-gap: 8px;
    min-width: 0;
}

.booking-multi-service-count {
    grid-area: count;
}

.booking-multi-service-total {
    grid-area: total;
}

.booking-multi-service-meta {
    grid-area: meta;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La miniatura reserva su espacio aunque la imagen tarde: con width/height en el <img> y
   estas reglas, el chip "1/2" no queda flotando sobre un rectángulo colapsado. */
.service-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La card seleccionada no subraya nada: el subrayado es la pista de "esto abre el detalle"
   y en la card ya elegida confunde. */
.service-card--row.selected .service-card__name,
.service-card--row.selected .service-card__more,
.service-card--row.selected:hover .service-card__name,
.service-card--row.selected:hover .service-card__more {
    text-decoration: none;
}

/* La barra de multiservicio flota sobre el contenido: sin este colchón tapa la última card */
.booking-selector-body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* Separación entre la foto y el texto: al scrollear, el padding-top del body se va y la
   primera línea queda pegada al borde de la foto, lo que se lee como si estuviera cortada. */
.booking-detail__media {
    border-bottom: 1px solid #eceef4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Banda del destacado (entre el hero y el buscador)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fondo blanco y el mismo padding lateral que el resto: la banda es la última cosa del bloque
   del hero, no el primer elemento del cuerpo gris. */
.booking-featured {
    background: #fff;
    padding: 16px 24px 0;
}

.booking-featured__band {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* El gap importa en mobile: sin él el título y la meta terminan justo donde arranca "Reservar",
       pegados sin un pixel de aire. No se solapan, pero se leen como si se solaparan. */
    gap: 12px;
    width: 100%;
    min-height: 150px;
    border-radius: 14px;
    overflow: hidden;
    padding: 18px 20px;
    background: #101820;
}

/* Botón invisible que cubre la banda: es el que recibe el clic y el foco del teclado. Existe para
   que "Reservar" pueda ser su propio botón en vez de un <span> dentro de otro botón, que era
   visible y no alcanzable por teclado. */
.booking-featured__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: none;
    background: transparent;
    cursor: pointer;
}

.booking-featured__hit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* La foto va en un <img> y no en background-image: así entra lazy y el navegador puede elegir
   tamaño. Queda de fondo, detrás del degradado y del texto. */
.booking-featured__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* El degradado va ENCIMA de la foto: es lo que hace que el título blanco se lea sobre cualquier
   imagen, clara u oscura. Como capa propia y no como primera capa de background-image, que era la
   forma frágil de conseguir lo mismo (invertir el orden la tapaba y nadie se daba cuenta). */
.booking-featured__band::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Sin z-index queda sobre la foto (que no tiene) y debajo del hit y del texto, que sí lo tienen. */
    background: linear-gradient(90deg, rgba(16, 24, 32, .86) 0%, rgba(16, 24, 32, .62) 45%, rgba(16, 24, 32, .18) 100%);
    pointer-events: none;
}

.booking-featured__text {
    position: relative;
    /* Arriba del botón invisible para que se lea, pero sin capturar el clic: así tocar el título
       llega al botón que está debajo. */
    z-index: 2;
    pointer-events: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.booking-featured__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .92);
    color: #1f2430;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* max-width para que el título nunca invada la zona clara del degradado, donde el blanco no se lee */
.booking-featured__title {
    display: block;
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    max-width: 440px;
}

.booking-featured__meta {
    color: rgba(255, 255, 255, .86);
    font-size: 12.5px;
    margin-top: 5px;
    max-width: 440px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.booking-featured__cta {
    position: relative;
    z-index: 3;
    margin-left: auto;
    align-self: flex-end;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    background: #fff;
    color: var(--primary-color);
    border-radius: 10px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 800;
    /* El cursor vive en .booking-featured__hit, que cubre la banda, pero el CTA está por encima con
       z-index 3: sin esto la manito desaparecía justo sobre el único control que hace algo distinto
       y se leía como deshabilitado. */
    cursor: pointer;
}

@media (max-width: 576px) {
    .booking-featured {
        padding: 12px 14px 0;
    }

    .booking-featured__band {
        min-height: 128px;
        padding: 14px;
    }

    .booking-featured__title {
        font-size: 17px;
        max-width: 100%;
    }

    .booking-featured__meta {
        max-width: 100%;
    }

    /* 44px de área táctil */
    .booking-featured__cta {
        min-height: 44px;
    }
}

/* La foto del detalle se esconde mientras carga: dejarla visible mostraba la del servicio
   anterior, porque un <img> pinta el bitmap viejo hasta que decodifica el nuevo.
   Medido: con la variante ya en el CDN son 2-7 ms (imperceptible); el hueco se nota sólo la
   primera vez que se genera, y para eso el contenedor lleva un fondo neutro en vez del blanco
   del sheet, que se leería como "se rompió". */
.booking-detail__media {
    background: #eef0f6;
}

.booking-detail__media img.is-loading {
    opacity: 0;
}

.booking-detail__media img {
    transition: opacity 0.12s ease-out;
}

/* ── Modo "solo packs" en el sheet de detalle ──────────────────────────────────
   El servicio no se vende suelto: la card ya esconde el "+", y acá se esconde el CTA que era
   el único camino que quedaba para agregarlo. El display va por clase y no por [hidden] porque
   `.btn` trae su propio display y le gana a la regla del user-agent. Sin el botón, el margen
   inferior del meta quedaba colgando en el pie. */
.booking-detail--pack-only .booking-detail__cta {
    display: none;
}

.booking-detail--pack-only .booking-detail__footer .booking-detail__meta {
    margin-bottom: 0;
}

/* ── Selector de sucursales ────────────────────────────────────────────────────────────────────
   Los valores salen del prototipo (radius 13, padding 13/14, borde #e6e9ef, gap 10, grilla de 2),
   pero el acento NO es el #1f5f8b literal de la maqueta: es `var(--primary-color)`, que es la marca
   de cada empresa y lo que ya usa el selector de servicios. */
.booking-location__title {
    margin: 0 0 3px;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1f2430;
}

.booking-location__sub {
    font-size: 12.5px;
    /* #8b93a5 sobre el #f6f7fb del panel da 2,86:1, abajo del 4,5:1 que WCAG pide para texto chico.
       Este gris llega a 4,6:1 y es el mismo que ya usa la dirección de la card. */
    color: #5b6373;
    margin-bottom: 14px;
}

/* El colchón de 84px de `.booking-selector-body` existe para que la barra flotante de multiservicio
   no tape la última card del catálogo. En esta pantalla esa barra no existe —se elige una sucursal y
   se sale— así que ese padding eran 84px de gris vacío abajo de la nota. */
.booking-location-grid ~ .booking-location__note {
    margin-bottom: -68px;
}

.booking-location-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: start;
}

.booking-location-card {
    /* `min-width: 0` porque un item de grilla nace con `min-width: auto` y no se encoge por debajo de
       su contenido mínimo: con una dirección larga la fila desbordaba y hacía scrollear la página
       entera. Ya pasó con las cards de servicio. */
    min-width: 0;
    display: block;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 13px;
    padding: 13px 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.booking-location-card:hover,
.booking-location-card:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 6px 18px rgba(20, 20, 50, 0.07);
    color: inherit;
}

.booking-location-card:hover .booking-location-card__name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.booking-location-card__name {
    /* Dos líneas y corta con elipsis, como pide el prototipo. No es teórico: el nombre de sucursal
       más largo del padrón tiene 102 caracteres ("ESTETICA ROUSE✨ Depilación Definitiva - HIFU -
       …"), que en 375px son 4 líneas y una card de 190px. Ninguna empresa multisucursal activa lo
       tiene hoy, así que esto es la red para el día que una de ésas abra la segunda sucursal.
       `display: -webkit-box` con `-webkit-line-clamp` es el clamp que ya usa la card de servicio. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #1f2430;
}

.booking-location-card__address {
    margin-top: 7px;
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    color: #5b6373;
    line-height: 1.45;
}

.booking-location-card__address i {
    color: #a0a6ad;
    margin-top: 2px;
    flex-shrink: 0;
}

.booking-location-card__phone {
    margin-top: 5px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #8b93a5;
}

.booking-location-card__phone i {
    color: #a0a6ad;
    font-size: 11px;
    flex-shrink: 0;
}

.booking-location-card__cta {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #f1f3f7;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    /* Oscuro y NO `var(--primary-color)`, aunque el prototipo pinte esta afordancia con el acento: su
       acento es un azul legible y las marcas reales son pasteles. Medido en LOURÉ (#ddbea3): el texto
       daba 1,75:1 contra el blanco de la card —abajo incluso del 3:1 que pide WCAG para negrita
       grande— y era la única pista de que la card se puede tocar. El acento se sigue usando donde no
       tiene que leerse: el borde del hover.
       (Ojo: el "Leer más" y el precio de la card de SERVICIO sí siguen con el acento, o sea con el
       mismo 1,75:1. Revisado con Alan en ago-2026 y decidido dejarlo así.) */
    color: #1f2430;
    white-space: nowrap;
}

.booking-location-card__cta i {
    font-size: 11px;
}

.booking-location__note {
    margin-top: 14px;
    font-size: 12px;
    color: #5b6373;
    line-height: 1.5;
}

/* El nombre de la empresa en la barra fija: oculto mientras el del hero se ve.
   `display: none` y no `opacity` para que no reserve el ancho en mobile, donde el logo y las redes
   pelean por la fila. Y al aparecer va en UNA línea con elipsis: si envolviera, la barra crecería a
   mitad del scroll y con ella `--booking-header-h`, que es el offset con el que se pega la tira de
   pestañas del selector de servicios. */
.company-name--deferred {
    display: none;
}

/* `min-width`, `overflow`, `white-space` y `text-overflow` NO se repiten acá: los aplica ya
   `.header-container .company-name` al mismo nodo. Sólo quedan el display que revela y el tope de
   ancho, que es lo propio de este estado. */
.company-name--deferred.is-visible {
    display: block;
    max-width: 46vw;
    animation: booking-nav-name-in 0.18s ease-out;
}

@keyframes booking-nav-name-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
    .booking-location-grid {
        grid-template-columns: 1fr;
    }

    .booking-location-card {
        /* Zona tocable cómoda en mobile sin inflar la card cuando el contenido es corto. */
        min-height: 88px;
    }
}

/* ── El footer apoyado en el piso ──────────────────────────────────────────────────────────────
   Sólo en las dos pantallas que renderizan el footer de TurnoBoost, y sólo cuando hace falta: con
   contenido más alto que la ventana, `margin-top: auto` no tiene espacio para repartir y no hace
   nada. `min-height` duplicado a propósito: `100dvh` descuenta la barra del navegador en mobile y
   `100vh` queda como fallback para el que no lo soporte. */
body.booking-page-has-footer {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.booking-page-has-footer > .tb-powered-by-footer {
    margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Riel de categorías: el acceso a "todas" y la señal de que la fila scrollea
   ═══════════════════════════════════════════════════════════════════════════
   El reporte de campo: la dueña saca turnos con el celular junto a la clienta y, cuando la
   clienta pide algo que no está en la categoría a la vista, ninguna de las dos encuentra el
   control que lleva al resto. El control ya estaba fuera del carril, pero era texto plano del
   mismo color y tamaño que las categorías, separado sólo por una divisoria de 1px: el ojo lo
   agrupaba con la lista. Esto revierte a propósito la decisión de "texto con divisor, no una
   píldora" — contra otros textos, una forma distinta separa y un tamaño distinto no.

   Va al final del archivo por el landmine de cascada de siempre: las reglas base de las tabs
   están más abajo que sus media queries de mobile, así que un override puesto arriba no hace
   nada. Base mobile + un min-width para desktop, en ese orden. */

.booking-tabs__all {
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12.5px;
    font-weight: 700;
    background: #fff;
    /* El TEXTO nunca va en el color de la marca. Sobre blanco, 9 de las 16 empresas pagas de la
       base no llegan a 4,5:1 con su acento. Medido en turnos_prod_copy. */
    color: #1f2430;

    /* El BORDE sí lleva la marca, pero mezclado con oscuro: es lo único que le da forma a la
       pastilla, y en crudo desaparece — 7 de esas 16 no llegan ni al 3:1 que pide un componente
       de interfaz, y la peor (#8ad3de) da 1,69:1. Al 65% el peor caso queda en 3,36:1 y el tono
       de la marca todavía se reconoce.
       Va `in srgb` y no `in oklab`: oklab preserva la luminosidad percibida, así que devuelve un
       color más claro que el que medí. El neutro de la línea de arriba es el fallback para quien
       no soporte color-mix (Safari < 16.2), y da 6,04:1. */
    border: 1.5px solid #5b6373;
    border-color: color-mix(in srgb, var(--primary-color) 65%, #16202b);
}

.booking-tabs__all i {
    font-size: 11px;
    color: #5b6373;
    color: color-mix(in srgb, var(--primary-color) 65%, #16202b);
}

/* Zona tocable de 44px sin engordar la pastilla: la fila entera mide ~40px y una pastilla de 44
   la estiraría, empujando los servicios abajo del pliegue. */
.booking-tabs__all::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
}

/* Apagado por JS al final del recorrido. Con opacidad y no con display para que no pegue un
   salto en el último tramo del arrastre. */
.booking-tabs__fade {
    transition: opacity 0.12s linear;
}

.booking-tabs__fade.is-hidden {
    opacity: 0;
}

/* Anillo de foco explícito. La página de reserva NO carga app.css, que es donde vive el
   `:focus-visible` global del panel, así que acá el foco depende del anillo por defecto del
   navegador — por eso los otros controles del selector declaran el suyo y este también.
   Mismo mezclado que el borde: un indicador de foco tiene que verse, y el acento en crudo no
   se ve en las marcas claras. */
.booking-tabs__all:focus-visible {
    outline: 2px solid #5b6373;
    outline: 2px solid color-mix(in srgb, var(--primary-color) 65%, #16202b);
    outline-offset: 2px;
}

/* El número es el que empuja a tocar: si a la vista hay dos categorías y el badge dice 4, la
   cuenta no cierra. "Ver todas" sin número no le discute nada a nadie. Neutro y no de marca por
   lo mismo que el texto: es un número de 11px, hay que poder leerlo. */
.booking-tabs__all-count {
    background: #f1f3f7;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 800;
    color: #1f2430;
}

/* ── Barra de progreso del carril ──────────────────────────────────────────────────────────
   El degradado del borde sólo comunica cuando tapa un chip a la mitad, y eso depende del largo
   de los nombres que cargó el negocio: si "HIFU" termina justo antes del borde, el degradado cae
   sobre espacio vacío y no dice nada. La barra no depende del recorte.

   Vive dentro del scroller, no del wrap: así el ancho y la posición que calcula el JS son
   porcentajes del mismo elemento que scrollea, sin factor de corrección, y no hay forma de que
   se pase por debajo del botón. Con `bottom: 0` no cuelga nada del borde inferior, así que el
   `overflow: hidden` del scroller no la recorta; y como el wrap estira a sus hijos, cae justo
   sobre su border-bottom sin sumar altura. */
.booking-tabs__progress {
    position: absolute;
    bottom: 0;
    height: 2.5px;
    border-radius: 2px;
    background: var(--primary-color);
    /* Tiene que sentirse pegada al dedo: cualquier cosa más lenta se lee como que la barra va
       por su cuenta. */
    transition: left 0.06s linear;
}

@media (min-width: 768px) {
    .booking-tabs__all {
        padding: 6px 12px;
        font-size: 13px;
    }

    .booking-tabs__all-slot {
        padding-left: 14px;
        margin-left: 12px;
    }
}

/* ── Cupón que se aplica solo: precio de lista tachado + precio final ──
   Mismo par en las tres superficies que muestran un precio de servicio: la tarjeta,
   el detalle del servicio y el banner del destacado. Si una sola quedara con el
   precio de lista, el mismo servicio diría dos precios distintos. */

.service-card__price-original,
.booking-detail__price-original,
.booking-featured__price-original {
    text-decoration: line-through;
    color: #9aa1b0;
    font-weight: 500;
    margin-right: 0.3rem;
}

.service-card__price-final,
.booking-detail__price-final,
.booking-featured__price-final {
    color: var(--primary-color);
    font-weight: 700;
}

.booking-multi-total-original {
    text-decoration: line-through;
    color: #9aa1b0;
    font-weight: 500;
    margin-right: 0.3rem;
}

.booking-multi-total-final {
    color: var(--primary-color);
    font-weight: 700;
}