/* ========================================
   ESTILOS DE LOS PLANOS (SVG)
   Compartidos por la web y la app móvil.
   Requiere las variables --brand, --ind y --fontBody/--fontTitle.
======================================== */

.planoSvg text{

    font-family:var(--fontBody);
    pointer-events:none;
}

.planoFondo{

    fill:#12131a;
}

/* formas */
.forma.escenario{ fill:#f4f4f6; }
.escenarioText{ fill:#111; font:900 20px var(--fontTitle); letter-spacing:4px; }

.forma.bloque{ fill:#2a2c35; }
.bloqueText{ fill:#c9cad1; font:800 13px var(--fontTitle); letter-spacing:2px; }
.bloqueText.small{ font-size:9px; }

.forma.foh{ fill:#000; }
.fohText{ fill:white; font:900 18px var(--fontTitle); }

.forma.vacio{ fill:rgba(255,255,255,0.02); stroke:#3a3d47; stroke-dasharray:6 6; stroke-width:1.5; }
.vacioText{ fill:#6b6e7a; font:700 11px var(--fontBody); letter-spacing:1px; }

.forma.marcoZona{ fill:none; stroke:var(--c); stroke-width:2; }

.filaText{ fill:#7c7f8c; font:700 10px var(--fontBody); }
.miniText{ fill:#a0a3ad; font:800 10px var(--fontBody); letter-spacing:1px; }

/* etiquetas laterales */
.pill{ cursor:pointer; transition:opacity 0.3s; }
.pill:hover rect{ filter:brightness(1.15); }
.pillText{ fill:var(--t); font:900 11px var(--fontTitle); letter-spacing:1.5px; }

/* franjas de palcos */
.band{ transition:opacity 0.3s; }
.band rect{ fill:var(--c); fill-opacity:0.14; stroke:var(--c); stroke-width:1.5; }
.band rect.bandStrip{ fill-opacity:1; stroke:none; }
.bandText{ fill:var(--t); font:900 9px var(--fontTitle); letter-spacing:1px; }

/* sillas */
.seat{ cursor:pointer; transition:opacity 0.3s; }
.seat circle{ fill:var(--c); stroke:rgba(0,0,0,0.25); stroke-width:1; transition:0.15s; }
.seat text{ fill:var(--t); font-weight:700; font-size:8.5px; }
.seat:hover circle{ stroke:white; stroke-width:2.5; }

.seat.sold{ cursor:not-allowed; }
.seat.sold circle{ fill:#2c2e36; stroke:none; }
.seat.sold text{ fill:#585b66; }

.seat.sel circle{ fill:white; stroke:var(--brand); stroke-width:3.5; }
.seat.sel text{ fill:var(--brand); font-weight:900; }

/* palcos */
.palco{ cursor:pointer; transition:opacity 0.3s; }
.palco rect{ fill:var(--c); stroke:rgba(255,255,255,0.35); stroke-width:1.2; transition:0.15s; }
.palco .palcoNum{ fill:var(--t); font:800 13px var(--fontTitle); }
.palco .palcoNum.small{ font-size:10px; }
.palco .palcoSub{ fill:var(--t); font-weight:700; font-size:8px; opacity:0.85; }
.palco:hover rect{ filter:brightness(1.18); stroke:white; stroke-width:2; }

.palco.ind rect{ fill:var(--ind); stroke:var(--c); stroke-width:3.5; filter:drop-shadow(0 0 6px rgba(16,185,129,0.65)); }
.palco.ind .palcoNum,
.palco.ind .palcoSub{ fill:white; }

.palco.sold rect{ fill:#2c2e36; stroke:#3a3d47; filter:none; }
.palco.sold .palcoNum,
.palco.sold .palcoSub{ fill:#585b66; }

.palco.sel rect{ fill:white; stroke:var(--brand); stroke-width:3.5; filter:none; }
.palco.sel .palcoNum,
.palco.sel .palcoSub{ fill:var(--brand); }

/* zonas generales */
.ga{ cursor:pointer; transition:opacity 0.3s; }
.ga rect{ fill:var(--c); fill-opacity:0.85; stroke:rgba(255,255,255,0.3); stroke-width:1.5; stroke-dasharray:5 4; }
.ga:hover rect{ fill-opacity:1; stroke:white; }
.gaText{ fill:var(--t); font:900 20px var(--fontTitle); letter-spacing:3px; }
.gaText.small{ font-size:18px; letter-spacing:0; }
.gaSub{ fill:var(--t); font-weight:700; font-size:10px; }
.ga.sel rect{ stroke:var(--brand); stroke-width:4; stroke-dasharray:none; }
.ga.sold rect{ fill:#2c2e36; }

/* filtros */
.dim{ opacity:0.12; pointer-events:none; }
.oculto{ opacity:0.04; pointer-events:none; }


/* apartada por otra persona que está pagando */
.seat.held circle{ fill:#5b4a2e; stroke:#f5b400; stroke-width:1.5; stroke-dasharray:2 2; }
.seat.held text{ fill:#c9b37a; }
.palco.held rect{ fill:#5b4a2e; stroke:#f5b400; stroke-dasharray:3 3; }

/* mapa de calor (panel de estadísticas): el plano en gris y el calor encima */
.modoCalor .seat circle,
.modoCalor .seat.sold circle{ fill:#262830; stroke:none; }
.modoCalor .seat text{ display:none; }
.modoCalor .palco rect,
.modoCalor .palco.sold rect{ fill:#262830; stroke:#33353f; filter:none; }
.modoCalor .palco text{ fill:#5f626e; }
.modoCalor .ga rect,
.modoCalor .ga.sold rect{ fill:#1d1f26; stroke:#33353f; }
.modoCalor .ga text{ fill:#5f626e; }
.modoCalor .band rect{ fill-opacity:0.06; }
.modoCalor .capaCalor{ pointer-events:none; mix-blend-mode:screen; }
.modoCalor .seat,
.modoCalor .palco,
.modoCalor .ga{ cursor:default; }

.modoCalor .palco.ind rect,
.modoCalor .palco.sel rect{ fill:#262830; stroke:#33353f; filter:none; }
.modoCalor .palco.ind text{ fill:#5f626e; }




/* ========================================
   AVISO DE EVENTO REAL (DEMOSTRACIÓN)
======================================== */

.avisoOficial{

    display:flex;
    gap:12px;
    align-items:flex-start;
    margin:14px 0;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,180,0,0.14);
    border:1px solid rgba(255,180,0,0.45);
    font-size:14px;
    line-height:1.45;
    text-align:left;
}

.avisoOficial > i{

    color:#f5b400;
    font-size:18px;
    margin-top:2px;
}

.avisoOficial a{

    color:#ff8a00;
    font-weight:700;
    text-decoration:underline;
}

.avisoOficial small{

    display:block;
    margin-top:4px;
    opacity:0.7;
    font-size:12px;
}