/* =========================================================================
   Miscelánea Tickets — Mapa de asientos v3
   Layout columna 100% + panel horizontal debajo
   ========================================================================= */

:root {
  --mt-gold:           #C5A028;
  --mt-gold-light:     #d4b03a;
  --mt-black:          #111111;
  --mt-dark:           #1a1a1a;
  --mt-dark-2:         #222222;
  --mt-gray:           #6b6b6b;
  --mt-gray-light:     #aaaaaa;
  --mt-border:         #e8e2d8;
  --mt-bg:             #f5f1eb;
  --mt-white:          #ffffff;

  --mt-seat-available: #4db36a;
  --mt-seat-reserved:  #c9a725;
  --mt-seat-sold:      #444444;
  --mt-seat-mine:      #C5A028;

  --mt-radius:         12px;
  --mt-radius-sm:      8px;
  --mt-shadow:         0 4px 28px rgba(0,0,0,.18);
  --mt-gold-glow:      0 4px 24px rgba(197,160,40,.28);
  --mt-transition:     .2s ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   Contenedor principal — columna única
   ───────────────────────────────────────────────────────────────────────── */

.mt-seat-map-container {
  display: flex;
  flex-direction: column;
  gap: 0;

  -webkit-font-smoothing: antialiased;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
   Encabezado del evento
   ───────────────────────────────────────────────────────────────────────── */

.mt-event-header {
  padding: 0 0 20px;
}

.mt-event-title {

  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  color: var(--mt-black);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.mt-event-meta {
  font-size: 13px;
  color: var(--mt-gray);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 0;
}

.mt-event-meta-sep { margin: 0 6px; opacity: .3; }

.mt-event-date {
  font-weight: 600;
  color: var(--mt-black);
  text-transform: capitalize;
}

/* ─────────────────────────────────────────────────────────────────────────
   Selector de zona
   ───────────────────────────────────────────────────────────────────────── */

.mt-zone-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0 14px;
  border-top: 1px solid var(--mt-border);
  border-bottom: 1px solid var(--mt-border);
  margin-bottom: 16px;
}

.mt-zone-selector-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-gray-light);
  margin-right: 4px;
  flex-shrink: 0;
}

.mt-zone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--mt-border);
  border-radius: 24px;
  background: transparent;
  color: var(--mt-gray);

  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mt-transition);
  white-space: nowrap;
}

.mt-zone-btn:hover {
  border-color: var(--zone-color, var(--mt-gold));
  color: var(--zone-color, var(--mt-gold));
  background: color-mix(in srgb, var(--zone-color, var(--mt-gold)) 8%, transparent);
}

.mt-zone-btn--active {
  background: var(--zone-color, var(--mt-black));
  border-color: var(--zone-color, var(--mt-black));
  color: #fff !important;
  font-weight: 600;
}

.mt-zone-btn--all.mt-zone-btn--active {
  background: var(--mt-black);
  border-color: var(--mt-black);
}

.mt-zone-btn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--zone-color, currentColor);
  flex-shrink: 0;
  opacity: .9;
}

.mt-zone-btn--active .mt-zone-btn-dot {
  background: rgba(255,255,255,.6);
}

.mt-zone-btn-name { font-weight: 600; }

.mt-zone-btn-price {
  opacity: .75;
  font-size: .75rem;
}

.mt-zone-btn-price .woocommerce-Price-amount { font-size: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   Wrapper del mapa — ancho completo
   ───────────────────────────────────────────────────────────────────────── */

.mt-seat-map-wrapper {
  position: relative;
  background: var(--mt-dark);
  border-radius: var(--mt-radius) var(--mt-radius) 0 0;
  overflow: hidden;
  width: 100%;
  /* Altura adaptativa */
  min-height: 420px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mt-shadow);
}

/* Viñeta interior */
.mt-seat-map-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 80px rgba(0,0,0,.4);
  pointer-events: none;
  z-index: 5;
  border-radius: var(--mt-radius) var(--mt-radius) 0 0;
}

