.venue-map {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ── Mapa SVG ── */
.venue-map__svg-container {
  width: 100%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.venue-map__svg-container svg {
  width: 100%;
  height: auto;
  display: block;
}

/* El SVG del plano lo sube el productor y puede traer font-family propio (o
   ninguno, cayendo al serif por default del browser) en los <text> de las
   etiquetas de sector — forzamos la tipografía de la plataforma (misma que
   public/styles/main.css) sin importar lo que traiga el SVG. Cubre tanto el
   mapa completo como el mini-mapa (--mini agrega la clase, no la reemplaza). */
.venue-map__svg-container svg text {
  font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
}
.venue-map__svg-container svg text#ESCENARIO {
  letter-spacing: 3px;
}

/* ── Fila mini-mapa + imagen del sector (vista de elección de asiento) ── */
/* Alto fijo para la fila: sin esto, "height:100%" en los hijos flex no tiene contra
   qué resolverse (el alto del row queda en auto) y la imagen renderiza a su alto
   intrínseco en vez de cropearse — quedaba gigante. Con un alto fijo acá, tanto el
   mini-mapa como la imagen se recortan a ese mismo alto. */
.venue-map__mini-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 100px;
  margin-top: 12px;
}

/* Al entrar a un sector no ocultamos el SVG: lo achicamos y lo anclamos como
   referencia de ubicación, con todos los sectores en gris salvo el activo en violeta
   (ver applyMiniMapColors en VenueMapRenderer). */
.venue-map__svg-container--mini {
  flex: 0 0 25%;
  height: 100%;
  padding: 6px;
  background: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 0.5rem;
  pointer-events: none;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* El SVG del mini-mapa escala por alto (no por ancho, como en la vista completa) para
   llenar los 140px de la fila sin distorsionarse; overflow:hidden del padre recorta el
   sobrante horizontal si el plano es más ancho que alto. */
.venue-map__svg-container--mini svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* ── Sector interactivo ── */
.venue-sector {
  cursor: pointer;
  transition: filter 0.15s ease;
}

.venue-sector:hover {
  filter: brightness(0.85);
}

.venue-sector--selected {
  filter: drop-shadow(0 0 6px rgba(109, 73, 251, 0.4));
}

.venue-sector--unavailable {
  filter: grayscale(1) opacity(0.5);
  pointer-events: none;
  cursor: default;
}

.venue-sector--mini-active [fill] { fill: #6D49FB !important; }
.venue-sector--mini-active [stroke] { stroke: #6D49FB !important; }

.venue-sector.venue-sector--mini-inactive [fill] { fill: #cccccc !important; }
.venue-sector.venue-sector--mini-inactive [stroke] { stroke: #ffffff !important; stroke-width: 8px !important; }
.venue-sector.venue-sector--mini-inactive path { stroke: #ffffff !important; stroke-width: 8px !important; }
.venue-sector.venue-sector--mini-inactive rect { stroke: #ffffff !important; stroke-width: 8px !important; }

/* ── Vista zoom (sector numerado) ── */
.venue-map__sector-view {
  width: 100%;
  transition: opacity 0.2s ease;
}

.venue-map__sector-view--hidden {
  display: none;
}

/* ── Referencia de colores (mismos estilos que .venue-seat, en un círculo) ── */
.venue-map__seat-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.venue-map__seat-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.venue-map__seat-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.venue-map__seat-legend-dot--available {
  background: #EDE0FF;
  border: 1.5px solid #C4A8FD;
}

.venue-map__seat-legend-dot--selected {
  background: #6D49FB;
  border: 1.5px solid #4c2fd4;
}

.venue-map__seat-legend-dot--unavailable {
  background: #E0E0E0;
  border: 1.5px solid #BDBDBD;
}

.venue-map__seat-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.venue-map__seat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.venue-map__row-label {
  width: 30px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-align: center;
  flex-shrink: 0;
}

/* ── Asiento ── */
.venue-seat {
  width: 28px;
  height: 28px;
  border: 1.5px solid #C4A8FD;
  background: #EDE0FF;
  color: #4a2fb0;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.venue-seat:hover:not(.venue-seat--unavailable):not(.venue-seat--selected) {
  background: #C4A8FD;
  border-color: #9B72FA;
}

.venue-seat--selected {
  background: #6D49FB;
  border-color: #4c2fd4;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(109, 73, 251, 0.25);
}

.venue-seat--unavailable {
  background: #E0E0E0;
  border-color: #BDBDBD;
  color: #BDBDBD;
  cursor: default;
  pointer-events: none;
}

/* ── Grid vertical (filas como columnas) ── */
.venue-map__seat-grid--vertical {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.venue-map__seat-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Imagen del sector, dentro de .venue-map__mini-row junto al mini-mapa ── */
.venue-map__sector-banner-wrap {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}

.venue-map__sector-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: venueSectorBannerPan 6s cubic-bezier(0.45, 0, 0.55, 1) 1;
}

/* Paneo, una sola vez por render (cada vez que se entra a un sector se crea un
   <img> nuevo, así que arranca de cero): 0-3s quieta en el centro (pausa), 3-4.5s
   centro→abajo, 4.5-6s abajo→centro (ida y vuelta en 3s; cubic-bezier(0.45,0,0.55,1)
   ≈ ease-in-out-sine, más suave que ease-in-out, en cada tramo por la
   animation-timing-function del shorthand). */
@keyframes venueSectorBannerPan {
  0%    { object-position: 50% 50%; }
  50%   { object-position: 50% 50%; }
  75%   { object-position: 50% 100%; }
  100%  { object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .venue-map__sector-banner {
    animation: none;
  }
}

.venue-map__sector-banner-zoom {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  pointer-events: none;
}

.venue-map__sector-banner-full {
  width: 100%;
  height: auto;
  display: block;
}

.modal-body .venue-map__sector-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 28px;
  line-height: 1;
}