*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:#F2F2F7;
  color:#1C1C1E;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}

/* ── APP HEADER ─────────────────────────────── */
.app-header{
  position:sticky;top:0;z-index:100;
  background:#7b2be0;
  border-bottom:none;
  height:56px;
  display:flex;align-items:center;
  padding:0 16px;
  gap:12px;
}
.app-header__back{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;flex-shrink:0;
  transition:background .15s;
  border:none;cursor:pointer;
}
.app-header__back:hover{background:rgba(255,255,255,.25)}
.app-header__back svg{width:20px;height:20px}
.app-header__titles{
  flex:1;text-align:center;min-width:0;
}
.app-header__title{
  font-size:15px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.2;
}
.app-header__sub{
  font-size:11px;color:rgba(255,255,255,.75);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app-header__share{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border:none;cursor:pointer;color:#fff;
  transition:background .15s;
}
.app-header__share:hover{background:rgba(255,255,255,.25)}
.app-header__share svg{width:20px;height:20px}

/* ── SCROLL BODY ─────────────────────────────── */
.ev-scroll{padding-bottom:120px}

/* ── HERO ─────────────────────────────────────── */
.ev-hero-wrap{
  position:relative;
  z-index:0;
  padding:0;
}
.ev-hero{
  position:relative;
  border-radius:0;overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(145deg,#4c1d95,#2e1065);
}
.ev-hero img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.ev-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.22) 0%,rgba(0,0,0,.04) 45%,transparent 100%);
  pointer-events:none;
}
.ev-hero__noimg{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:80px;opacity:.3;
}
.ev-hero__photo-btn{
  position:absolute;top:12px;right:12px;bottom:auto;
  width:40px;height:40px;padding:0;border-radius:50%;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;
  border:none;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s;
  z-index:6;
  -webkit-tap-highlight-color:transparent;
}
.ev-hero__photo-btn:hover{background:rgba(0,0,0,.62)}
.ev-hero__photo-btn:active{transform:scale(.94)}
.ev-hero__photo-btn svg{width:20px;height:20px;flex-shrink:0}
/* Tarjeta título + datos: fuera del hero, mismo ancho, montada con margin-top negativo */
.ev-event-meta{
  position:relative;
  z-index:2;
  margin:-26px 16px 0;
  background:#fff;
  border-radius:20px;
  box-shadow:0 4px 24px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);
  padding:16px 14px 16px;
  box-sizing:border-box;
}
.ev-event-meta__title{
  text-align:center;
  font-size:clamp(14px,3.6vw,17px);
  font-weight:900;color:#1C1C1E;
  letter-spacing:-.25px;line-height:1.25;
  margin:0 0 12px;
}
.ev-event-meta__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:4px 0;
  border-top:1px solid #F2F2F7;
  margin:0 -14px -16px;
  padding:4px 14px 8px;
  border-radius:0;
}
.ev-event-meta__grid:not(:last-child){margin-bottom:0}
.ev-event-meta__grid .info-col{
  padding:8px 10px;
  display:flex;
  flex-direction:row;
  align-items:center;
  text-align:left;
  gap:8px;
  box-sizing:border-box;
}
.ev-event-meta__grid .info-col--loc{
  flex:0 1 auto;
  min-width:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
  border-radius:10px;
}
.ev-event-meta__grid .info-col--loc:hover{background:#fafafa}
.ev-event-meta__grid .info-col--loc .info-col__value{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  font-size:clamp(11px,3vw,15px);
}
.ev-event-meta__grid .info-col--meta-fixed{
  flex-shrink:0;
}
.ev-event-meta__grid .info-col__icon{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:#f3ecff;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  border:none;
}
.ev-event-meta__grid .info-col__icon svg{width:14px;height:14px;color:#7b2be0;transition:color .2s}
.ev-event-meta__grid .info-col__text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ev-event-meta__grid .info-col__label{font-size:9px;color:#8E8E93;font-weight:600;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.ev-event-meta__grid .info-col__value{font-size:12px;font-weight:700;color:#1C1C1E;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-event-meta__grid .info-col__icon--open{background:#7b2be0!important}
.ev-event-meta__grid .info-col__icon--open svg{color:#fff!important}

/* ── DESCRIPCIÓN (dentro del meta) ─────────────────── */
.ev-desc{
  margin:10px 0 0;
  padding:12px 14px 14px;
  background:#F2F2F7;
  border-radius:14px;
}
.ev-desc__label{
  font-size:10px;font-weight:700;color:#8E8E93;
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:6px;
}
.ev-desc__text{
  font-size:14px;line-height:1.75;color:#3C3C43;
}
.ev-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.ev-overlay.open{opacity:1;pointer-events:auto}
.ev-overlay-close{
  position:absolute;top:16px;right:16px;z-index:10;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);
  border:none;cursor:pointer;color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;font-family:inherit;
}
.ev-map-overlay{
  padding-top:72px;
}
.ev-overlay-close:hover{background:rgba(255,255,255,.28)}
.ev-photo-overlay img{
  max-width:100%;max-height:90dvh;
  border-radius:12px;object-fit:contain;
  box-shadow:0 8px 48px rgba(0,0,0,.5);
}
.map-frame-wrap{
  position:relative;
  width:90vw;height:80vh;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 48px rgba(0,0,0,.5);
}
.map-frame-wrap iframe{
  border:none;width:100%;height:100%;display:block;
}
.map-loading{
  position:absolute;inset:0;z-index:2;
  background:rgba(28,28,30,.72);
  display:flex;align-items:center;justify-content:center;
}
.map-loading.is-hidden{display:none}
@keyframes yk-spin{to{transform:rotate(360deg)}}
.map-loading__spinner{
  width:36px;height:36px;
  border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:yk-spin .7s linear infinite;
}


/* ── SECTION HEADER ──────────────────────────── */
.section-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 16px 12px;
}
.section-hd h2{
  font-size:20px;font-weight:800;color:#1C1C1E;
  letter-spacing:-.3px;
}
.section-hd__left{display:flex;align-items:center;gap:10px}
.section-hd__link{
  font-size:14px;font-weight:700;color:#7b2be0;
  text-decoration:none;display:flex;align-items:center;gap:4px;
}
.section-hd__link svg{width:14px;height:14px}
.section-hd__link:hover{opacity:.8}

/* ── TICKET CARD iOS ─────────────────────────── */
.tkt-list{padding:0 16px;display:flex;flex-direction:column;gap:12px}

.tkt-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
  overflow:hidden;
  border:2px solid transparent;
  transition:border-color .18s,box-shadow .18s;
}
.tkt-card--active{
  border-color:#7b2be0;
  box-shadow:0 4px 24px rgba(123,43,224,.18);
}
.fq-card{cursor:pointer;transition:outline .15s,box-shadow .15s;outline:3px solid transparent;outline-offset:2px}
.fq-card--active{
  outline-color:#7b2be0;
  box-shadow:0 8px 40px rgba(123,43,224,.4),0 2px 8px rgba(0,0,0,.15);
}

.tkt-body{padding:16px 18px;overflow:hidden}

.tkt-top{
  display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.tkt-left{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0}
.tkt-icon{
  width:40px;height:40px;flex-shrink:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.tkt-icon svg{width:20px;height:20px}

.tkt-info{flex:1;min-width:0}
.tkt-name{
  font-size:16px;font-weight:800;color:#1C1C1E;
  margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Nombre + disponibilidad en una sola línea (zonas comprables con stepper) —
   libera una línea para que el precio quede pegado debajo del nombre. */
.tkt-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.tkt-name-row .tkt-name{flex-shrink:1;min-width:0}
.tkt-desc{
  font-size:12px;color:#8E8E93;font-weight:500;
  line-height:1.4;margin-bottom:6px;
}
.tkt-stock{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:700;
}
.tkt-stock--green{color:#34C759}
.tkt-stock--yellow{color:#d4a000}
.tkt-stock--red{color:#FF3B30}
.tkt-stock svg{width:12px;height:12px}

.tkt-right-col{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:8px;flex-shrink:0;max-width:48%;min-width:0;
}
.tkt-price{
  font-size:clamp(16px,5.5vw,22px);font-weight:900;color:#7b2be0;
  line-height:1;text-align:right;white-space:nowrap;
}
.tkt-price__label{font-size:11px;color:#8E8E93;font-weight:500;text-align:right;margin-bottom:1px}
.tkt-cargo-nota{font-size:10px;color:#b45309;font-weight:500;text-align:right;margin-top:2px;white-space:nowrap}
.tkt-price--free{color:#34C759}
.tkt-price-old{font-size:12px;color:#C7C7CC;text-decoration:line-through;text-align:right}
.tkt-disc-badge{
  display:inline-block;
  background:#fef9c3;color:#854d0e;
  font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:20px;
}
/* Precio pegado debajo del nombre (zonas comprables con stepper) — mismas
   piezas que .tkt-right-col (tkt-price, tkt-price-old, etc.) pero
   alineadas a la izquierda, ya que acá no hay columna aparte. */
.tkt-price-under-name{margin-top:2px}
.tkt-price-under-name .tkt-price,
.tkt-price-under-name .tkt-price__label,
.tkt-price-under-name .tkt-price-old,
.tkt-price-under-name .tkt-cargo-nota{text-align:left}

/* ── COLA VIRTUAL ────────────────────────────── */
.tkt-queue-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#7b2be0;color:#fff;
  font-size:13px;font-weight:800;
  padding:10px 16px;border-radius:20px;
  text-decoration:none;white-space:nowrap;
  transition:filter .15s;
  -webkit-tap-highlight-color:transparent;
}
.tkt-queue-btn:hover{filter:brightness(1.1)}
.tkt-queue-btn svg{width:13px;height:13px;flex-shrink:0}
.tkt-apertura-wrap{
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
}
.tkt-apertura-label{
  font-size:10px;color:#8E8E93;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;
}
.tkt-apertura-cd{
  font-size:clamp(14px,4.5vw,18px);font-weight:800;color:#7b2be0;
  font-variant-numeric:tabular-nums;letter-spacing:1px;white-space:nowrap;
}
.tkt-cola-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;color:#7b2be0;margin-top:4px;
}

/* ── PREVENTA COUNTDOWN ─────────────────────── */
.tkt-preventa-wrap{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  margin-top:4px;
}
.tkt-preventa-label{
  font-size:10px;color:#8E8E93;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;text-align:right;
}
.tkt-preventa-cd{
  font-size:clamp(12px,3.5vw,14px);font-weight:800;color:#7b2be0;
  font-variant-numeric:tabular-nums;letter-spacing:.5px;text-align:right;white-space:nowrap;
}

/* Stepper solo en su fila, más grande horizontalmente — el precio ya queda
   pegado debajo del nombre (ver .tkt-price-under-name), así que esta fila
   no necesita compartir espacio con nada más. */
.tkt-qty-row-solo{display:flex;margin-top:10px}
.qty-selector--lg{width:100%;justify-content:space-between;padding:0 2px}
.qty-selector--lg .qty-btn{width:46px;height:46px;font-size:22px}
.qty-selector--lg .qty-val{font-size:18px;min-width:32px}
/* El botón Agregar queda solo, debajo, a lo ancho completo. */
.tkt-bottom-row{display:flex;align-items:center;gap:10px;margin-top:10px}

/* Quantity selector */
.qty-selector{
  display:flex;align-items:center;gap:0;
  background:#F2F2F7;border-radius:30px;
  overflow:hidden;flex-shrink:0;
}
.qty-btn{
  width:36px;height:36px;
  background:none;border:none;cursor:pointer;
  font-size:20px;font-weight:700;color:#7b2be0;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.qty-btn:hover{background:rgba(123,43,224,.1)}
.qty-btn:disabled{color:#C7C7CC;cursor:default}
.qty-btn:disabled:hover{background:none}
.qty-val{
  min-width:28px;text-align:center;
  font-size:16px;font-weight:800;color:#1C1C1E;
  user-select:none;
}
.qty-seat-link{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  background:#F2F2F7;border:none;border-radius:30px;
  padding:9px 16px;
  font-size:13px;font-weight:800;color:#7b2be0;
  cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s;
}
.qty-seat-link:hover{background:rgba(123,43,224,.1)}
/* Botón "Reclamar entrada"/"Ver cola virtual": empieza apagado (gris, igual
   que .qty-add-btn:disabled) y se activa en amarillo recién cuando se
   selecciona la card — mismo patrón de "grís hasta que elegís algo" que ya
   usa el stepper de zona general, para que se sienta parte del mismo sistema
   en vez de un botón aparte que ya funciona sin tocar nada. */
.qty-seat-link--cola{background:#E5E5EA;color:#AEAEB2;cursor:default}
.qty-seat-link--cola:not(:disabled){background:#FFD700;color:#1C1C1E;cursor:pointer}
.qty-seat-link--cola:not(:disabled):hover{background:#f5cc00}
.qty-add-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex:1;min-width:0;height:40px;
  background:#7b2be0;border:none;border-radius:30px;
  font-size:13px;font-weight:800;color:#fff;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s,opacity .15s;
}
.qty-add-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qty-add-btn svg{width:13px;height:13px}
.qty-add-btn .btn-text{display:flex;align-items:center;gap:6px;overflow:hidden}
/* Spinner dentro del botón mientras se procesa — mismo patrón que ya usa
   iniciar-sesion.php (id="login-spinner"), acá reutilizado para "Agregar" en
   vez de solo deshabilitar el botón sin ninguna señal de que algo está
   pasando. */
@keyframes yk-spin { to { transform:rotate(360deg); } }
.yk-spinner{
  display:none;flex-shrink:0;
  width:16px;height:16px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:yk-spin .6s linear infinite;
}
.qty-add-btn:hover:not(:disabled){background:#6b21c9}
.qty-add-btn:disabled{background:#E5E5EA;color:#AEAEB2;cursor:default}

/* ── SECURITY CARD ───────────────────────────── */
.security-card{
  margin:14px 16px 0;
  background:#FFFDE7;
  border-radius:20px;
  padding:16px 18px;
  display:flex;align-items:center;gap:14px;
  border:1px solid rgba(212,160,0,.18);
}
.security-card__icon{
  width:44px;height:44px;flex-shrink:0;
  background:rgba(212,160,0,.12);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.security-card__icon svg{width:22px;height:22px;color:#d4a000}
.security-card__text{
  font-size:13px;color:#5a4000;font-weight:500;line-height:1.5;
  flex:1;
}
.security-card__text strong{font-weight:800}

/* ── SEAT MAP ─────────────────────────────────── */
.mapa-section{padding:0 16px;margin-top:0}
.mapa-wrap{
  background:#fff;border-radius:20px;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
}
.mapa-wrap svg{display:block;width:100%;height:auto;cursor:default}
/* Marco recortado del mapa grande, con zoom (ver mapa-zoom-toolbar en el
   section-hd de arriba). Mismo criterio que .sp-sector-minimap: alto fijo
   puesto por JS (ver _iniciarZoomMapa) para que el marco no crezca con el
   zoom, overflow:auto para arrastrar/recorrer, touch-action:pan-x pan-y
   para dejar el arrastre nativo pero apagar el pellizco nativo del
   navegador (así el gesto de dos dedos le llega entero al JS). */
.mapa-scroll{overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.mapa-zone{transition:fill-opacity .15s,filter .15s}
.mapa-zone:hover:not(.mapa-zone--ago){fill-opacity:.92!important;filter:drop-shadow(0 0 8px rgba(0,0,0,.35))}
.mapa-zone--ago{cursor:not-allowed!important}
/* Zona invisible sobre foto personalizada: en reposo no se nota nada — la
   foto queda limpia. Al pasar el mouse/dedo aparece un brillo blanco muy
   tenue, solo para confirmar que ahí hay algo clickeable. */
.mapa-zone--fantasma{fill-opacity:0!important;filter:none!important}
.mapa-zone--fantasma:hover:not(.mapa-zone--ago){fill-opacity:.1!important;filter:none!important}
.mapa-tooltip{
  position:absolute;pointer-events:none;z-index:30;
  background:rgba(28,28,30,.94);backdrop-filter:blur(8px);
  color:#fff;border-radius:14px;padding:12px 16px;
  font-size:13px;line-height:1.5;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  min-width:160px;max-width:220px;
  transform:translate(14px,-50%);
}
.mt-nombre{font-weight:800;font-size:14px;margin-bottom:4px}
.mt-precio{color:#c4b5fd;font-weight:700}
.mt-disp{font-size:11px;color:#8E8E93;margin-top:2px}
.mt-ago{color:#FF3B30;font-weight:800}
.mt-cola{color:#7b2be0;font-weight:800}
.mapa-legend{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:12px 16px;border-top:1px solid #F2F2F7;
}
.ml-item{
  display:inline-flex;align-items:center;gap:6px;
  background:#F2F2F7;border-radius:20px;
  padding:5px 10px;
  cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;
}
.ml-item:not(.ml-item--ago):hover{background:#ede5f8;transform:translateY(-1px);box-shadow:0 2px 8px rgba(123,43,224,.12)}
.ml-item:active{transform:scale(.97)}
.ml-item--ago{opacity:.5;cursor:default}
.ml-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ml-price{font-size:11px;color:#7b2be0;font-weight:700}
.ml-ago-txt{color:#8E8E93!important}

/* Zone cards mobile */
.zonas-mobile{
  display:flex;flex-direction:column;gap:10px;
  padding:14px 16px;border-top:1px solid #F2F2F7;
}
.zm-card{
  display:flex;align-items:stretch;
  border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  transition:box-shadow .18s,transform .18s;
}
.zm-card:active{transform:scale(.99)}
.zm-card--ago{opacity:.6}
.zm-accent{width:5px;background:var(--zc);flex-shrink:0}
.zm-body{flex:1;padding:13px 14px;min-width:0}
.zm-name{font-size:14px;font-weight:800;color:#1C1C1E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zm-avail{font-size:11px;color:#8E8E93;margin-top:3px;font-weight:500}
.zm-avail--low{color:#FF3B30;font-weight:700}

.tkt-empty{
  background:#fff;border-radius:20px;
  padding:52px 20px;text-align:center;color:#8E8E93;
  margin:0 16px;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
}
.tkt-empty .ei{font-size:48px;margin-bottom:12px}
.tkt-empty p{font-size:15px;font-weight:500}

/* ── STICKY BOTTOM BAR ───────────────────────── */
.sticky-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(0,0,0,.08);
  padding:12px 20px max(16px, env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:16px;
  box-shadow:0 -4px 32px rgba(0,0,0,.08);
}
.sticky-bar__info{flex:1;min-width:0}
.sticky-bar__label{font-size:12px;color:#8E8E93;font-weight:600;margin-bottom:2px}
.sticky-bar__total{font-size:26px;font-weight:900;color:#7b2be0;line-height:1}
.sticky-bar__total--free{color:#34C759}
.sticky-bar__btn{
  background:#FFCC00;color:#1C1C1E;
  font-size:16px;font-weight:800;
  padding:14px 28px;border-radius:30px;
  text-decoration:none;white-space:nowrap;
  flex-shrink:0;
  transition:filter .15s,transform .15s;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.sticky-bar__btn:hover{filter:brightness(.95)}
.sticky-bar__btn:active{transform:scale(.97)}
.sticky-bar__btn--disabled{
  background:#E5E5EA;color:#8E8E93;pointer-events:none;
}

/* ── LINEUP ──────────────────────────────────── */
.lineup-wrap{
  padding:0 16px;margin-top:0;
}
.lineup-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
}
.lineup-card{
  background:#fff;border-radius:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  padding:14px 10px 12px;
  display:flex;flex-direction:column;align-items:center;
  gap:8px;position:relative;
  border:2px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
.lineup-card--principal{
  border-color:#FFCC00;
  box-shadow:0 4px 20px rgba(255,204,0,.22);
}
.lineup-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:#FFCC00;color:#1C1C1E;
  font-size:10px;font-weight:800;
  padding:3px 10px;border-radius:20px;
  white-space:nowrap;letter-spacing:.2px;
}
.lineup-foto{
  width:72px;height:72px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#4c1d95,#7b2be0);
  display:flex;align-items:center;justify-content:center;
}
.lineup-foto img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.lineup-foto-ph{
  font-size:28px;opacity:.7;
}
.lineup-nombre{
  font-size:13px;font-weight:800;color:#1C1C1E;
  text-align:center;line-height:1.25;
  word-break:break-word;
}
.lineup-hora{
  font-size:11px;font-weight:600;color:#7b2be0;
  background:#f3ecff;border-radius:20px;
  padding:2px 8px;white-space:nowrap;
}

@media(min-width:640px){
  .ev-hero{aspect-ratio:21/9}
}
@media(min-width:900px){
  .ev-scroll{max-width:700px;margin:0 auto}
  .ev-hero-wrap{
    width:min(100vw, 1200px);
    margin-left:calc((700px - min(100vw, 1200px)) / 2);
  }
  .ev-event-meta{max-width:700px;margin-left:auto;margin-right:auto}
  .sticky-bar{max-width:700px;left:50%;transform:translateX(-50%);border-radius:20px 20px 0 0}
}

/* ── Skeleton evento ─────────────────────────── */
@keyframes yk-shimmer {
  from { background-position:-600px 0 }
  to   { background-position: 600px 0 }
}
.yk-skel {
  display:block;
  background:linear-gradient(90deg,#E0E0E0 25%,#F0F0F0 50%,#E0E0E0 75%);
  background-size:600px 100%;
  animation:yk-shimmer 1.5s infinite linear;
  border-radius:6px;
}
#ev-skel {
  padding-bottom:120px;
}
.ev-skel__hero {
  aspect-ratio:16/9;
  border-radius:0;
  animation-delay:0s;
}
.ev-skel__meta {
  position:relative;
  margin:-26px 16px 0;
  background:#fff;
  border-radius:20px;
  padding:18px 16px 20px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}
.ev-skel__row {
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.ev-skel__icon {
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
}
.ev-skel__tkt {
  border-radius:14px;
  margin:0 16px 10px;
  height:74px;
}

/* ── FREE QUEUE COUNTDOWN CARD ─────────────────── */
.fq-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,#4c1d95,#2e1065);
  box-shadow:0 8px 40px rgba(123,43,224,.2),0 2px 8px rgba(0,0,0,.1);
}
.fq-card__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:blur(14px);
  z-index:0;
  transform:scale(1.15);
}
.fq-card__overlay{
  position:absolute;inset:0;
  background:rgba(18,0,42,.8);
  z-index:1;
}
.fq-card__content{position:relative;z-index:2}
.fq-top{padding:12px 20px 22px}
.fq-tipo-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fq-tipo-icon svg{width:18px;height:18px}
.fq-badge{
  display:inline-block;
  background:#22c55e;
  color:#fff;
  padding:5px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  margin-bottom:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  box-shadow:0 2px 12px rgba(34,197,94,.4);
}
.fq-title{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(18px,5vw,24px);
  font-weight:800;
  color:#fff;
  margin-bottom:6px;
  line-height:1.35;
  letter-spacing:-.4px;
  text-shadow:0 1px 0 rgba(255,255,255,.15),0 2px 20px rgba(0,0,0,.5);
}
.fq-opens-label{
  font-size:11px;
  color:rgba(255,255,255,.65);
  margin-bottom:6px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}
.fq-opens-date{
  font-size:17px;
  font-weight:800;
  color:#FFCC00;
  margin-bottom:14px;
  letter-spacing:-.3px;
  text-shadow:0 0 18px rgba(255,204,0,.35),0 1px 4px rgba(0,0,0,.4);
}
.fq-countdown{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.fq-cd-unit{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:rgba(255,204,0,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:16px;
  padding:12px 8px 10px;
  border:1px solid rgba(255,204,0,.25);
  box-shadow:0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,204,0,.1);
}
.fq-cd-num{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(30px,8vw,40px);
  font-weight:800;
  color:#FFCC00;
  line-height:1.2;
  letter-spacing:-.5px;
  text-shadow:0 0 24px rgba(255,204,0,.45),0 2px 8px rgba(0,0,0,.4);
}
.fq-cd-sep{
  font-family:'DM Sans',sans-serif;
  font-size:26px;
  font-weight:800;
  color:rgba(255,204,0,.4);
  line-height:1.2;
  padding-bottom:24px;
  flex-shrink:0;
}
.fq-cd-label{
  font-size:10px;
  color:rgba(255,204,0,.6);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-top:6px;
}
.fq-info{
  padding:14px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.1);
}
.fq-info-row{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.6);
  line-height:1.4;
}
.fq-info-row svg{
  width:14px;height:14px;
  flex-shrink:0;
  opacity:.55;
}
.fq-info-val{color:#fff;font-weight:700;}
.fq-info-pill{
  display:inline-flex;align-items:center;
  background:rgba(255,204,0,.15);
  border:1px solid rgba(255,204,0,.25);
  color:#FFCC00;
  padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.3px;
}

/* Variante "cola abierta" del fq-card — antes vivía en un <style> inline
   que solo se imprimía en modo mapa, así que en modo clásico (sin mapa)
   quedaba sin estilo. Movido acá para que funcione en los dos modos. */
@keyframes fq-pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }
.fq-live-dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;animation:fq-pulse-dot 1.4s ease-in-out infinite;vertical-align:middle;margin-right:5px }
.fq-live-badge { display:inline-flex;align-items:center;background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.5);color:#22c55e;font-size:11px;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:20px }
.fq-open-avail { font-size:36px;font-weight:800;color:#fff;line-height:1;margin:6px 0 2px }
.fq-open-avail-label { font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px }
.fq-open-queue-count { display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.75);margin-bottom:6px }
.fq-card--open { cursor:pointer }
.fq-open-status { font-size:16px;font-weight:700;color:#fff;margin:4px 0 8px;letter-spacing:.01em }

/* ── SEAT PICKER PANEL ─────────────────────────────────────────── */
.seat-picker{
  position:fixed;inset:0;z-index:9000;
  display:none;align-items:flex-end;justify-content:center;
}
.seat-picker--open .seat-picker__backdrop{opacity:1}
.seat-picker--open .seat-picker__sheet{transform:translateY(0)}
.seat-picker__backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s;
}
.seat-picker__sheet{
  position:relative;z-index:1;
  width:100%;max-width:600px;
  background:#fff;border-radius:24px 24px 0 0;
  padding-bottom:env(safe-area-inset-bottom,0);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  max-height:92vh;overflow-y:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.2);
}
/* drag handle */
.seat-picker__sheet::before{
  content:'';display:block;
  width:40px;height:4px;border-radius:2px;background:#d1d5db;
  margin:12px auto 0;
}
.seat-picker__hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:14px 20px 14px;
  position:sticky;top:0;background:#fff;z-index:2;
  border-bottom:1px solid #f0f0f4;
}
.seat-picker__hd-info{display:flex;align-items:center;gap:11px}
.seat-picker__zona-dot{width:13px;height:13px;border-radius:4px;flex-shrink:0}
.seat-picker__zona-name{font-size:17px;font-weight:800;color:#111827;line-height:1.2}
.seat-picker__zona-price{font-size:13px;color:#6b7280;margin-top:1px}
/* Botones redondos (volver / cerrar): antes se centraban contra todo el
   bloque de nombre+precio+pill, que cambia de alto según el caso (2 o 3
   líneas) — quedaban en una posición distinta cada vez. Alineados arriba
   (.seat-picker__hd ahora usa flex-start) con este margin-top quedan fijos
   a la altura del título, sin importar cuánto texto haya debajo. */
.seat-picker__close{
  width:32px;height:32px;border-radius:50%;border:none;
  background:#f3f4f6;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background .15s;
  margin-top:-2px;
}
.seat-picker__close:hover{background:#e5e7eb}
.seat-picker__close svg{width:16px;height:16px;stroke:#374151}
.sp-carrito-pill{
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  background:#f3ecff;color:#7b2be0;
  padding:7px 10px;border-radius:20px;
  font-size:12.5px;font-weight:800;
}
.sp-carrito-pill svg{width:14px;height:14px}

.seat-picker__actions{
  padding:0 20px 16px;display:flex;flex-direction:column;gap:10px;
}
.sp-btn-pair{display:flex;flex-direction:column;gap:10px;width:100%}
.sp-btn-pago{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:54px;border:none;border-radius:16px;
  background:#FFCC00;color:#1C1C1E;
  font-size:15px;font-weight:800;cursor:pointer;
  transition:filter .15s,transform .1s;
  box-shadow:0 4px 14px rgba(255,204,0,.35);
}
.sp-btn-pago:hover{filter:brightness(.96)}
.sp-btn-pago:active{transform:scale(.98)}
.sp-btn-pago svg{width:17px;height:17px}
.sp-btn-pago:disabled{background:#E5E5EA;color:#AEAEB2;box-shadow:none;cursor:not-allowed}
.sp-btn-pago:disabled:hover{filter:none}
#sp-btn-agregar-pago{
  position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:3;
}
.sp-btn-best{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:54px;border:none;border-radius:16px;
  background:linear-gradient(135deg,#9333ea,#7b2be0);
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  transition:filter .15s,transform .1s;
  box-shadow:0 4px 16px rgba(123,43,224,.3);
}
.sp-btn-best:hover{filter:brightness(1.08)}
.sp-btn-best:active{transform:scale(.98)}
.sp-btn-best svg{width:18px;height:18px}
/* Fijo abajo del panel (no del todo del viewport, solo mientras haya scroll
   dentro de la hoja) — antes, elegir más asientos hacía crecer el resumen
   de arriba ("3 asientos: Fila A..."), empujaba el botón más abajo, y volvía
   a taparlo aunque ya hubieras bajado hasta ahí una vez. */
#sp-btn-pair-asientos{
  position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:3;
}
.sp-btn-best:disabled{
  background:#E5E5EA;color:#AEAEB2;
  box-shadow:none;cursor:not-allowed;
}
.sp-btn-best:disabled:hover{filter:none}
.sp-btn-best.sp-btn-quitar{
  background:#fff;color:#dc2626;
  border:1.5px solid #fecaca;
  box-shadow:none;
}
.sp-btn-best.sp-btn-quitar:hover{background:#fef2f2}
.sp-btn-manual{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:48px;border:2px solid #e0d5f5;border-radius:14px;
  background:#faf8ff;color:#5b21b6;font-size:14px;font-weight:600;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.sp-btn-manual:hover{border-color:#7b2be0;background:#f3eeff}
.sp-btn-manual svg{width:16px;height:16px;stroke:#7b2be0}
.sp-check-todo-box{
  display:flex;align-items:center;gap:7px;
  color:#7b2be0;font-size:12.5px;font-weight:700;
  cursor:pointer;user-select:none;
}
.sp-check-todo-box input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;min-width:17px;
  border:2px solid #c4b5fd;border-radius:5px;
  background:#fff;cursor:pointer;position:relative;
  transition:border-color .15s,background .15s;
}
.sp-check-todo-box input[type="checkbox"]:checked{background:#7b2be0;border-color:#7b2be0}
.sp-check-todo-box input[type="checkbox"]:checked::after{
  content:'';position:absolute;top:2px;left:5px;
  width:4px;height:8px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg);
}

/* Box completo */
.seat-picker__box-completo{padding:0 20px 16px;display:flex;flex-direction:column;gap:10px}
.sp-box-completo__desc{font-size:13px;color:#6b7280;line-height:1.5;margin:0}
.sp-box-completo__info{
  font-size:14px;font-weight:700;color:#111827;
  background:#f8f5ff;border:1px solid rgba(123,43,224,.15);border-radius:12px;
  padding:12px 14px;text-align:center;
}
/* Mini-mapa recortado del selector "Elige tu palco" (abrirSelectorSector())
   — mismo criterio visual que .mapa-zone del mapa grande, pero acá cada
   forma SIEMPRE se ve con color (no invisible-hasta-hover): el objetivo acá
   es que se note cuál es cuál, no dar contexto de fondo nomás. */
.sp-mm-box{cursor:pointer;transition:filter .15s;fill-opacity:.78}
.sp-mm-box:hover:not(.sp-mm-box--ago){filter:brightness(1.08) drop-shadow(0 0 6px rgba(0,0,0,.35))}
.sp-mm-box--ago{fill:#9ca3af!important;cursor:not-allowed;fill-opacity:.55}
.sp-mm-label{
  /* Sin font-size acá a propósito: el tamaño lo trae cada <text> como
     atributo inline, calculado según el alto real de cada box (ver
     _renderSectorMinimap) — si se fija acá, todos los números quedan del
     mismo tamaño sin importar qué tan grande sea el box. */
  font-family:'DM Sans',system-ui,sans-serif;font-weight:700;
  fill:#fff;text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-width:3px;
}
.sp-sector-list-hd{
  /* Sin margin-bottom propio: el padre (.seat-picker__box-completo) ya pone
     gap:10px entre sus hijos directos — agregarle margen acá lo duplicaba. */
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.sp-sector-minimap-wrap{position:relative}
.sp-sector-minimap{
  position:relative;border-radius:10px;border:1px solid #e5e7eb;
  /* overflow:auto (no hidden) a propósito: con zoom > 1 el contenido queda
     más grande que el marco, y esto es lo que permite arrastrar/deslizar
     para recorrer la foto en vez de quedar recortada sin forma de moverse.
     touch-action:pan-x pan-y deja el arrastre nativo tal cual (no hace falta
     reimplementarlo) pero apaga el pellizco nativo del navegador, para que
     el gesto de dos dedos le llegue entero al JS (ver el pinch más abajo)
     sin que el navegador intente zoomear la página al mismo tiempo. */
  overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
}
/* El ancho se pone en JS como porcentaje (ver _zoomSectorHacia) en vez de
   con transform:scale(). Con scale() el navegador no siempre reconoce que
   hay más contenido para recorrer (el "scrollWidth" del contenedor no
   crecía en los hechos), y quedaba trabado sin poder moverse más allá de
   la esquina donde arrancó el zoom. Cambiando el ancho de verdad, el
   contenedor (overflow:auto) sabe que hay más para el costado y deja
   arrastrar en cualquier dirección. Sin transition: con el pellizco de dos
   dedos un cambio suavizado se siente atrasado respecto al dedo. */
.sp-sector-minimap svg{display:block}

/* Número del box en el mini-mapa "Dónde queda tu zona" (_actualizarVistaPrevia) —
   mismo criterio de contorno oscuro que .sp-mm-label, pero al tamaño real del
   mapa grande (font-size va como atributo inline, ya en escala) en vez de un
   tamaño fijo pensado para el recorte chico del selector de varios box. */
.sp-preview-label{fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.65);stroke-width:4px}

/* Seat grid */
.seat-picker__grid-wrap{padding:0 16px 16px;position:relative}
.sp-grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.sp-grid{display:inline-flex;flex-direction:column;gap:4px;min-width:max-content;padding:4px}
.sp-row{display:flex;align-items:center;gap:4px}
.sp-fila-label{
  width:20px;font-size:10px;font-weight:700;color:#9ca3af;
  text-align:right;flex-shrink:0;line-height:1;
}
.sp-row--header{margin-bottom:2px}
.sp-col-label{
  width:24px;font-size:9px;font-weight:700;color:#c0c0c8;
  text-align:center;flex-shrink:0;line-height:1;
}
/* Zona angosta y alta (p.ej. tribuna lateral): la fila 1 va del lado que da
   a la cancha, así que las filas se dibujan como columnas una al lado de la
   otra (no franjas horizontales apiladas) — ver _renderGrilla. */
.sp-grid--vertical{flex-direction:row}
.sp-row--vertical{flex-direction:column}
.sp-fila-label--vertical{
  width:auto;height:16px;text-align:center;
}
.sp-seat{
  width:24px;height:24px;border-radius:7px 7px 4px 4px;border:none;
  cursor:pointer;transition:transform .1s,box-shadow .1s,background .1s;
  position:relative;animation:sp-seat-in .28s cubic-bezier(.34,1.56,.64,1) both;
  /* En Android Chrome el <button> queda con foco después de tocarlo (no hay
     blur automático en touch) y el navegador dibuja su anillo de foco +
     resalte translúcido por defecto — eso es lo que se veía como "más
     grande" al deseleccionar: el color/ícono ya estaban bien, era este halo
     extra alrededor del botón el que quedaba pegado. */
  outline:none;-webkit-tap-highlight-color:transparent;
}
.sp-seat--available{
  background:color-mix(in srgb,var(--sc,#7b2be0) 18%,#fff);
  border:1.5px solid color-mix(in srgb,var(--sc,#7b2be0) 60%,#fff);
}
/* Solo en dispositivos con mouse de verdad — en touch, el navegador simula
   ":hover" después de tocar y se queda "pegado" hasta el próximo toque en
   otro lado (no hay forma de "sacar el mouse de encima" en una pantalla
   táctil). Sin este filtro, al deseleccionar un asiento en el celular el
   color volvía a "disponible" pero el tamaño se quedaba agrandado, como si
   siguiera elegido. */
@media (hover: hover) and (pointer: fine) {
  .sp-seat--available:hover{
    transform:scale(1.2);z-index:2;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
  }
}
.sp-seat--selected{
  background:var(--sc,#7b2be0);
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sc,#7b2be0);
  transform:scale(1.12);z-index:2;
}
.sp-seat--sold{
  background:#e5e7eb;border:1.5px solid #d1d5db;
  cursor:not-allowed;opacity:.65;
}
.sp-seat__icon{
  position:absolute;inset:0;margin:auto;width:12px;height:12px;
  opacity:0;transform:scale(.4);pointer-events:none;color:#fff;
  transition:opacity .15s,transform .15s;
}
.sp-seat--selected .sp-seat__icon--check{opacity:1;transform:scale(1)}
.sp-seat--sold .sp-seat__icon--x{opacity:1;transform:scale(1);color:#9ca3af}
/* Silueta de silla (SP_ICON_CHAIR): la forma "de base" del asiento, visible
   siempre salvo cuando está seleccionado (ahí manda el check, para no
   amontonar dos íconos). En "disponible" el fondo es un tinte claro del
   color de la zona, así que la silla se pinta oscura (no blanca como el
   check/x) para que se note encima de ese fondo claro. */
.sp-seat__icon--chair{
  width:15px;height:15px;opacity:.85;transform:scale(1);
  color:color-mix(in srgb,var(--sc,#7b2be0) 70%,#000);
}
.sp-seat--selected .sp-seat__icon--chair{opacity:0;transform:scale(.4)}
.sp-seat--sold .sp-seat__icon--chair{opacity:.7;color:#9ca3af}
/* Box siempre es chico (hasta ~10 asientos) — se centra en vez de quedar
   pegado a la izquierda con un montón de espacio vacío al lado, y los
   asientos se agrandan para que sean más fáciles de tocar. Zonas de
   asientos numerados (que sí pueden ser grandes y necesitar scroll) no
   llevan esta clase, se quedan con el tamaño compacto de siempre. */
.sp-grid-scroll--box{display:flex;justify-content:center}
.sp-grid-scroll--box .sp-seat{width:44px;height:44px;border-radius:12px 12px 7px 7px}
.sp-grid-scroll--box .sp-seat__icon--chair{width:26px;height:26px}
.sp-grid-scroll--box .sp-seat__icon--check,
.sp-grid-scroll--box .sp-seat__icon--x{width:22px;height:22px}
.sp-grid-scroll--box .sp-fila-label{width:26px;font-size:13px}
.sp-grid-scroll--box .sp-col-label{width:44px;font-size:11px}
.sp-grid-scroll--box .sp-row,
.sp-grid-scroll--box .sp-grid{gap:8px}
@keyframes sp-seat-in{
  from{opacity:0;transform:scale(.4)}
  to{opacity:1;transform:scale(1)}
}
@keyframes sp-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
.sp-seat--shake{animation:sp-shake .3s ease}
.sp-seat-tip{
  position:absolute;transform:translate(-50%,-125%);
  background:#111827;color:#fff;font-size:11px;font-weight:700;
  padding:5px 9px;border-radius:7px;pointer-events:none;
  opacity:0;transition:opacity .12s,transform .12s;white-space:nowrap;z-index:60;
}
.sp-seat-tip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#111827;
}
.sp-seat-tip--show{opacity:1;transform:translate(-50%,-135%)}
.sp-legend{
  display:flex;gap:14px;margin-top:10px;
  justify-content:center;flex-wrap:wrap;
}
.sp-leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#6b7280}
.sp-leg-dot{width:14px;height:14px;border-radius:4px;display:inline-block;flex-shrink:0}
/* Mismas fórmulas de color que .sp-seat--available/--selected, para que la
   leyenda combine con el color real de la zona (--sc, seteada en JS). */
.sp-leg-dot--available{
  background:color-mix(in srgb,var(--sc,#7b2be0) 18%,#fff);
  border:1.5px solid color-mix(in srgb,var(--sc,#7b2be0) 60%,#fff);
}
.sp-leg-dot--selected{background:var(--sc,#7b2be0);box-shadow:0 0 0 2px var(--sc,#7b2be0)}
.sp-leg-dot--sold{background:#e5e7eb;border:1.5px solid #d1d5db}

/* Loading */
.sp-loading{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:28px 20px;color:#7b2be0;font-weight:600;font-size:14px;
}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.sp-spinner{
  width:24px;height:24px;border-radius:50%;
  border:3px solid rgba(123,43,224,.2);border-top-color:#7b2be0;
  animation:sp-spin .7s linear infinite;flex-shrink:0;
}

/* Summary / timer */
/* Separa visualmente "lo que ya elegiste" de la leyenda de arriba — antes
   quedaban pegados sin espacio entre sí, como si fueran el mismo bloque. */
.sp-resumen-card{
  margin-top:16px;
  padding:12px 14px;
  background:#f8f5ff;
  border-radius:14px;
}
.sp-selected-info{
  font-size:14px;color:#374151;margin-bottom:6px;line-height:1.55;
}
.sp-selected-info strong{color:#111827}
/* Contador como píldora chica junto al total (no arriba en el header, ahí
   quedaba perdido entre varios elementos y no se notaba). Colores neutros
   (violeta suave) en vez de negro; pasa a rojo solo cuando queda poco
   tiempo. */
.sp-timer-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:7px 13px;border-radius:20px;white-space:nowrap;
  background:#f3ecff;color:#7b2be0;flex-shrink:0;
}
.sp-timer-pill span{font-weight:800}
.sp-timer-pill svg{width:14px;height:14px;flex-shrink:0}
.sp-timer--urgent{background:#fbe7e7;color:#b23434;animation:sp-timer-pulse 1s ease-in-out infinite}
@keyframes sp-timer-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.sp-total-price{
  font-size:22px;font-weight:800;color:#7b2be0;margin-bottom:0;
}
.sp-resumen-card__bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Pill de disponibilidad */
.sp-disp-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:20px;margin-top:3px;
}
.sp-disp-pill--ok{background:#e7f9ee;color:#177a43}
.sp-disp-pill--low{background:#fcf1dc;color:#8a5a0c}
.sp-disp-pill--crit{background:#fbe7e7;color:#b23434}

/* Banner de reserva expirada (reemplaza el alert()) */
.sp-expired-banner{
  display:none;
  align-items:center;gap:10px;
  background:#fbe7e7;border:1px solid #f3c6c6;border-radius:14px;
  padding:14px 16px;margin-bottom:14px;
}
.sp-expired-banner.is-visible{display:flex}
.sp-expired-banner__icon{
  width:32px;height:32px;border-radius:50%;background:#f3c6c6;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sp-expired-banner__icon svg{width:16px;height:16px;stroke:#b23434}
.sp-expired-banner__text{flex:1;font-size:13px;color:#7a2020;line-height:1.4}
.sp-expired-banner__text strong{display:block;font-size:14px;margin-bottom:2px}
.sp-expired-banner__btn{
  flex-shrink:0;border:none;border-radius:10px;background:#b23434;color:#fff;
  font-size:12px;font-weight:700;padding:9px 12px;cursor:pointer;
}
.sp-expired-banner__btn:hover{filter:brightness(1.1)}

/* Fila compacta arriba de la grilla: "seleccionar todo" (link, a la
   izquierda, solo para box por asiento) + zoom (derecha) — antes eran dos
   filas separadas, ocupando espacio fijo antes de llegar a un solo asiento
   tocable. */
.sp-grid-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 4px 6px;min-height:28px;
}

/* Zoom de la grilla (V1: botones, sin gesto de pellizco) */
.sp-grid-zoom{
  display:flex;justify-content:flex-end;gap:6px;margin-left:auto;
}
.sp-zoom-btn{
  width:28px;height:28px;border-radius:8px;border:1.5px solid #e0d5f5;
  background:#faf8ff;color:#7b2be0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.sp-zoom-btn svg{width:16px;height:16px;pointer-events:none}
.sp-zoom-btn:hover{background:#f3eeff;border-color:#7b2be0}
.sp-grid-scroll{transition:transform .15s ease}

/* Mini mapa: miniatura de toda la grilla + rectángulo de "estás viendo esto" */
.sp-minimap{
  position:relative;margin:6px 4px 10px;padding:6px 8px;
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;
  overflow:hidden;cursor:pointer;
}
.sp-minimap__grid{display:flex;flex-direction:column;gap:1px;pointer-events:none}
.sp-minimap__row{display:flex;gap:1px}
.sp-minimap__seat{width:3px;height:3px;border-radius:1px;flex-shrink:0}
.sp-minimap__viewport{
  position:absolute;top:2px;bottom:2px;
  border:1.5px solid #7b2be0;background:rgba(123,43,224,.12);
  border-radius:4px;pointer-events:none;transition:left .1s ease,width .1s ease;
}

/* Mini-mapa REAL del recinto (clon del mapa de la página, ver
   _actualizarVistaPrevia): dónde queda tu zona dentro de todo el lugar.
   Ancho fijo chico, sin borde ni título — su función es solo dar una
   referencia rápida de ubicación, no ser un mapa navegable en detalle. */
.sp-preview-vista{
  position:relative;
  width:220px;margin:0 auto 14px;
  border-radius:12px;overflow:hidden;line-height:0;
  background:#f8fafc;
}
.sp-preview-vista__map-wrap{width:100%}
.sp-preview-vista__map-wrap svg{width:100%;height:auto;display:block}
/* Zona elegida: resaltada por JS (fill/stroke inline); el resto de zonas
   se atenúa (opacity) para que la propia se note de inmediato. */
.sp-preview-vista__marker{
  position:absolute;width:18px;height:18px;
  background:#fff;border:4px solid #7b2be0;border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:none;
}
/* Skeleton loader de la grilla */
.sp-grid-skel{padding:4px}
.sp-grid-skel__row{display:flex;gap:4px;margin-bottom:4px}
.sp-grid-skel__seat{
  width:24px;height:24px;border-radius:7px 7px 4px 4px;
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);
  background-size:200px 100%;animation:sp-skel-shimmer 1.3s infinite linear;
}
@keyframes sp-skel-shimmer{from{background-position:-200px 0}to{background-position:200px 0}}

/* Mini grilla del box completo */
.sp-box-mini-grid{
  display:flex;flex-direction:column;gap:3px;align-items:center;
  padding:10px 0;
}
.sp-box-mini-grid .sp-row{gap:3px;flex-wrap:wrap;justify-content:center;max-width:260px}
.sp-box-mini-grid .sp-seat{width:14px;height:14px;border-radius:4px 4px 3px 3px;cursor:default}
.sp-box-mini-grid .sp-seat:hover{transform:none;box-shadow:none}

@media(min-width:600px){
  .seat-picker{align-items:center}
  .seat-picker__sheet{border-radius:24px;max-height:88vh}
  .seat-picker__sheet::before{display:none}
}

/* ── Carrito unificado: barra inferior + hoja (estilo "carrito" de e-commerce) ── */
.carrito-bar{
  display:flex;align-items:center;gap:14px;
  position:fixed;left:0;right:0;bottom:0;
  /* Por encima de .sticky-bar (z-index:200) — en el raro caso de que ambas
     coincidan (cola virtual + carrito con algo adentro), el carrito gana. */
  z-index:210;
  /* Mismo estilo "vidrio esmerilado" que tenía el .sticky-bar original,
     para que se sienta parte del mismo sistema y no un elemento aparte. */
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(0,0,0,.08);
  color:#1C1C1E;
  padding:20px 20px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 28px rgba(0,0,0,.12);
  transition:bottom .2s;
}
/* Barrita tipo "grabber" de bottom-sheet — anticipa que hay algo para
   desplegar hacia arriba antes de tocar nada, mismo recurso que ya reconoce
   cualquiera de apps como Uber/Google Maps/Instagram. */
.carrito-bar::before{
  content:'';
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:2px;
  background:rgba(0,0,0,.15);
}
/* Si además hay .sticky-bar visible (cola virtual activa), la barra del
   carrito sube para no taparla — la clase la pone PHP según $sticky_show. */
.carrito-bar--con-sticky-bar{
  bottom:calc(72px + env(safe-area-inset-bottom)) !important;
}
.carrito-bar__info{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  background:none;border:none;color:#1C1C1E;cursor:pointer;padding:7px 0;
  text-align:left;-webkit-tap-highlight-color:transparent;
  appearance:none;-webkit-appearance:none;
}
.carrito-bar__icon-wrap{position:relative;display:flex;flex-shrink:0}
.carrito-bar__info svg{width:22px;height:22px;flex-shrink:0;color:#7b2be0}
.carrito-bar__info svg.carrito-bar__chevron{width:17px;height:17px;color:#9ca3af;margin-left:-2px}
/* Esto antes decía ".carrito-bar__info span" — le pegaba a CUALQUIER span
   adentro del botón, incluido el badge de más abajo, y por tener más
   especificidad que ".carrito-bar__badge" le imponía font-size:15px y
   overflow:hidden + ellipsis a una burbuja de 17px: esa era la causa real de
   que el número se viera cortado, no la posición. Acotado solo al precio. */
#carrito-bar-resumen{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Badge de cantidad ENCIMA del ícono (esquina superior derecha), en el
   color de marca — mismo patrón que el carrito de cualquier e-commerce. */
.carrito-bar__badge{
  position:absolute;top:-6px;right:-7px;
  min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:#7b2be0;color:#fff;
  font-size:10.5px;font-weight:800;line-height:1;
  border-radius:9px;border:2px solid rgba(255,255,255,.96);
}
.carrito-bar__btn{
  flex-shrink:0;
  background:#FFCC00;color:#1C1C1E;
  font-size:15.5px;font-weight:800;
  padding:14px 24px;border-radius:16px;
  text-decoration:none;white-space:nowrap;
  transition:filter .15s;
}
.carrito-bar__btn:hover{filter:brightness(.95)}
.carrito-bar__btn--disabled{
  background:#E5E5EA;color:#AEAEB2;
  pointer-events:none;
}

.carrito-sheet{
  /* Por encima de .sticky-bar (200): al abrir el carrito tiene que tapar
     esa barra por completo, no quedar detrás. */
  display:none;position:fixed;inset:0;z-index:210;align-items:flex-end;justify-content:center;
}
.carrito-sheet__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.45);
  opacity:0;transition:opacity .25s;
}
.carrito-sheet--open .carrito-sheet__backdrop{opacity:1}
.carrito-sheet__panel{
  position:relative;width:100%;max-width:600px;max-height:80vh;
  background:#fff;border-radius:20px 20px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:2px;
  transform:translateY(100%);transition:transform .28s ease;
  box-shadow:0 -8px 30px rgba(0,0,0,.2);
}
.carrito-sheet--open .carrito-sheet__panel{transform:translateY(0)}
.carrito-sheet__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.carrito-sheet__hd h3{font-size:17px;font-weight:800;color:#1C1C1E}
.carrito-sheet__hd button{appearance:none;-webkit-appearance:none;padding:0;background:#f3f4f6;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#6b7280;cursor:pointer}
.carrito-sheet__hd button svg{width:14px;height:14px;flex-shrink:0}
.carrito-sheet__list{overflow-y:auto;max-height:45vh;margin-bottom:10px}
.carrito-sheet__empty{padding:20px 4px;color:#9ca3af;font-size:14px;text-align:center}
.carrito-sheet__item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F2F2F7}
.carrito-sheet__item:last-child{border-bottom:none}
.carrito-sheet__item-body{flex:1;min-width:0}
.carrito-sheet__item-nombre{font-size:14px;font-weight:700;color:#1C1C1E}
.carrito-sheet__item-sub{font-size:12px;color:#8E8E93;margin-top:1px}
.carrito-sheet__item-timer{color:#7b2be0;font-weight:700;font-size:12px;margin-top:2px}
.carrito-sheet__item-timer--urgent{color:#b23434}
.carrito-sheet__item-precio{font-size:14px;font-weight:800;color:#7b2be0;flex-shrink:0}
.carrito-sheet__item-quitar{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:#fef2f2;color:#dc2626;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.carrito-sheet__item-quitar svg{width:12px;height:12px}
.carrito-sheet__total{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:15px;font-weight:700;color:#1C1C1E;border-top:1px solid #F2F2F7}
.carrito-sheet__btn{
  display:block;text-align:center;
  background:#FFCC00;color:#1C1C1E;
  font-size:15px;font-weight:800;
  padding:14px;border-radius:14px;
  text-decoration:none;margin-top:8px;
}

.yk-toast{
  display:none;align-items:center;gap:8px;
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));
  /* Por encima de TODO, incluido el panel de selección de asientos
     (.seat-picker, z-index:9000) — antes quedaba en 220, así que cualquier
     aviso mientras el panel estaba abierto (el límite por persona al elegir
     asientos, por ejemplo) se disparaba igual pero quedaba tapado atrás del
     panel: invisible, aunque el código sí corría. */
  z-index:9500;
  transform:translate(-50%,10px) scale(.92);
  background:#1C1C1E;color:#fff;
  font-size:13.5px;font-weight:600;line-height:1.4;
  padding:11px 18px;border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  opacity:0;transition:opacity .2s,transform .35s cubic-bezier(.34,1.56,.64,1);
  white-space:normal;text-align:center;max-width:min(340px,90vw);
}
.yk-toast--visible{opacity:1;transform:translate(-50%,0) scale(1)}
/* Verde para confirmaciones (agregar/quitar del carrito) — antes se veían
   igual que cualquier otro aviso, solo el error se distinguía por color. */
.yk-toast--success{background:#16a34a}
.yk-toast--error{background:#dc2626}

/* Respeta la preferencia del sistema de reducir movimiento — quita rebotes,
   parpadeos y animaciones largas, dejando solo cambios instantáneos. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}