/* ===== Asientos: forma, estados y cuadrícula (colores de estado en seat-colors.css) ===== */
/* Tamaño controlado por variables: el diseñador usa los valores por defecto y el mapa los cambia con su zoom (data-zoom). */
:root {
    --seat-size: 22px;
    --seat-gap: 4px;
    --seat-font: 9px;
}

.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.35); vertical-align: middle; position: relative; }
.seat { width: var(--seat-size); height: var(--seat-size); border-radius: 30% 30% 15% 15%; border: 1px solid rgba(0,0,0,.4); font-size: var(--seat-font); line-height: calc(var(--seat-size) - 2px); text-align: center; padding: 0; color: #fff; font-weight: 700; cursor: pointer; position: relative; transition: transform .08s; }
.seat:hover { transform: scale(1.25); z-index: 3; }
.seat:focus-visible { outline: 3px solid var(--seat-selected); outline-offset: 1px; z-index: 4; }
.s-available { background-color: var(--seat-available); }
.s-reserved { background-color: var(--seat-reserved); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.3) 0 2px, transparent 2px 6px); color: #1a1a1a; border-color: #6d6300; }
.s-occupied { background-color: var(--seat-occupied); color: transparent; }
.s-occupied::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: calc(var(--seat-size) * .6); line-height: calc(var(--seat-size) - 2px); }
.swatch.s-occupied::after { line-height: 16px; font-size: 12px; }
.seat.sel { outline: 3px solid var(--seat-selected); outline-offset: 1px; z-index: 4; }
.seat.hl { outline: 3px dashed #000; outline-offset: 2px; z-index: 4; }
.seat.dim { opacity: .15; }
.seat.target { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }
.gap { width: var(--seat-size); height: var(--seat-size); display: block; }
.gap.ghost::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #cfd5df; margin: calc((var(--seat-size) - 4px) / 2) auto; }
.rowlab { width: var(--seat-size); height: var(--seat-size); font-size: max(8px, calc(var(--seat-font) + 1px)); color: #6b768c; text-align: center; line-height: var(--seat-size); font-weight: 700; }
.collab { width: var(--seat-size); font-size: max(7px, var(--seat-font)); color: #8a94a8; text-align: center; }
.seat-grid { display: grid; gap: var(--seat-gap); justify-content: start; }
.area-block { background: #fff; border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; }
.area-title { font-weight: 650; font-size: .9rem; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; }
.stage { background: #1d2433; color: #fff; text-align: center; letter-spacing: .4em; font-size: .75rem; font-weight: 700; padding: 10px; border-radius: 0 0 40px 40px; margin: 0 auto 22px; max-width: 520px; }
.map-scroll { overflow: auto; padding: 4px 4px 12px; }

/* ===== Zoom del mapa de asientos ===== */
[data-zoom="xs"] { --seat-size: 11px; --seat-gap: 2px; --seat-font: 0px; }
[data-zoom="sm"] { --seat-size: 15px; --seat-gap: 2px; --seat-font: 7px; }
[data-zoom="md"] { --seat-size: 18px; --seat-gap: 3px; --seat-font: 8px; }
[data-zoom="lg"] { --seat-size: 22px; --seat-gap: 4px; --seat-font: 9px; }
[data-zoom="xs"] .area-block, [data-zoom="sm"] .area-block { padding: 8px 10px; border-radius: 10px; }
[data-zoom="xs"] .area-title, [data-zoom="sm"] .area-title { font-size: .8rem; margin-bottom: 4px; }
[data-zoom="xs"] .stage, [data-zoom="sm"] .stage { padding: 6px; margin-bottom: 12px; font-size: .7rem; }
[data-zoom="xs"] .seat.sel, [data-zoom="sm"] .seat.sel { outline-width: 2px; }

/* ===== Diseñador ===== */
.d-seat { background: #7f8ba0; color: #fff; }
.d-disabled { background: #fff; border: 1px dashed #8a94a8; color: #8a94a8; font-size: 0; }
.d-disabled::after { content: "✕"; position: absolute; inset: 0; line-height: calc(var(--seat-size) - 2px); font-size: calc(var(--seat-size) / 2); }
.swatch.d-disabled::after { line-height: 16px; }
.d-acc { background: #5b3fb4; }

/* ===== Página del mapa: compacta en PC (el mapa se desplaza por dentro y el panel queda visible) ===== */
.stat-compact .stat { padding: 8px 12px; }
.stat-compact .stat .num { font-size: 1.3rem; }
.stat-compact [data-stat-summary] { margin-top: 4px !important; }
.seat-map-page .card-body[data-seat-map-filters] { padding: 10px 14px; }
/* The map column must be allowed to shrink; its content is wider than the screen and scrolls inside. */
.seat-map-page .col-xl { min-width: 0; }
@media (min-width: 1200px) {
    .seat-map-side { width: 300px; }
    .seat-map-canvas { max-height: calc(100vh - 305px); min-height: 360px; }
}