/* web/showmap.css — estilos del mapa de asientos (backoffice y app). Variables --sm-* para adaptar el tema. */
.sm-svg {
  --sm-ink: #E8EFEA; --sm-muted: #8D9A93; --sm-faint: #5E6B64; --sm-surface: #0F1613; --sm-taken: #38404A; --sm-line: rgba(255, 255, 255, .16);
  --sm-seat-ink: #10150F; --sm-stage: #261D4E; --sm-stage-line: #A78BFA;
  display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: 0;
}
[data-theme="light"] .sm-svg {
  --sm-ink: #1B2420; --sm-muted: #55625B; --sm-faint: #8B968F; --sm-surface: #F4F6F3; --sm-taken: #C3CAD1; --sm-line: rgba(0, 0, 0, .18);
  --sm-seat-ink: #FFFFFF; --sm-stage: #E4DDFB; --sm-stage-line: #6D28D9;
}
.sm-svg.is-panning { cursor: grabbing; }
.sm-svg text { font-family: inherit; text-anchor: middle; pointer-events: none; }
.sm-svg * { vector-effect: non-scaling-stroke; }

/* ----- sillas ----- */
.sm-seat { fill: var(--c, #F4C95D); stroke: rgba(0, 0, 0, .4); stroke-width: 1; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .14s, fill .16s, opacity .16s; }
.sm-seat.is-open:hover { transform: scale(1.3); filter: brightness(1.2); }
.sm-seat.is-taken { fill: var(--sm-taken); stroke: transparent; cursor: not-allowed; opacity: .75; }
.sm-seat.is-held { fill: #7a6a2f; stroke: #F4C95D; stroke-dasharray: 2 2; cursor: not-allowed; opacity: .85; }
.sm-seat.is-blocked { fill: transparent; stroke: var(--sm-line); stroke-dasharray: 2 3; cursor: default; }
.sm-seat.is-sel { fill: #FFFFFF; stroke: var(--c, #F4C95D); stroke-width: 3; transform: scale(1.28); filter: drop-shadow(0 0 5px var(--c, #F4C95D)); }
[data-theme="light"] .sm-seat.is-sel { fill: #111; }
.sm-seat.is-acc:not(.is-taken):not(.is-blocked) { stroke: #38BDF8; stroke-width: 2; }
.sm-sn { display: none; fill: var(--sm-seat-ink); font-size: 8.5px; font-weight: 800; }
.sm-svg.z-hi .sm-sn { display: block; }
.sm-svg.z-hi .sm-seat.is-sel + .sm-sn { fill: #111; }
[data-theme="light"] .sm-svg.z-hi .sm-seat.is-sel + .sm-sn { fill: #fff; }
.sm-svg.z-hi .sm-seat.is-taken + .sm-sn, .sm-svg.z-hi .sm-seat.is-held + .sm-sn, .sm-svg.z-hi .sm-seat.is-blocked + .sm-sn { fill: var(--sm-faint); }

/* ----- mesas y filas ----- */
.sm-tbody { fill: color-mix(in srgb, var(--c, #F4C95D) 13%, var(--sm-surface)); stroke: var(--c, #F4C95D); stroke-width: 1.5; }
.sm-tlabel { fill: var(--c, #F4C95D); font-size: 15px; font-weight: 800; }
.sm-rlabel { fill: var(--sm-muted); font-size: 12px; font-weight: 800; }
.sm-table[data-sale="table"] .sm-tbody { stroke-dasharray: 5 3; }

/* ----- zonas de pie ----- */
.sm-zbody { fill: color-mix(in srgb, var(--c, #34D399) 13%, transparent); stroke: var(--c, #34D399); stroke-width: 1.5; stroke-dasharray: 7 5; cursor: pointer; transition: fill .18s; }
.sm-zone:hover .sm-zbody { fill: color-mix(in srgb, var(--c, #34D399) 24%, transparent); }
.sm-zone.is-sel .sm-zbody { fill: color-mix(in srgb, var(--c, #34D399) 38%, transparent); stroke-dasharray: none; stroke-width: 2.5; }
.sm-zone.is-soldout .sm-zbody { cursor: not-allowed; fill: transparent; opacity: .5; }
.sm-zlabel { fill: var(--c, #34D399); font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.sm-zcount { fill: var(--sm-muted); font-size: 12.5px; font-weight: 700; }

/* ----- escenario, áreas y textos ----- */
.sm-stbody { fill: var(--sm-stage); stroke: var(--sm-stage-line); stroke-width: 2; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--sm-stage-line) 55%, transparent)); }
.sm-stlabel { fill: var(--sm-ink); font-size: 20px; font-weight: 900; letter-spacing: .22em; }
.sm-abody { fill: color-mix(in srgb, var(--sm-ink) 5%, transparent); stroke: var(--sm-line); stroke-dasharray: 4 4; }
.sm-aemoji { font-size: 20px; }
.sm-alabel { fill: var(--sm-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; }
.sm-txt { fill: var(--sm-muted); font-weight: 800; }

/* ----- filtros y resaltado ----- */
.sm-el { transition: opacity .2s; }
.sm-el.is-dim { opacity: .14; pointer-events: none; }
.sm-el.is-hl .sm-tbody, .sm-el.is-hl .sm-zbody { stroke-width: 3; }

@media (prefers-reduced-motion: reduce) { .sm-seat, .sm-el, .sm-zbody { transition: none !important; } }