/* Cambio de asiento — estilos del frontend (mapa Snap.svg, modelo rzlv-lfp-tickets).
   Colores de MARCA los pone el tema (botones .btn-*); aquí solo neutros + colores
   funcionales de asiento (libre/ocupado/elegido). */

/* ============ Layout general ============ */
.rzlv-sc .rzlv-sc-card {
    border: 1px solid #e9ecef;
    border-radius: .6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.rzlv-sc .rzlv-sc-card .card-header { border-bottom: 1px solid #eef0f2; }

/* Panel lateral fijo en escritorio */
@media (min-width: 992px) {
    .rzlv-sc .rzlv-sc-side { position: sticky; top: 20px; }
}

/* ============ Indicador de pasos ============ */
.rzlv-sc-steps {
    display: flex;
    max-width: 620px;
    margin: 0 auto 1.75rem;
    padding: 0;
}
.rzlv-sc-step {
    flex: 1;
    text-align: center;
    position: relative;
    color: #adb5bd;
    font-size: .9rem;
    line-height: 1.2;
}
.rzlv-sc-step::before {
    content: "";
    position: absolute;
    top: 17px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #dee2e6;
    z-index: 0;
}
.rzlv-sc-step:first-child::before { display: none; }
.rzlv-sc-step-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: #fff;
    color: #adb5bd;
    font-weight: 700;
    margin-bottom: .4rem;
    transition: all .2s ease;
}
.rzlv-sc-step-label { display: block; }
.rzlv-sc-step.is-active { color: #212529; font-weight: 600; }
.rzlv-sc-step.is-active .rzlv-sc-step-num { border-color: #212529; background: #212529; color: #fff; }
.rzlv-sc-step.is-done { color: #6c757d; }
.rzlv-sc-step.is-done .rzlv-sc-step-num { border-color: #212529; background: #212529; color: #fff; }
.rzlv-sc-step.is-active::before,
.rzlv-sc-step.is-done::before { background: #212529; }

/* ============ Mapa ============ */
.rzlv-sc #rzlv-sc-stadium svg { max-width: 100%; height: auto; }
.rzlv-sc #rzlv-sc-stadium { min-height: 200px; }

/* Ocultar el botón "volver" que trae el propio SVG (#m<sectorId>-back, p. ej. mPRE-01-back):
   usamos nuestro botón "Volver al estadio" del panel. */
.rzlv-sc #rzlv-sc-stadium [id$="-back"] { display: none !important; }

/* Overlay de carga sobre el mapa */
.rzlv-sc .rzlv-sc-map-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .65);
    z-index: 5;
}

/* ---- Jerarquía: "asiento actual" secundario, "asiento seleccionado" protagonista ---- */

/* Asiento actual: plano y discreto (información de referencia). */
.rzlv-sc .rzlv-sc-current-card { background: #f8f9fa; box-shadow: none; border-color: #eceff1; }
.rzlv-sc .rzlv-sc-current-card .card-header { background: transparent !important; border-bottom: 0; padding-bottom: .25rem; }
.rzlv-sc .rzlv-sc-current-card .card-header strong { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: #98a2ac; }
.rzlv-sc .rzlv-sc-current-card .rzlv-sc-seatbox-area { color: #868e96; font-weight: 600; font-size: .92rem; }
.rzlv-sc .rzlv-sc-current-card .rzlv-sc-pill { background: #eceef0; color: #8a929a; }
.rzlv-sc .rzlv-sc-current-card .rzlv-sc-pill strong { color: #6c757d; }

/* Asiento seleccionado: destacado (borde + tinte + elevación + textos con más peso). */
.rzlv-sc .rzlv-sc-selection-card {
    border: 2px solid #28a745;
    background: #fbfffc;
    box-shadow: 0 8px 24px rgba(40, 167, 69, .14);
}
.rzlv-sc .rzlv-sc-selection-card .text-uppercase { color: #1e7e34 !important; font-weight: 700; letter-spacing: .06em !important; }
.rzlv-sc .rzlv-sc-selection-card .rzlv-sc-seatpills { margin-top: .25rem; }
.rzlv-sc .rzlv-sc-selection-card .rzlv-sc-pill { font-size: .92rem; padding: .3rem .85rem; background: #e9f7ee; color: #2f6b3d; }
.rzlv-sc .rzlv-sc-selection-card .rzlv-sc-pill strong { color: #1e7e34; }

/* Botón CTA (usa el verde del club del tema vía .theme-btn.bg-btn); estado deshabilitado */
.rzlv-sc .btn.theme-btn:disabled,
.rzlv-sc .btn.theme-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============ Resumen (vista 2) ============ */
.rzlv-sc .rzlv-sc-seatcompare { display: flex; align-items: stretch; gap: .75rem; margin-bottom: 1.5rem; }
.rzlv-sc .rzlv-sc-seatbox {
    flex: 1;
    border: 1px solid #e9ecef;
    border-radius: .55rem;
    padding: 1rem .75rem;
    text-align: center;
    background: #fafbfc;
}
.rzlv-sc .rzlv-sc-seatbox.is-new { border-color: #ced4da; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.rzlv-sc .rzlv-sc-seatbox-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #adb5bd; margin-bottom: .5rem; }
.rzlv-sc .rzlv-sc-seatbox-area { font-weight: 600; color: #495057; }
.rzlv-sc .rzlv-sc-seatarrow { display: flex; align-items: center; color: #adb5bd; font-size: 1.6rem; }

/* Fila / Butaca como pastillas sutiles */
.rzlv-sc .rzlv-sc-seatpills { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.rzlv-sc .rzlv-sc-pill {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    background: #f1f3f5;
    color: #868e96;
    border-radius: 999px;
    padding: .22rem .7rem;
    font-size: .8rem;
}
.rzlv-sc .rzlv-sc-pill strong { color: #343a40; font-weight: 600; }

.rzlv-sc .rzlv-sc-amount-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #f1f3f5; color: #495057; }
.rzlv-sc .rzlv-sc-amount-row:last-child { border-bottom: 0; }

.rzlv-sc .rzlv-sc-total { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.1rem; background: #f8f9fa; border-radius: .55rem; margin-top: .5rem; }
.rzlv-sc .rzlv-sc-total-label { font-weight: 600; color: #495057; }
.rzlv-sc .rzlv-sc-total-amount { font-size: 1.45rem; font-weight: 700; color: #343a40; }

.rzlv-sc .rzlv-sc-freenote { margin-top: 1rem; padding: .75rem 1rem; background: #eef7f0; border-left: 4px solid #28a745; border-radius: .35rem; color: #2f5233; }

/* ---- Sectores (vista general del estadio) ---- */
.rzlv-sc .area-available { cursor: pointer; transition: opacity .15s ease; }
.rzlv-sc .area-available:hover,
.rzlv-sc .area-available:hover rect,
.rzlv-sc .area-available:hover path { opacity: .75; }

/* Sectores no habilitados: apagados y sin interacción */
.rzlv-sc .area-no-available,
.rzlv-sc .area-no-available rect,
.rzlv-sc .area-no-available path,
.rzlv-sc .area-no-available polygon {
    fill: #c9c9c9 !important;
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

/* Sector del asiento actual del socio */
.rzlv-sc .area-current,
.rzlv-sc .area-current rect,
.rzlv-sc .area-current path { stroke: #e0a800; stroke-width: 2; }

/* ---- Asientos (vista de detalle del área) ---- */
.rzlv-sc .seat-available { fill: #28a745 !important; cursor: pointer; }
.rzlv-sc .seat-available:hover { fill: #1e7e34 !important; }
.rzlv-sc .seat-busy { fill: #d0d0d0 !important; pointer-events: none; cursor: default; }
.rzlv-sc .seat-active { fill: #0d6efd !important; cursor: pointer; }
.rzlv-sc .seat-current { stroke: #e0a800; stroke-width: 2; }

/* ============ Responsive ============ */
@media (max-width: 575px) {
    .rzlv-sc-step { font-size: .74rem; }
    .rzlv-sc-step-num { width: 30px; height: 30px; }
    .rzlv-sc-step::before { top: 14px; }
    .rzlv-sc .rzlv-sc-seatcompare { flex-direction: column; }
    .rzlv-sc .rzlv-sc-seatarrow { justify-content: center; transform: rotate(90deg); }

    /* Móvil: el mapa a ancho completo — sin borde ni padding lateral de la tarjeta, para
       que el SVG se vea más grande. El resto de tarjetas (asiento actual, selección) no cambian. */
    .rzlv-sc .rzlv-sc-map-card { border: 0; box-shadow: none; }
    .rzlv-sc .rzlv-sc-map-card .card-header { padding-left: .5rem; padding-right: .5rem; }
    .rzlv-sc .rzlv-sc-map-card .card-body { padding-left: 0; padding-right: 0; }
    /* Contrarresta el gutter de la columna para acercar el mapa a los bordes de la pantalla. */
    .rzlv-sc .rzlv-sc-map-card .card-body #rzlv-sc-stadium { margin-left: -.75rem; margin-right: -.75rem; }

    /* "Volver al estadio" centrado en móvil (envuelve a su propia línea en el header). */
    .rzlv-sc #rzlv-sc-map-back { margin-left: auto; margin-right: auto; }

    /* (3) Reordenar en móvil: el panel de selección en flujo se sustituye por la barra fija,
       y la "Vista de referencia" queda al final (secundaria). "Tu asiento actual" sigue arriba. */
    .rzlv-sc .rzlv-sc-selection-card { display: none; }

    /* (1) Barra de acción fija abajo: aparece (desliza) al elegir butaca.
       Fondo oscuro (neutro de marca, como el admin) para que destaque; el botón verde del
       tema resalta sobre él. Esquinas superiores redondeadas + sombra elevada (tipo sheet). */
    .rzlv-sc-mobilebar {
        display: flex;
        align-items: center;
        gap: .85rem;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        background: #1d2327;
        border-top: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .32);
        padding: .8rem .9rem calc(.8rem + env(safe-area-inset-bottom));
        transform: translateY(110%);
        transition: transform .22s ease;
    }
    .rzlv-sc-mobilebar.is-visible { transform: translateY(0); }
    .rzlv-sc-mobilebar-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
    .rzlv-sc-mobilebar-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5); margin-bottom: .12rem; }
    .rzlv-sc-mobilebar-seat { font-weight: 700; color: #fff; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rzlv-sc-mobilebar .btn { flex: 0 0 auto; white-space: nowrap; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }

    /* Reserva espacio al final para que la barra no tape el último bloque al hacer scroll. */
    #rzlv-sc-select.rzlv-sc-has-bar { padding-bottom: 84px; }

    /* Sube el FAB de logout del base (#rzlvFabLogout) para que la barra no lo tape. */
    #rzlvFabLogout.rzlv-sc-fab-raised { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* La barra solo se muestra en móvil; en escritorio (≥576px) nunca. */
@media (min-width: 576px) {
    .rzlv-sc-mobilebar { display: none; }
}

/* ================= Pestaña única (overlay bloqueante) ================= */
#rzlv-sc-tablock {
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* por encima de todo */
    background: rgba(20, 25, 30, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#rzlv-sc-tablock .rzlv-sc-tablock-box {
    background: #ffffff;
    border-radius: 14px;
    max-width: 460px;
    width: 100%;
    padding: 30px 28px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
#rzlv-sc-tablock .rzlv-sc-tablock-icon {
    font-size: 42px;
    line-height: 1;
    color: #d9822b;
    margin-bottom: 10px;
}
#rzlv-sc-tablock h3 {
    margin: 0 0 12px 0;
    font-size: 20px;
    color: #1d2327;
}
#rzlv-sc-tablock p {
    margin: 0 0 18px 0;
    color: #555;
    font-size: 15px;
    line-height: 1.55;
}
#rzlv-sc-tablock .rzlv-sc-tablock-close,
#rzlv-sc-tablock #rzlv-sc-tablock-close {
    background: #1d2327;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
#rzlv-sc-tablock #rzlv-sc-tablock-close:hover { background: #333a40; }
#rzlv-sc-tablock .rzlv-sc-tablock-note {
    margin: 14px 0 0 0;
    font-size: 12px;
    color: #8a94a3;
}