/* Inner — el área que se transforma con pan/zoom */
.mt-seat-map-inner {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
}

.mt-seat-map-inner.mt-dragging {
  cursor: grabbing;
}

.mt-seat-map-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────────
   Modos: overview (zonas) ↔ detail (asientos)
   ───────────────────────────────────────────────────────────────────────── */

/* En overview: ocultar butacas */
.mt-map--overview .mt-seats-group { display: none; }

/* En detalle: ocultar arcos */
.mt-map--detail .mt-zone-arcs-group { display: none; }

/* Leyenda dinámica: ocultar detalle al inicio */
.mt-legend-detail { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Arcos de zona
   ───────────────────────────────────────────────────────────────────────── */

.mt-zone-arc {
  cursor: pointer;
  opacity: .78;
  transition: opacity .18s ease, filter .18s ease;
}

.mt-zone-arc:hover,
.mt-zone-arc:focus {
  opacity: 1;
  filter: brightness(1.18) drop-shadow(0 0 3px rgba(255,255,255,.25));
  outline: none;
}

/* Botón volver */
.mt-back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  color: rgba(255,255,255,.85);

  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.mt-back-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.mt-back-btn:hover {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
   SVG + butacas
   ───────────────────────────────────────────────────────────────────────── */

.mt-seat-map {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Butacas — grupo */
.mt-seat {
  cursor: pointer;
  outline: none;
}

/* Partes del asiento (respaldo + cojín) */
.mt-seat .mt-seat-back,
.mt-seat .mt-seat-cushion {
  transition: fill .14s ease, opacity .14s ease, transform .12s ease;
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* Disponible */
.mt-seat[data-status="available"] .mt-seat-back    { fill: var(--mt-seat-available); opacity: .9; }
.mt-seat[data-status="available"] .mt-seat-cushion { fill: var(--mt-seat-available); filter: brightness(.85); opacity: .9; }

.mt-seat[data-status="available"]:hover .mt-seat-back,
.mt-seat[data-status="available"]:hover .mt-seat-cushion {
  opacity: 1;
  transform: scaleY(1.12) scaleX(1.08);
}

/* Reservado */
.mt-seat[data-status="reserved"] .mt-seat-back,
.mt-seat[data-status="reserved"] .mt-seat-cushion {
  fill: var(--mt-seat-reserved);
  opacity: .6;
  cursor: not-allowed;
}

/* Vendido */
.mt-seat[data-status="sold"] .mt-seat-back,
.mt-seat[data-status="sold"] .mt-seat-cushion {
  fill: var(--mt-seat-sold);
  opacity: .28;
  cursor: not-allowed;
}

/* Mío (seleccionado) */
.mt-seat[data-status="mine"] .mt-seat-back {
  fill: var(--mt-seat-mine);
  stroke: rgba(255,255,255,.6);
  stroke-width: .4px;
  opacity: 1;
  transform: scaleY(1.12) scaleX(1.08);
}
.mt-seat[data-status="mine"] .mt-seat-cushion {
  fill: #b8921e;
  opacity: 1;
  transform: scaleY(1.12) scaleX(1.08);
}

.mt-seat[data-status="mine"]:hover .mt-seat-back    { fill: #a07d1a; }
.mt-seat[data-status="mine"]:hover .mt-seat-cushion { fill: #8a6a14; }

/* Dimmed (zona no seleccionada) */
.mt-seat--dimmed .mt-seat-back,
.mt-seat--dimmed .mt-seat-cushion {
  opacity: .12 !important;
  pointer-events: none;
}

/* Loading */
.mt-seat--loading .mt-seat-back,
.mt-seat--loading .mt-seat-cushion {
  animation: mt-pulse .7s ease-in-out infinite alternate;
}

@keyframes mt-pulse {
  from { opacity: .35; }
  to   { opacity: .7; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Controles de zoom
   ───────────────────────────────────────────────────────────────────────── */

.mt-zoom-controls {
  position: absolute;
  bottom: 52px; /* justo sobre la leyenda */
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 10;
}

.mt-zoom-controls button {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  line-height: 1;
}

.mt-zoom-controls button:hover {
  background: rgba(255,255,255,.22);
  color: var(--mt-white);
}

/* ─────────────────────────────────────────────────────────────────────────
   Leyenda (dentro del wrapper, abajo)
   ───────────────────────────────────────────────────────────────────────── */

.mt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 16px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
  position: relative;
  z-index: 6;
}

.mt-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .73rem;
  color: rgba(255,255,255,.6);
}

.mt-legend-hint {
  margin-left: auto;
  gap: 5px;
  opacity: .5;
  font-size: .68rem;
}

.mt-legend-dot {
  width: 10px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.mt-legend-dot--available { background: var(--mt-seat-available); }
.mt-legend-dot--reserved  { background: var(--mt-seat-reserved); opacity: .7; }
.mt-legend-dot--sold      { background: var(--mt-seat-sold); opacity: .4; }
.mt-legend-dot--mine      { background: var(--mt-seat-mine); box-shadow: 0 0 0 1.5px rgba(255,255,255,.4); }

/* ─────────────────────────────────────────────────────────────────────────
   Panel de selección — ancho completo, debajo del mapa
   ───────────────────────────────────────────────────────────────────────── */

.mt-selection-panel {
  background: var(--mt-white);
  border: 1px solid var(--mt-border);
  border-top: none;
  border-radius: 0 0 var(--mt-radius) var(--mt-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

/* Venta cerrada */
.mt-sale-closed-bar {
  padding: 18px 20px;
  text-align: center;
  font-size: .875rem;
  color: var(--mt-gray);
  background: #fafaf8;
  border-radius: 0 0 var(--mt-radius) var(--mt-radius);
}

/* Header del panel */
.mt-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--mt-dark);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.mt-panel-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-gold);
  flex-shrink: 0;
}

.mt-seat-counter {
  background: var(--mt-gold);
  color: var(--mt-black);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform .2s;
}

.mt-seat-counter.mt-bounce { animation: mt-counter-bounce .3s ease; }

@keyframes mt-counter-bounce {
  0%  { transform: scale(1); }
  50% { transform: scale(1.35); }
  100%{ transform: scale(1); }
}

.mt-panel-max {
  font-size: .7rem;
  color: rgba(255,255,255,.3);
  margin-right: auto;
}

/* TTL en el header */
.mt-ttl-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(197,160,40,.15);
  border: 1px solid rgba(197,160,40,.3);
  border-radius: 20px;
  font-size: .75rem;
  color: var(--mt-gold);
}

.mt-ttl-display {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.mt-ttl-wrapper.mt-ttl--urgent {
  background: rgba(192,57,43,.2);
  border-color: rgba(192,57,43,.4);
  color: #e74c3c;
  animation: mt-ttl-blink 1s ease infinite alternate;
}

@keyframes mt-ttl-blink {
  from { opacity: 1; }
  to   { opacity: .6; }
}

/* Cuerpo del panel: chips + CTA */
.mt-panel-body {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 72px;
}

/* Lista de butacas (chips) */
.mt-selected-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  align-items: center;
  overflow-y: auto;
  max-height: 160px;
  scrollbar-width: thin;
  scrollbar-color: var(--mt-border) transparent;
  border-right: 1px solid var(--mt-border);
}

.mt-selected-list::-webkit-scrollbar { height: 4px; width: 4px; }
.mt-selected-list::-webkit-scrollbar-thumb { background: var(--mt-border); border-radius: 4px; }

/* Chip de butaca */
.mt-selected-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--mt-bg);
  border: 1.5px solid var(--mt-border);
  border-radius: 24px;
  overflow: hidden;
  animation: mt-chip-in .2s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}

@keyframes mt-chip-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

.mt-selected-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 0 0 10px;
  flex-shrink: 0;
}

.mt-selected-label {
  font-weight: 700;
  font-size: .82rem;
  color: var(--mt-black);
  padding: 6px 6px 6px 7px;
}

.mt-selected-zone {
  font-size: .72rem;
  color: var(--mt-gray-light);
  padding-right: 4px;
}

.mt-selected-price {
  font-size: .78rem;
  font-weight: 600;
  color: var(--mt-gray);
  padding: 0 6px 0 4px;
  border-left: 1px solid var(--mt-border);
  margin-left: 4px;
}

.mt-deselect-btn {
  background: none;
  border: none;
  border-left: 1px solid var(--mt-border);
  color: #ccc;
  cursor: pointer;
  font-size: .75rem;
  padding: 0 9px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
  align-self: stretch;
}

.mt-deselect-btn:hover {
  color: #e33;
  background: #fdf1f1;
}

/* Empty state */
.mt-empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  font-size: .82rem;
  padding: 4px 0;
}

/* CTA: total + botón */
.mt-panel-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  min-width: 200px;
  background: #faf8f4;
  flex-shrink: 0;
}

