/* ===================================================================
   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; }

.guests-count {
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 2rem;
    color: var(--color-gold, #c9a227);
    font-weight: 700;
    line-height: 1;
}

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

/* 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;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.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;
    /* El alto real lo fija el JS según el bounding box escalado. */
    overflow: hidden;
}

/* 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);
}

.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. */
.table-item .table-content {
    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;
}

.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); }

.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; }
    .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; }
}