/* ===================================================================
   reserva.css
   Estilos del wizard de reservas (FASE 1.C).
   Reproduce el styling del prototipo validado (reserva.html).
   Depende de las variables CSS globales definidas en styles.css.
   =================================================================== */

.reservation-page {
    padding-top: 80px;
    min-height: 100vh;
    background-color: var(--color-black, #0d0d0d);
}

.reservation-header {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(13, 13, 13, 0.95) 100%);
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
    padding: 2rem 0;
}

.reservation-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reservation-brand-logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--color-gold, #c9a227);
}

.reservation-brand-info h1 {
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 1.5rem;
    color: var(--color-white, #fff);
    margin-bottom: 0.25rem;
}

.reservation-brand-info p {
    color: var(--color-gold, #c9a227);
    margin: 0;
    font-size: 0.9rem;
}

/* STEPPER */
.reservation-stepper {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 2rem 0;
    position: relative;
}

.reservation-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 200px;
}

.reservation-step::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--color-gray-dark, #2a2a2a);
    z-index: 0;
}

.reservation-step:last-child::after {
    display: none;
}

.reservation-step.completed::after {
    background-color: var(--color-gold, #c9a227);
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 2px solid var(--color-gray-medium, #444);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-gray-light, #aaa);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.reservation-step.active .step-circle,
.reservation-step.completed .step-circle {
    background-color: var(--color-gold, #c9a227);
    border-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
}

.step-label {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-gray-light, #aaa);
    text-align: center;
}

.reservation-step.active .step-label,
.reservation-step.completed .step-label {
    color: var(--color-gold, #c9a227);
}

/* CONTENEDOR PRINCIPAL */
.reservation-content {
    padding: 2rem 0 4rem;
}

.reservation-card {
    background-color: var(--color-charcoal, #1a1a1a);
    border: 1px solid var(--color-gray-dark, #2a2a2a);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.reservation-card-title {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* FORM SECTIONS */
.form-section { display: none; }
.form-section.active {
    display: block;
    animation: fadeInStep 0.4s ease forwards;
}

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

/* SEDE SELECTOR */
.sede-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.sede-carousel { display: none; }

/* Carrusel de sedes (Embla, solo móvil) */
.sede-carousel .embla__viewport { overflow: hidden; }
.sede-carousel .embla__container { display: flex; }
.sede-carousel .embla__slide { flex: 0 0 100%; min-width: 0; padding: 0 0.25rem; }
.sede-carousel .embla__dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.sede-carousel .embla__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gray-medium, #444);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.sede-carousel .embla__dot--active {
    background: var(--color-gold, #c9a227);
    transform: scale(1.2);
}

.sede-item {
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.sede-item:hover {
    border-color: var(--color-gold, #c9a227);
    transform: translateY(-2px);
}

.sede-item.selected {
    background-color: rgba(201, 162, 39, 0.15);
    border-color: var(--color-gold, #c9a227);
}

.sede-item-icon {
    font-size: 1.5rem;
    color: var(--color-gold, #c9a227);
    margin-bottom: 0.5rem;
}

.sede-item-name {
    color: var(--color-white, #fff);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.sede-item-address {
    font-size: 0.8rem;
    color: var(--color-gray-light, #aaa);
}

/* CARRUSEL FECHAS (Embla) */
.date-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.date-carousel .embla__viewport {
    overflow: hidden;
    padding: 0.25rem 0;
    flex: 1;
}
.date-carousel .embla__container {
    display: flex;
    gap: 0.5rem;
}
/* Slides de ancho automático (cada .date-item define su tamaño) — replica
   el width:auto que tenía Splide con perPage. */
.date-carousel .embla__slide {
    flex: 0 0 auto;
    min-width: 0;
}

/* Flechas custom (antes las creaba Splide) */
.date-carousel .embla__arrow {
    flex-shrink: 0;
    background-color: var(--color-charcoal, #1a1a1a);
    border: 1px solid var(--color-gold, #c9a227);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold, #c9a227);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.date-carousel .embla__arrow:hover:not(:disabled) {
    background-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
}
.date-carousel .embla__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.date-carousel .embla__arrow i {
    font-size: 0.85rem;
}

.date-item {
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.date-item:hover { border-color: var(--color-gold, #c9a227); }

.date-item.selected {
    background-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
}

.date-item .day-name {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.7;
}

.date-item.selected .day-name { opacity: 1; }

.date-item .day-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: inherit;
    line-height: 1;
}

.date-item .month {
    font-size: 0.75rem;
    color: inherit;
    opacity: 0.7;
}

.date-item.selected .month { opacity: 1; }

/* SELECTOR HORA */
.time-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
}

/* Los mensajes informativos (placeholder "selecciona sede y fecha", o
   "esta sede no atiende ese día") deben ocupar TODO el ancho del grid; si no,
   caen en una columna de ~80px y el texto se parte palabra por palabra,
   estirándose verticalmente. grid-column: 1/-1 = todas las columnas. */
.time-selector-message {
    grid-column: 1 / -1;
}

.time-item {
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-white, #fff);
    font-weight: 600;
}

.time-item:hover:not(.unavailable) { border-color: var(--color-gold, #c9a227); }

.time-item.selected {
    background-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
}

.time-item.unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Cupo por slot (jun-2026): "Agotado" / "¡quedan N!" */
.slot-cupo {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.3px;
    margin-top: 2px;
    color: #888;
    text-decoration: none;
}
.slot-cupo.pocas { color: var(--color-gold, #c9a227); }
.time-item.unavailable .slot-cupo { text-decoration: none; }

/* CONTADOR PERSONAS */
.guests-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.guests-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 2px solid var(--color-gold, #c9a227);
    color: var(--color-gold, #c9a227);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guests-btn:hover {
    background-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
}

.guests-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* sep-2026: .guests-count pasó de <div> a <input> escribible (llegar a 20
   costaba 18 toques en el "+"). Hay que neutralizar el fondo blanco, el borde
   y el ancho que el navegador le da a un input, o rompe el tema oscuro. */
.guests-count {
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 2rem;
    color: var(--color-gold, #c9a227);
    font-weight: 700;
    line-height: 1;
    width: 4ch;
    padding: 0;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px dashed rgba(201, 162, 39, 0.35);
    border-radius: 0;

}

/* El borde punteado es la única pista de que se puede escribir; al enfocar se
   vuelve sólido. Sin :focus-visible propio el foco sería invisible. */
.guests-count:focus {
    outline: none;
    border-bottom-color: var(--color-gold, #c9a227);
    border-bottom-style: solid;
}

.guests-label {
    font-size: 0.8rem;
    color: var(--color-gray-light, #aaa);
}

/* Aviso "esta sede tiene capacidad para N" bajo el contador. */
.guests-hint {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-gold, #c9a227);
    min-height: 1rem;
}

/* Aviso cuando TODOS los horarios del día salen agotados por el tamaño del
   grupo. Antes el cliente veía un muro de "Agotado" sin explicación. */
.grupo-grande-aviso {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    background: rgba(201, 162, 39, 0.08);
    color: var(--color-gray-light, #aaa);
    font-size: 0.85rem;
}

.grupo-grande-aviso a {
    color: var(--color-gold, #c9a227);
    text-decoration: underline;
}

/* Etiqueta "Única sede": la tarjeta no es una elección, es un dato. */
.sede-item-badge {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 39, 0.3);
    background: rgba(201, 162, 39, 0.12);
    color: var(--color-gold, #c9a227);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* FLOOR MAP */
.floor-map-container {
    background-color: var(--color-charcoal, #1a1a1a);
    border: 1px solid var(--color-gray-dark, #2a2a2a);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.floor-map-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-dark, #2a2a2a);
}

.floor-map-title {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
}

.floor-map-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-gray-light, #aaa);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.available { background-color: #22c55e; }
.legend-dot.occupied  { background-color: #6b7280; }
.legend-dot.selected  { background-color: var(--color-gold, #c9a227); }

.floor-map {
    display: grid;
    /* sep-2026: minmax(0, 1fr) y NO 1fr. En CSS Grid, `1fr` tiene como mínimo el
       ancho del contenido; el lienzo del plano mide lo mismo que en el Diseñador
       (~1300 px), así que la columna crecía hasta ese ancho, el plano desbordaba la
       tarjeta (tapando mesas con el Resumen) y el JS medía 1300 px disponibles y
       nunca lo achicaba. Con minmax(0, 1fr) la columna respeta el ancho real. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

/* Mismo motivo: un ítem de grilla tiene min-width:auto y se estira con su
   contenido. Con 0 queda limitado al ancho de la columna. */
.zone-block {
    min-width: 0;
}

.zone-label {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(201, 162, 39, 0.3);
    /* Separa la línea punteada de las mesas. Antes no había margen y el
       borde quedaba pegado a la primera fila del plano. */
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   PLANO FIEL (jul-2026)
   ───────────────────────────────────────────────────────────────────────
   Antes las mesas se apilaban en una grilla `auto-fill`, ignorando el
   layout que el admin arma en el Diseñador de Salón. El ERP guarda
   pos_x / pos_y / ancho / alto / rotacion en la tabla `mesas`, así que
   ahora se reproduce esa disposición tal cual.

   El contenedor es `position: relative` y cada mesa va en absoluto sobre
   él, igual que en el diseñador. El JS calcula el bounding box de la zona
   y aplica un `transform: scale()` al lienzo para que quepa en el ancho
   disponible sin recortar nada.
   ═══════════════════════════════════════════════════════════════════════ */
.zone-tables {
    position: relative;
    margin-bottom: 1rem;
    /* sep-2026: en pantallas angostas el plano no se achica por debajo de una
       escala mínima (si no, en un celular las mesas quedarían ilegibles e
       imposibles de tocar); en ese caso se desliza horizontalmente aquí dentro. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, 0.45) transparent;
}

.zone-tables::-webkit-scrollbar { height: 6px; }
.zone-tables::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.45);
    border-radius: 3px;
}

/* Caja con el tamaño YA ESCALADO del plano (la fija el JS). `transform` no
   cambia el tamaño que ocupa el lienzo en la página: sin esta caja, el área
   deslizable mediría el ancho original y siempre habría scroll de más. */
.zone-sizer {
    position: relative;
    overflow: hidden;
}

/* Aviso "Desliza para ver todo el salón": solo cuando el plano no entra. */
.zone-hint-scroll {
    display: none;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-gray, #9ca3af);
    margin: -0.75rem 0 0.5rem;
}

.zone-block.es-desplazable .zone-hint-scroll {
    display: flex;
}

/* Lienzo interno: conserva las coordenadas ORIGINALES del ERP y se
   reduce como bloque con transform-origin en la esquina superior
   izquierda. Escalar el lienzo (y no cada mesa) mantiene intactas las
   distancias relativas entre mesas. */
.zone-canvas {
    position: relative;
    transform-origin: top left;
}

.table-item {
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 0.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    /* Absoluto: el JS pone left/top/width/height/rotate desde la BD. */
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.15rem;
    overflow: hidden;
}

.table-item.available { border-color: rgba(34, 197, 94, 0.3); }

/* Sin translateY: la mesa está posicionada en absoluto y moverla la
   sacaría de su ubicación real en el plano. Se resalta con sombra. */
.table-item.available:hover {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.table-item.occupied {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgba(107, 114, 128, 0.3);
}

/* sep-2026 (Bloque B): mesa LIBRE pero demasiado grande para el grupo habiendo
   otra más ajustada disponible. Se distingue de .occupied (que está tomada)
   porque aquí el motivo es la capacidad, no la ocupación. */
.table-item.no-apta {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
    border-color: rgba(107, 114, 128, 0.45);
}

.table-item.selected {
    background-color: rgba(201, 162, 39, 0.2);
    border-color: var(--color-gold, #c9a227);
    box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

/* La forma ya no altera el tamaño (ancho/alto vienen del ERP): solo el
   borde. "larga" se ve larga porque su `ancho` en BD es mayor. */
.table-item[data-forma="redonda"] { border-radius: 50%; }
.table-item[data-forma="larga"]   { border-radius: 10px; }

/* El contenido se contra-rota para que el texto se lea horizontal aunque
   la mesa esté girada, igual que en el Diseñador de Salón.
   sep-2026: además se re-agranda con --contra-escala (la fija el JS según cuánto
   se achicó el plano), así el número y la capacidad se leen aunque el plano
   entero esté al 40-60%. La rotación va por --rot (inline por mesa). */
.table-item .table-content {
    transform: rotate(var(--rot, 0deg)) scale(var(--contra-escala, 1));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    pointer-events: none;
}

.table-status-icon {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

/* sep-2026: plano muy reducido (lo decide el JS). Se quita el ícono para que
   número y capacidad tengan lugar, como en el Diseñador de Salón; el estado se
   sigue viendo por el borde (verde / gris atenuado / dorado). */
.zone-canvas.plano-compacto .table-status-icon {
    display: none;
}

/* En compacto el relleno y el interlineado se ajustan: deja más lugar para que
   el JS agrande el número (sobre todo en las mesas redondas, que tienen menos
   espacio útil que las cuadradas). */
.zone-canvas.plano-compacto .table-item {
    padding: 2px;
}

.zone-canvas.plano-compacto .table-content {
    gap: 0.1rem;
}

.zone-canvas.plano-compacto .table-number,
.zone-canvas.plano-compacto .table-capacity {
    line-height: 1.1;
}

.table-item.available .table-status-icon { color: #22c55e; }
.table-item.occupied  .table-status-icon { color: #6b7280; }
.table-item.selected  .table-status-icon { color: var(--color-gold, #c9a227); }

.table-number {
    font-weight: 700;
    color: var(--color-white, #fff);
    font-size: 1.1rem;
}

.table-capacity {
    font-size: 0.75rem;
    color: var(--color-gray-light, #aaa);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.capacity-warning {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.tables-selected-indicator {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(201, 162, 39, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tables-selected-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tables-selected-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.tables-selected-text h5 {
    margin: 0;
    color: var(--color-white, #fff);
    font-size: 0.95rem;
}

.tables-selected-text p {
    margin: 0;
    color: var(--color-gray-light, #aaa);
    font-size: 0.8rem;
}

.tables-selected-numbers {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.table-badge {
    padding: 0.25rem 0.6rem;
    background-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* FORM PASO 3 */
.reservation-form .form-label {
    color: var(--color-gray-light, #aaa);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.reservation-form .form-control,
.reservation-form .form-control:focus {
    background-color: var(--color-gray-dark, #2a2a2a);
    border-color: var(--color-gray-medium, #444);
    color: var(--color-white, #fff);
}

.reservation-form .form-control:focus {
    border-color: var(--color-gold, #c9a227);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.15);
}

.reservation-form .form-control::placeholder {
    color: var(--color-gray-light, #888);
}

.reservation-form textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* RESUMEN LATERAL */
.reservation-summary {
    background-color: var(--color-charcoal, #1a1a1a);
    border: 1px solid var(--color-gold, #c9a227);
    border-radius: 12px;
    padding: 1.5rem;
    position: sticky;
    top: 100px;
}

.summary-title {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-gray-dark, #2a2a2a);
}

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

.summary-label {
    color: var(--color-gray-light, #aaa);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.summary-value {
    color: var(--color-white, #fff);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.summary-value.highlight { color: var(--color-gold, #c9a227); }

.summary-empty {
    color: var(--color-gray-light, #888);
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
}

/* ACCIONES */
.reservation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.reservation-actions .btn {
    flex: 1;
    min-width: 140px;
}

/* CONFIRMACIÓN PASO 4 */
.confirmation-section {
    background-color: var(--color-charcoal, #1a1a1a);
    border: 1px solid var(--color-gold, #c9a227);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 600px;
    margin: 2rem auto;
}

.confirmation-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-gold, #c9a227);
    color: var(--color-black, #0d0d0d);
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.confirmation-title {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    margin-bottom: 0.5rem;
}

.confirmation-subtitle {
    color: var(--color-gray-light, #aaa);
    margin-bottom: 2rem;
}

.confirmation-details {
    background-color: var(--color-gray-dark, #1f1f1f);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.confirmation-code {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(201, 162, 39, 0.3);
}

.confirmation-code-label {
    font-size: 0.8rem;
    color: var(--color-gray-light, #aaa);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.confirmation-code-value {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
}

/* MODAL DE PAGO */
.payment-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.payment-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(201, 162, 39, 0.15);
    color: var(--color-gold, #c9a227);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.payment-modal-title {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    margin-bottom: 0.25rem;
}

.payment-modal-subtitle {
    color: var(--color-gray-light, #aaa);
    font-size: 0.9rem;
    margin: 0;
}

.payment-amount-box {
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.payment-amount-label {
    font-size: 0.8rem;
    color: var(--color-gray-light, #aaa);
    text-transform: uppercase;
}

.payment-amount-value {
    font-family: var(--font-heading, 'Cinzel', serif);
    color: var(--color-gold, #c9a227);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.payment-amount-note {
    font-size: 0.75rem;
    color: var(--color-gray-light, #888);
    font-style: italic;
}

.payment-method-label {
    color: var(--color-white, #fff);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.payment-method-option {
    background-color: var(--color-gray-dark, #2a2a2a);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.payment-method-option:hover { border-color: var(--color-gold, #c9a227); }

/* sep-2026: Yape sobre su tope por operación (mismo criterio que .ck-option.disabled del checkout). */
.payment-method-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.payment-method-option.disabled:hover { border-color: transparent; }

.payment-method-option.selected {
    background-color: rgba(201, 162, 39, 0.1);
    border-color: var(--color-gold, #c9a227);
}

.payment-method-radio { flex-shrink: 0; }

.payment-method-radio input[type="radio"] { display: none; }

.payment-method-radio .radio-custom {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-medium, #444);
    display: inline-block;
    position: relative;
}

.payment-method-option.selected .radio-custom { border-color: var(--color-gold, #c9a227); }

.payment-method-option.selected .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-gold, #c9a227);
}

.payment-method-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white, #fff);
    flex-shrink: 0;
}

.payment-method-icon.card-icon { background-color: #4f46e5; }
.payment-method-icon.yape-icon { background-color: #8b5cf6; }

.payment-method-info { flex: 1; }

.payment-method-info h5 {
    color: var(--color-white, #fff);
    font-size: 0.9rem;
    margin: 0 0 0.15rem;
}

.payment-method-info p {
    color: var(--color-gray-light, #aaa);
    font-size: 0.75rem;
    margin: 0;
}

.payment-card-form,
.payment-yape-instructions {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--color-gray-dark, #1f1f1f);
    border-radius: 8px;
}

.payment-card-form .form-control,
.payment-yape-instructions .form-control {
    background-color: var(--color-charcoal, #1a1a1a);
    border-color: var(--color-gray-medium, #444);
    color: var(--color-white, #fff);
}

.payment-card-form .form-control:focus,
.payment-yape-instructions .form-control:focus {
    border-color: var(--color-gold, #c9a227);
    box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.15);
}

.payment-card-form .input-group-text {
    background-color: var(--color-charcoal, #1a1a1a);
    border-color: var(--color-gray-medium, #444);
    color: var(--color-gold, #c9a227);
}

.yape-qr-section { text-align: center; }

.yape-qr-placeholder {
    width: 120px;
    height: 120px;
    background-color: var(--color-charcoal, #1a1a1a);
    border: 2px dashed var(--color-gray-medium, #444);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--color-gray-light, #888);
    font-size: 0.7rem;
}

.yape-qr-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.yape-or-divider {
    position: relative;
    margin: 1rem 0;
    color: var(--color-gray-light, #888);
    font-size: 0.8rem;
}

.yape-or-divider::before,
.yape-or-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background-color: var(--color-gray-medium, #444);
}

.yape-or-divider::before { left: 0; }
.yape-or-divider::after  { right: 0; }

.yape-number-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--color-charcoal, #1a1a1a);
    border: 1px solid var(--color-gold, #c9a227);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
}

.yape-number-box i { color: var(--color-gold, #c9a227); }

.yape-number {
    color: var(--color-white, #fff);
    font-weight: 600;
}

.btn-copy-number {
    border: none;
    background: transparent;
    color: var(--color-gold, #c9a227);
    cursor: pointer;
}

.payment-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--color-gray-light, #aaa);
    font-size: 0.75rem;
}

.payment-security i { color: #22c55e; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .reservation-stepper { gap: 0.5rem; }
    .step-label { font-size: 0.7rem; }
    .reservation-step { max-width: 110px; }
    .sede-selector { display: none; }
    .sede-carousel { display: block; }
    /* sep-2026: con UNA sola sede el carrusel no se renderiza (una tarjeta con
       un punto es ruido), así que el grid tiene que seguir visible en móvil.
       Sin esta regla el usuario de móvil se quedaría sin ninguna tarjeta de
       sede: peor que el problema que vinimos a arreglar. */
    .sede-selector.sede-selector--unica { display: grid; }
    .reservation-summary { position: static; margin-top: 1rem; }
    .reservation-actions { flex-direction: column-reverse; }
    .reservation-actions .btn { width: 100%; }
}

@media (max-width: 576px) {
    .reservation-page { padding-top: 70px; }
    .step-label { display: none; }
}