.mt-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.mt-total-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-gray-light);
}

.mt-selected-total {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--mt-black);
  letter-spacing: -.01em;
}

.mt-add-to-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 16px;
  background: var(--mt-gold);
  color: var(--mt-black);
  border: none;
  border-radius: 28px;

  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .18s, transform .15s, box-shadow .18s;
  white-space: nowrap;
}

.mt-add-to-cart-btn:hover:not(:disabled) {
  background: var(--mt-gold-light);
  transform: translateY(-1px);
  box-shadow: var(--mt-gold-glow);
}

.mt-add-to-cart-btn:disabled {
  background: #eee;
  color: #bbb;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────
   Notificaciones flotantes
   ───────────────────────────────────────────────────────────────────────── */

.mt-notices {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.mt-notice {
  padding: 12px 18px;
  border-radius: var(--mt-radius-sm);

  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  max-width: 300px;
  animation: mt-notice-in .25s cubic-bezier(.22,1,.36,1);
  pointer-events: all;
  line-height: 1.45;
}

.mt-notice--error   { background: #c0392b; color: #fff; }
.mt-notice--warning { background: #d4820a; color: #fff; }
.mt-notice--success { background: #27ae60; color: #fff; }
.mt-notice--info    { background: var(--mt-dark); color: var(--mt-gold); border: 1px solid rgba(197,160,40,.3); }

@keyframes mt-notice-in {
  from { transform: translateX(110%) scale(.95); opacity: 0; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Tooltip
   ───────────────────────────────────────────────────────────────────────── */

.mt-tooltip {
  position: fixed;
  background: rgba(15,15,15,.94);
  color: #fff;
  padding: 7px 12px;
  border-radius: 6px;

  font-size: .75rem;
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.07);
}

.mt-tooltip strong {
  display: block;
  font-size: .87rem;
  color: var(--mt-gold);
  margin-bottom: 1px;
}

.mt-tooltip .mt-tooltip-price {
  color: rgba(255,255,255,.65);
  font-size: .72rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .mt-panel-body {
    flex-direction: column;
  }

  .mt-selected-list {
    border-right: none;
    border-bottom: 1px solid var(--mt-border);
    max-height: 100px;
  }

  .mt-panel-cta {
    flex-direction: row;
    align-items: center;
    min-width: 0;
    padding: 12px 16px;
  }

  .mt-total-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .mt-selected-total { font-size: 1.2rem; }

  .mt-add-to-cart-btn { flex-shrink: 0; }

  .mt-seat-map-wrapper {
    max-height: 55vw;
    min-height: 300px;
  }

  .mt-zone-selector { gap: 6px; }
  .mt-zone-btn { padding: 6px 11px; font-size: .75rem; }
}