/* El Sarao Pub · plano del local (assets/js/plano.js). Lo cargan la página de reservas y el panel.
   Las mesas de cada zona llevan su color; la zona elegida se enciende como una luz de tarima. */

:root {
  --z0: #F8B800;            /* Zona 1: dorado de la corona */
  --z1: #9A85FF;            /* Zona 2: violeta del letrero, aclarado para contraste sobre la noche */
}
.pl-z0 { --zc: var(--z0); }
.pl-z1 { --zc: var(--z1); }

/* La carta y el panel dan a todo svg trazo, relleno nulo y 18-20 px: el plano no hereda nada de eso. */
svg.pl { display: block; width: 100%; height: auto; stroke: none; fill: none; stroke-width: 0; }

.pl-floor { fill: #101922; }
.pl-gridline { fill: none; stroke: rgba(244, 239, 248, .035); stroke-width: 2; }
.pl-wall { fill: none; stroke: #3A4652; stroke-width: 14; stroke-linecap: square; }
.pl-pillar { fill: #3A4652; }
.pl-stage { fill: rgba(107, 77, 255, .1); stroke: #6B4DFF; stroke-width: 3; stroke-dasharray: 14 10; }
.pl-bar { fill: #26323E; stroke: #3A4652; stroke-width: 2; }
.pl-door { fill: none; stroke: var(--crown); stroke-width: 3; stroke-dasharray: 8 8; opacity: .7; }
.pl-label { fill: var(--muted); font: 600 28px var(--body); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.pl-label-stage { fill: #B9AAFF; font: 800 44px var(--display); letter-spacing: .04em; }
.pl-label-bar { fill: var(--paper); font-size: 30px; }
.pl-label-small { font-size: 22px; }

.pl-table { cursor: pointer; transition: opacity .25s; }
.pl-table.pl-znone { --zc: #6C7784; }
.pl-halo { fill: var(--zc); opacity: 0; transition: opacity .3s; }
.pl-chair { fill: #2C3946; }
.pl-top { fill: color-mix(in srgb, var(--zc) 26%, #121C25); stroke: var(--zc); stroke-width: 4; transition: fill .3s; }
.pl-num { fill: var(--paper); font: 900 38px var(--display); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.pl-cap { fill: var(--muted); font: 600 18px var(--body); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.pl-table.is-dim { opacity: .38; }
.pl-table.is-selected .pl-halo { opacity: .16; }
.pl-table.is-selected .pl-top { fill: var(--zc); }
.pl-table.is-selected .pl-chair { fill: color-mix(in srgb, var(--zc) 45%, #2C3946); }
.pl-table.is-full { cursor: not-allowed; }
.pl-table.is-full .pl-top { fill: #18222C; stroke: #33404C; stroke-dasharray: 10 8; }
.pl-table.is-full .pl-chair { fill: #1F2A35; }
@media (prefers-reduced-motion: no-preference) {
  .pl-table.is-selected .pl-halo { animation: pl-spot 2.4s ease-in-out infinite; }
}
@keyframes pl-spot { 50% { opacity: .3; } }