/* ============================================================
   SUPERBOLETOS · FLUJO DE COMPRA
   Pasos 1 a 4. Cabecera sólida (no el degradado del sitio
   público), pasos en forma de galón y barra lateral fija.
   ============================================================ */

body.compra{ background:var(--lienzo); }

/* ------------------------------------------------------------
   CABECERA DEL CHECKOUT
   ------------------------------------------------------------ */
.cab-compra{
  position:sticky; top:0; z-index:60;
  height:var(--compra-alto);
  background:var(--indigo-compra); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:22px;
}
.cab-compra .logo__marca{ background:#fff; color:var(--indigo-compra); }

/* ------------------------------------------------------------
   BARRA DE PASOS (galones)
   ------------------------------------------------------------ */
.galones{
  position:sticky; top:var(--compra-alto); z-index:55;
  min-height:var(--pasos-alto);
  background:var(--papel);
  border-bottom:1px solid var(--linea);
  display:flex; align-items:stretch; justify-content:space-between; gap:12px;
}
.galones__lista{ display:flex; align-items:stretch; flex:1; min-width:0; }

.galon{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:10px 26px 10px 22px;
  font-size:13px; font-weight:600; line-height:1.15;
  color:var(--tinta-tenue);
  max-width:210px;
}
/* La punta del galón */
.galon::after{
  content:''; position:absolute; right:-1px; top:0; bottom:0; width:22px;
  background:inherit;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.galon__num{
  flex:none; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--linea); background:var(--papel);
  font-size:12px; font-weight:700; color:var(--tinta-tenue);
}
.galon--hecho{ color:var(--indigo-hondo); }
.galon--hecho .galon__num{ background:var(--indigo-compra); border-color:var(--indigo-compra); color:#fff; }
.galon--activo{ background:#ece9fb; color:var(--indigo-hondo); }
.galon--activo .galon__num{ background:var(--carmin); border-color:var(--carmin); color:#fff; }

.cronometro{
  flex:none; display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  padding:8px 24px; text-align:right;
}
.cronometro__rotulo{
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--carmin);
}
.cronometro__reloj{
  font-family:var(--fuente-dato); font-size:24px; font-weight:500;
  letter-spacing:.06em; color:var(--indigo-hondo);
}
.cronometro--urge .cronometro__reloj{ color:var(--carmin); animation:pulso 1s ease-in-out infinite; }

/* ============================================================
   PASO 1 · FECHA Y CANTIDAD
   ============================================================ */
.tarjeta-paso1{
  max-width:560px; margin:44px auto;
  background:var(--papel); border:1px solid var(--linea);
  border-radius:4px; box-shadow:var(--sombra-baja);
  padding:26px 30px 30px;
}
.evento-mini{ display:grid; grid-template-columns:98px 1fr; gap:18px; align-items:start; }
.evento-mini__cartel{
  width:98px; height:98px; border-radius:3px; object-fit:cover;
  background:var(--indigo-hondo);
}
.evento-mini__recinto{
  font-family:var(--fuente-serif); font-style:italic;
  font-size:14.5px; color:var(--tinta-suave); line-height:1.35;
}
.evento-mini__titulo{
  margin-top:8px; font-size:19px; font-weight:700; color:var(--carmin);
  letter-spacing:-.01em;
}
.evento-mini__fecha{
  margin-top:2px; font-family:var(--fuente-serif); font-style:italic;
  font-size:14px; color:var(--tinta-suave);
}

.rotulo-campo{
  margin:26px 0 12px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--carmin);
}

.opcion-fecha{ display:flex; align-items:center; gap:12px; cursor:pointer; padding:6px 0; }
.opcion-fecha input{ position:absolute; opacity:0; width:0; }
.marca-radio{
  flex:none; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--morado-btn); display:grid; place-items:center;
}
.marca-radio::after{ content:''; width:10px; height:10px; border-radius:50%; background:transparent; }
.opcion-fecha input:checked + .marca-radio::after{ background:var(--morado-btn); }
.opcion-fecha input:focus-visible + .marca-radio{ outline:3px solid var(--morado-btn); outline-offset:2px; }
.opcion-fecha{ align-items:flex-start; }
.opcion-fecha__texto{ flex:1; min-width:0; font-size:14.5px; color:var(--morado-btn); line-height:1.35; }
/* Segunda línea con el recinto: la gira repite fecha y hora en
   siete plazas, así que lo que distingue una opción de otra es
   el lugar, no el día. */
.opcion-fecha__texto b{
  display:block; margin-top:2px;
  font-size:12.5px; font-weight:600; color:var(--tinta-suave);
}
.marca-radio{ margin-top:1px; }
.insignia-mes{
  font-size:10px; font-weight:700; letter-spacing:.04em;
  color:var(--morado-btn); border:1px solid var(--morado-btn);
  border-radius:3px; padding:2px 6px;
}

.contador-boletos{ display:flex; align-items:center; justify-content:flex-end; gap:22px; }
.contador-boletos button{
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--morado-btn); background:none;
  color:var(--morado-btn); font-size:18px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.contador-boletos button:disabled{ opacity:.3; cursor:not-allowed; }
.contador-boletos output{
  min-width:34px; text-align:center;
  font-size:26px; font-weight:600; color:var(--indigo-hondo);
}

.linea-divisoria{ height:1px; background:var(--linea); margin:24px 0; }

.btn--principal{
  background:var(--degradado-cta); color:#fff;
  min-width:212px;
  box-shadow:0 4px 16px rgba(224,36,94,.34);
}
.centrado{ display:flex; justify-content:center; }

/* ============================================================
   PASO 2 · SELECCIÓN DE ASIENTOS
   ============================================================ */
.compra-cuerpo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 392px;
  min-height:calc(100vh - var(--compra-alto) - var(--pasos-alto));
}

/* ---------------- Zona del mapa ---------------- */
.mapa{ display:flex; flex-direction:column; min-width:0; }

.mapa__barra{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:16px 20px 6px;
}
.interruptor{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--linea); border-radius:3px;
  background:var(--papel); padding:8px 16px;
  font-size:13.5px; color:var(--tinta); cursor:pointer;
}
.interruptor input{ position:absolute; opacity:0; width:0; }
.interruptor__riel{
  width:40px; height:20px; border-radius:var(--radio-pastilla);
  background:var(--morado-btn); position:relative; transition:background .18s ease;
}
.interruptor__riel::after{
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  transition:transform .18s ease;
}
.interruptor input:checked + .interruptor__riel::after{ transform:translateX(20px); }
.interruptor input:focus-visible + .interruptor__riel{ outline:3px solid var(--morado-btn); outline-offset:3px; }
.interruptor__lado{ color:var(--tinta-suave); }
.interruptor__lado--on{ color:var(--indigo-hondo); font-weight:600; }

.lupa{ display:flex; gap:8px; }
.lupa button{
  width:42px; height:36px; border:1px solid var(--linea); border-radius:3px;
  background:var(--papel); color:var(--indigo-hondo);
  font-size:18px; cursor:pointer;
}
.lupa button:hover{ background:var(--papel-tenue); }

/* ---------------- Plano general ---------------- */
.mapa__vista{ flex:1; display:flex; min-height:0; padding:0 20px 20px; }
.mapa__vista[hidden]{ display:none; }

#planoRecinto{ width:100%; height:100%; max-height:74vh; margin-inline:auto; display:block; }
.plano__lienzo{ transition:transform .2s ease; transform-origin:center; }

.seccion{ cursor:pointer; }
.seccion__forma{
  stroke:#fff; stroke-width:1.2;
  transition:filter .15s ease;
}
.seccion:hover .seccion__forma{ filter:brightness(1.18); }
.seccion__num{
  font-family:var(--fuente-titulo); font-size:9px; font-weight:600;
  fill:#fff; text-anchor:middle; dominant-baseline:middle;
  pointer-events:none; paint-order:stroke;
  stroke:rgba(0,0,0,.25); stroke-width:1.6;
}
.seccion--sinventa{ cursor:default; }
.seccion--sinventa .seccion__forma{ fill:#fbfbfe !important; stroke:#dcdeea; }
.seccion--sinventa .seccion__num{ fill:#a9abbd; stroke:none; }
.seccion--agotada{ cursor:not-allowed; }
.seccion--agotada .seccion__forma{ fill:#dfe1ec !important; }
.seccion--agotada .seccion__num{ fill:#8b8da3; stroke:none; }
.seccion--apagada .seccion__forma{ opacity:.22; }
.seccion:focus-visible{ outline:none; }
.seccion:focus-visible .seccion__forma{ stroke:var(--indigo-hondo); stroke-width:3; }

.escenario-caja{ fill:#3b3b45; }
.escenario-rot{
  font-family:var(--fuente-titulo); font-size:12px; font-weight:600;
  fill:#fff; letter-spacing:.14em; text-anchor:middle;
}

/* Globo de información */
.globo{
  position:fixed; z-index:120; pointer-events:none;
  background:#17171f; color:#fff;
  border-radius:4px; padding:12px 18px 14px;
  min-width:186px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px); transition:opacity .12s ease, transform .12s ease;
}
.globo.visible{ opacity:1; transform:translateY(0); }
.globo__nivel{ font-size:14px; font-weight:700; letter-spacing:.01em; }
.globo__seccion{
  margin-top:6px; font-size:10px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:#b9bacb;
}
.globo__precio{ margin-top:4px; font-size:22px; font-weight:600; }
.globo__disp{
  margin-top:6px; font-size:10px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:#b9bacb;
}

/* ---------------- Vista de sección ---------------- */
.seccion-vista{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:24px; width:100%; }

.seccion-lateral{ align-self:start; }
.tarjeta-mini{
  border:1px solid var(--linea); background:var(--papel);
  border-radius:3px; padding:14px;
}
.btn-mapa-general{
  display:block; margin-left:auto;
  border:1px solid var(--morado-btn); border-radius:3px;
  background:var(--papel); color:var(--morado-btn);
  font-size:11px; font-weight:700; line-height:1.15;
  padding:7px 11px; cursor:pointer; text-align:center;
}
.btn-mapa-general:hover{ background:#f2f0fd; }
#miniPlano{ width:100%; height:auto; margin-top:10px; }

.tarjeta-mini__nivel{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.punto-nivel{ width:14px; height:14px; border-radius:50%; flex:none; }
.tarjeta-mini__nombre{ font-size:15px; font-weight:700; color:var(--carmin); }
.tarjeta-mini__precio{ margin-top:6px; font-size:19px; font-weight:600; color:var(--indigo-hondo); }
.tarjeta-mini__disp{ margin-top:2px; font-size:12.5px; color:var(--tinta-suave); }

.ficha-seccion{
  margin-top:14px; border-top:1px solid var(--linea);
  display:grid; grid-template-columns:88px 1fr;
}
.ficha-seccion__caja{
  background:#eceef6; padding:10px 6px; text-align:center;
  font-size:10.5px; font-weight:700; line-height:1.35; color:var(--indigo-hondo);
}

/* ---------------- Rejilla rotada ---------------- */
.seccion-rejilla{ overflow:auto; padding:4px 0 18px; }
.rejilla-marco{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:max-content; margin-inline:auto;
  transform-origin:top center; transition:transform .18s ease;
}
.rejilla-letras{ display:flex; gap:6px; }
.rejilla-letras span{
  width:22px; text-align:center;
  font-family:var(--fuente-dato); font-size:11px; color:var(--tinta-suave);
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.rejilla{ display:flex; gap:6px; }
.columna{ display:flex; flex-direction:column-reverse; gap:3px; }

.celda{ display:flex; align-items:center; gap:2px; }
.celda__num{
  width:8px;
  font-family:var(--fuente-dato); font-size:7.5px; color:var(--tinta-tenue);
  writing-mode:vertical-rl; transform:rotate(180deg);
}

.butaca{
  width:14px; height:14px; padding:0; border:0; border-radius:4px;
  background:#d7d9e3; cursor:pointer; flex:none;
  transition:transform .1s ease, background .1s ease;
}
.butaca:hover:not(:disabled){ transform:scale(1.35); z-index:2; }
.butaca:focus-visible{ outline:2px solid var(--morado-btn); outline-offset:2px; z-index:3; }
.butaca--ocupado{ background:#1c1c26; cursor:not-allowed; }
.butaca--ocupado:hover{ transform:none; }

/* Lugar que el usuario ya compró: sale de `sb_mis_boletos`, no del
   sorteo del recinto. Se deshabilita igual que un vendido, pero en
   carmín y con un anillo, para que se lea "esto ya es tuyo" y no
   "alguien te lo ganó". */
.butaca--mio{
  background:var(--asiento-mio);
  box-shadow:0 0 0 2px var(--papel), 0 0 0 3.5px rgba(224,31,74,.45);
  cursor:not-allowed;
}
.butaca--mio:hover{ transform:none; }
.butaca--seleccionado{ background:#4c4fdb; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #4c4fdb; }
.butaca--sacudir{ animation:sacudir .32s ease; }
@keyframes sacudir{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* ============================================================
   BARRA LATERAL
   ============================================================ */
.lado{
  background:var(--papel); border-left:1px solid var(--linea);
  display:flex; flex-direction:column;
  max-height:calc(100vh - var(--compra-alto) - var(--pasos-alto));
  position:sticky; top:calc(var(--compra-alto) + var(--pasos-alto));
}

/* El asa del cajón inferior.
   OJO · Esta regla tiene que quedar ANTES de las media queries.
   Estaba al final del archivo y, con la misma especificidad y más
   abajo en la cascada, le ganaba al `display:flex` de
   @media (max-width:920px): el asa nunca se dibujaba en teléfono,
   el cajón no se podía abrir y el botón CONTINUAR quedaba fuera
   de alcance. En escritorio sigue oculta, igual que antes. */
.lado__tirador{
  display:none; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--linea);
  background:var(--papel); cursor:pointer; border:0; width:100%;
  font-size:14px; font-weight:600; color:var(--indigo-hondo);
}

.lado__evento{ display:grid; grid-template-columns:70px 1fr; gap:12px; padding:14px 16px; }
.lado__cartel{ width:70px; height:70px; object-fit:cover; border-radius:2px; background:var(--indigo-hondo); }
.lado__titulo{ font-size:15.5px; font-weight:700; color:var(--carmin); line-height:1.2; }
.lado__recinto{
  margin-top:5px; font-family:var(--fuente-serif); font-style:italic;
  font-size:13px; color:var(--tinta-suave); line-height:1.4;
}
.lado__fecha{
  margin-top:4px; font-family:var(--fuente-serif); font-style:italic;
  font-weight:600; font-size:13px; color:var(--indigo-hondo);
}

.lado__cantidad{
  display:flex; align-items:center; gap:12px;
  background:#cfd0e8; padding:7px 16px;
  font-size:13px; font-weight:600; color:var(--indigo-hondo);
}
.btn-editar{
  border:1px solid var(--morado-btn); border-radius:var(--radio-pastilla);
  background:var(--papel); color:var(--morado-btn);
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:3px 13px; cursor:pointer;
}
.btn-editar:hover{ background:#f2f0fd; }

/* --------- Lista de niveles de precio --------- */
.niveles{ overflow-y:auto; flex:1; }

.nivel{ border-bottom:1px solid var(--linea); }
.nivel__cabeza{
  width:100%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  padding:11px 16px 12px 20px; text-align:left;
  background:var(--papel); border:0; border-left:4px solid var(--gris);
  cursor:pointer;
}
.nivel__cabeza:hover{ background:var(--papel-tenue); }
.nivel--activo .nivel__cabeza{ background:#ece9fb; }
.nivel--agotado .nivel__cabeza{ cursor:not-allowed; }
.nivel__nombre{ font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.nivel__precio{ margin-top:3px; font-size:19px; font-weight:600; color:var(--indigo-hondo); }
.nivel__msi{ margin-top:1px; font-size:12px; color:var(--tinta-suave); }
.nivel__nodisp{ margin-top:3px; font-size:12px; font-weight:700; color:var(--carmin); }
.nivel__insignia{
  display:inline-block; margin-top:6px;
  border:1px solid var(--linea); border-radius:2px;
  padding:1px 6px; font-size:9.5px; font-weight:700;
  letter-spacing:.05em; color:var(--tinta-suave);
}
.nivel__contador{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--morado-btn); color:#fff;
  font-family:var(--fuente-dato); font-size:12px; font-weight:600;
}
.nivel__flecha{ width:15px; height:15px; color:var(--tinta-suave); transition:transform .18s ease; }
.nivel--abierto .nivel__flecha{ transform:rotate(180deg); }

/* --------- Boletos elegidos --------- */
.boleto-linea{ border-top:1px solid var(--linea); background:var(--papel); }
.boleto-linea__cabeza{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:9px 16px 6px 20px;
}
.boleto-linea__rotulo{
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.boleto-linea__precio{ font-size:13px; font-weight:600; color:var(--indigo-hondo); }
.boleto-tabla{
  display:grid; grid-template-columns:52px 74px 1fr 34px;
  align-items:center; padding:0 16px 11px 20px; gap:4px;
}
.boleto-tabla dt{
  font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--tinta-tenue);
}
.boleto-tabla dd{ margin:0; font-size:12.5px; color:var(--tinta); }
.btn-basura{
  grid-row:span 2; justify-self:end;
  width:30px; height:30px; border:0; border-radius:50%;
  background:none; color:var(--carmin); cursor:pointer;
  display:grid; place-items:center;
}
.btn-basura:hover{ background:#fde7ed; }
.btn-basura svg{ width:16px; height:16px; }

/* --------- Pie de la barra --------- */
.lado__pie{ border-top:1px solid var(--linea); background:var(--papel); }
.pagos{ padding:14px 16px 10px; }
.pagos__rotulo{
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--carmin); margin-bottom:9px;
}
.pagos__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pagos__logo{
  height:22px; padding:2px 7px; border-radius:3px;
  background:var(--papel-tenue); border:1px solid var(--linea);
  font-size:9.5px; font-weight:700; color:var(--tinta-suave);
  display:grid; place-items:center; letter-spacing:.02em;
}
.pagos__bancos{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pagos__banco{
  border:1px solid var(--linea); border-radius:2px;
  padding:5px 9px; font-size:10px; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; color:var(--tinta-suave);
}
.insignia-msi{
  background:#4fe0c0; color:#0d3a32; border-radius:2px;
  padding:2px 7px; font-size:10px; font-weight:800; letter-spacing:.04em;
}

.lado__total{
  display:flex; justify-content:flex-end; align-items:baseline; gap:10px;
  padding:12px 20px; border-top:1px solid var(--linea);
}
.lado__total b{ font-size:26px; font-weight:600; color:var(--indigo-hondo); }

.lado__acciones{
  display:flex; align-items:center; justify-content:flex-end; gap:20px;
  padding:12px 20px 16px; border-top:1px solid var(--linea);
}
.btn-anterior{
  background:none; border:0; cursor:pointer;
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-suave);
}
.btn-anterior:hover{ color:var(--indigo-hondo); }
.btn--indigo{ background:var(--morado-btn); color:#fff; padding:13px 34px; }

/* ============================================================
   PASO 3 · BOLETOS
   ============================================================ */
.paso3{
  display:grid; grid-template-columns:minmax(0,1fr) 386px;
  gap:26px; max-width:1180px; margin:34px auto; padding-inline:22px;
}
.bloque{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:3px; padding:20px 24px; margin-bottom:18px;
}
.bloque__titulo{ display:flex; align-items:center; gap:12px; font-size:17px; color:var(--indigo-hondo); }
.bloque__titulo svg{ width:24px; height:24px; color:var(--carmin); flex:none; }

.opcion-entrega{ padding:14px 0; border-bottom:1px solid var(--linea); }
.opcion-entrega:last-child{ border-bottom:0; padding-bottom:0; }
.opcion-entrega__fila{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.opcion-entrega__nombre{ flex:1; font-size:14.5px; color:var(--morado-btn); }
.opcion-entrega__costo{ font-size:14px; font-weight:600; color:var(--indigo-hondo); }
.opcion-entrega__detalle{
  margin:8px 0 0 32px; font-size:13.5px; line-height:1.5; color:var(--tinta-suave);
}

.seguro{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; }
.seguro__precio{ text-align:right; }
.seguro__precio b{ display:block; font-size:14px; color:var(--indigo-hondo); }
.seguro__precio span{ font-size:19px; font-weight:600; color:var(--indigo-hondo); }

.resumen-compra{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:3px; overflow:hidden; align-self:start;
  position:sticky; top:calc(var(--compra-alto) + var(--pasos-alto) + 20px);
}
.resumen-compra__titulo{ padding:16px 20px; font-size:17px; color:var(--indigo-hondo); border-bottom:1px solid var(--linea); }
.resumen-compra__cuerpo{ padding:16px 20px; }
.resumen-compra__evento{ font-size:15px; font-weight:700; color:var(--carmin); }
.dato-lugar{ display:flex; align-items:flex-start; gap:9px; margin-top:9px; font-size:13.5px; color:var(--tinta-suave); }
.dato-lugar svg{ width:15px; height:15px; color:var(--carmin); flex:none; margin-top:2px; }
.reng{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:13.5px; }
.reng--fuerte{ font-weight:600; color:var(--indigo-hondo); border-top:1px solid var(--linea); padding-top:12px; margin-top:6px; }
.reng--fuerte span:last-child{ font-size:26px; }
.msi-nota{ text-align:right; font-size:12.5px; color:var(--tinta-suave); }

/* ============================================================
   ADAPTABLE
   ============================================================ */
@media (max-width:1160px){
  .compra-cuerpo{ grid-template-columns:minmax(0,1fr) 330px; }
  .seccion-vista{ grid-template-columns:200px minmax(0,1fr); gap:16px; }
  .paso3{ grid-template-columns:minmax(0,1fr) 320px; }
}

/* ============================================================
   ≤920px · UNA COLUMNA Y CAJÓN INFERIOR
   ------------------------------------------------------------
   Aquí se decide cómo se desplaza el paso 2 en pantalla chica.
   La regla es una sola: el documento manda. Ningún contenedor
   intermedio se queda con la altura de la ventana ni con un
   `overflow` propio, porque en cuanto uno lo hace el usuario
   deja de poder deslizar la página y queda atrapado.
   ============================================================ */
@media (max-width:920px){
  .compra-cuerpo, .paso3{ grid-template-columns:1fr; }

  /* El `min-height` de la ventana era lo que amarraba el mapa a
     una sola pantalla. En móvil la altura la pone el contenido. */
  .compra-cuerpo{ min-height:0; }
  .mapa{ min-height:0; }

  /* De contenedor flexible con altura recortada a bloque normal:
     así la vista de sección crece hacia abajo y el documento se
     desplaza como cualquier página. El relleno inferior deja
     libre el asa del cajón. */
  .mapa__vista{
    display:block; flex:none;
    min-height:0;
    padding:0 14px 88px;
  }
  .mapa__vista[hidden]{ display:none; }

  /* Sin `height:100%` el SVG se dimensiona por su viewBox. El
     tope evita que el plano se coma la pantalla entera. */
  #planoRecinto{
    height:auto; max-height:64vh;
    touch-action:manipulation;   /* deja pasar el arrastre vertical */
  }

  .seccion-vista{ grid-template-columns:1fr; }
  .seccion-lateral{ order:2; }

  /* La rejilla de butacas se desplaza sólo en horizontal. Con
     `overflow:auto` en los dos ejes atrapaba el gesto vertical y
     la página de atrás no se movía. */
  .seccion-rejilla{
    overflow-x:auto; overflow-y:visible;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* ---------------- cajón inferior ---------------- */
  .lado{
    position:fixed; inset:auto 0 0 0; z-index:80;
    max-height:min(82vh, 620px);
    border-left:0; border-top:1px solid var(--linea);
    border-radius:14px 14px 0 0; box-shadow:0 -8px 26px rgba(36,31,77,.22);
    transform:translateY(calc(100% - 62px));
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    overflow:hidden;
  }
  .lado.abierto{ transform:translateY(0); }
  .lado__tirador{ display:flex; }

  /* Reparto de altura dentro del cajón: sólo la lista de niveles
     cede espacio. Cabecera, total y acciones se quedan enteros,
     que es lo que garantiza que CONTINUAR siempre se vea. */
  .lado__tirador,
  .lado__evento,
  .lado__cantidad,
  .lado__pie{ flex:0 0 auto; }
  .niveles{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;    /* el rebote no arrastra la página */
    -webkit-overflow-scrolling:touch;
  }

  /* Los logos de tarjetas son decorativos y comían 130 px de un
     cajón que ya va justo. En el paso 4 se ven completos. */
  .lado__pie .pagos{ display:none; }

  .galon{ padding-inline:14px 20px; font-size:0; gap:0; }
  .galon--activo{ font-size:12.5px; gap:10px; }
  .cronometro{ padding-inline:14px; }

  /* ---------------- pasos 3 y 4 ---------------- */
  /* En una sola columna el resumen queda al final del documento:
     dejarlo pegajoso lo hacía flotar sobre el contenido y tapaba
     los botones del final. */
  .resumen-compra{ position:static; }

  /* La barra de Anterior/Siguiente del paso 3 trae los estilos
     incrustados en el HTML (`style="display:flex;
     justify-content:flex-end…"`), así que sólo se puede corregir
     con propiedades que ese atributo no declara. `flex-wrap` y
     una base del 100 % bastan para que cada botón tome su línea.
     Vale la pena cambiar ese style= por una clase .paso-acciones
     cuando toques ese archivo. */
  .paso3 > [style]{ flex-wrap:wrap; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .paso3 > [style] .btn--indigo{ flex:1 1 100%; order:-1; min-height:52px; }
  .paso3 > [style] .btn-anterior{ flex:1 1 100%; min-height:48px; text-align:center; }
}

/* ============================================================
   MÓVIL · ≤768px
   Sólo teléfono. Los pasos 1 a 3 en escritorio no cambian.
   ============================================================ */
@media (max-width: 768px){

  /* ------------------------------------------------------------
     CABECERA DEL CHECKOUT
     ------------------------------------------------------------ */
  .cab-compra{ padding-inline:14px; }

  /* ------------------------------------------------------------
     GALONES
     Con cuatro galones más el cronómetro el ancho mínimo del
     conjunto pasaba de 410 px y empujaba la página. Se comprimen
     los pasos inactivos y la lista recorta en vez de desbordar.
     ------------------------------------------------------------ */
  .galones{ min-height:52px; gap:0; }
  .galones__lista{ overflow:hidden; }

  .galon{
    max-width:none;
    padding:8px 10px 8px 6px;
    line-height:1.15;
  }
  .galon::after{ width:12px; }
  .galon--activo{ font-size:11.5px; gap:7px; padding-right:12px; }
  .galon__num{ width:23px; height:23px; font-size:11.5px; }

  .cronometro{ padding:6px 12px; }
  .cronometro__rotulo{ font-size:9.5px; letter-spacing:.05em; }
  .cronometro__reloj{ font-size:19px; }

  /* ============================================================
     PASO 1 · FECHA Y CANTIDAD
     ============================================================ */
  .tarjeta-paso1{
    margin:16px 12px 28px;
    padding:18px 16px 22px;
    border-radius:var(--radio-s);
  }
  .evento-mini{ grid-template-columns:76px 1fr; gap:14px; }
  .evento-mini__cartel{ width:76px; height:76px; }
  .evento-mini__titulo{ font-size:17px; }
  .evento-mini__recinto, .evento-mini__fecha{ font-size:13.5px; }

  .rotulo-campo{ margin:22px 0 8px; font-size:12px; }

  /* Reserva mientras el script arma las siete plazas de la gira */
  #listaFechas:empty{ display:block; min-height:300px; }

  /* Fila completa tocable, no sólo el círculo del radio */
  .opcion-fecha{ padding:11px 0; min-height:52px; gap:13px; }
  .marca-radio{ width:24px; height:24px; }
  .marca-radio::after{ width:12px; height:12px; }
  .opcion-fecha__texto{ font-size:15px; }
  .opcion-fecha__texto b{ font-size:13px; }
  .insignia-mes{ font-size:11px; padding:3px 7px; }

  .contador-boletos{ justify-content:space-between; gap:16px; }
  .contador-boletos button{ width:48px; height:48px; font-size:24px; }
  .contador-boletos output{ font-size:28px; }

  .btn--principal{ width:100%; min-width:0; }

  /* ============================================================
     PASO 2 · MAPA Y ASIENTOS
     ============================================================ */
  .mapa__barra{ flex-wrap:wrap; gap:10px; padding:12px 14px 4px; }
  .interruptor{
    flex:1; justify-content:center;
    min-height:48px; padding:8px 12px;
    gap:9px; font-size:12.5px;
  }
  .lupa button{ width:48px; height:44px; font-size:20px; }

  /* El relleno inferior lo hereda de ≤920 y no debe perderse:
     es lo que impide que el asa del cajón tape la última fila. */
  .mapa__vista{ padding:0 10px 88px; }
  #planoRecinto{ max-height:56vh; }
  .seccion__num{ font-size:11px; }

  /* El globo vive del `mousemove`: en pantalla táctil no llega a
     mostrarse bien y se queda encima del plano tapando secciones.
     El precio ya está en la lista de niveles. */
  .globo{ display:none; }

  /* ---------------- vista de una sección ---------------- */
  .seccion-vista{ gap:14px; }
  .tarjeta-mini{ padding:12px; }
  .btn-mapa-general{ min-height:44px; padding:10px 14px; font-size:12px; }
  .tarjeta-mini__disp{ font-size:13px; }
  .ficha-seccion__caja{ font-size:11.5px; }

  /* Butacas de 14 → 20 px. La rejilla vive dentro de un contenedor
     con scroll propio, así que crecer no desborda la página. */
  .seccion-rejilla{ padding-bottom:12px; -webkit-overflow-scrolling:touch; }
  .butaca{ width:20px; height:20px; border-radius:5px; }
  .butaca:hover:not(:disabled){ transform:none; }   /* no hay hover real en táctil */
  .butaca:active:not(:disabled){ transform:scale(1.3); }
  .celda{ gap:2px; }
  .celda__num{ width:10px; font-size:9px; }
  .columna{ gap:4px; }
  .rejilla{ gap:6px; }
  /* Las letras deben medir lo mismo que la columna: 20 + 2 + 10 */
  .rejilla-letras span{ width:32px; font-size:12px; }

  /* ---------------- barra lateral / hoja inferior ---------------- */
  /* El asomo tiene que medir lo mismo que el asa (64 px) o el
     cajón cerrado deja ver un trozo de la ficha del evento. */
  .lado{ transform:translateY(calc(100% - 64px)); }
  .lado.abierto{ transform:translateY(0); }
  .lado.abierto{ transform:translateY(0); }
  .lado__tirador{ min-height:64px; padding:16px 16px; font-size:15px; }

  .lado__evento{ grid-template-columns:60px 1fr; gap:11px; padding:12px 14px; }
  .lado__cartel{ width:60px; height:60px; }
  .lado__titulo{ font-size:15px; }
  .lado__cantidad{ padding:8px 14px; }
  .btn-editar{ min-height:36px; padding:7px 14px; font-size:11.5px; }

  .nivel__cabeza{ padding:14px 14px 14px 16px; min-height:62px; }
  .nivel__nombre{ font-size:13px; }
  .nivel__msi, .nivel__nodisp{ font-size:12.5px; }
  .nivel__insignia{ font-size:11px; padding:2px 7px; }
  .nivel__contador{ width:28px; height:28px; font-size:12.5px; }

  .boleto-linea__cabeza{ padding:10px 14px 6px 16px; }
  .boleto-linea__rotulo{ font-size:11px; }
  .boleto-tabla{ grid-template-columns:48px 68px 1fr 44px; padding:0 14px 12px 16px; }
  .boleto-tabla dt{ font-size:10.5px; letter-spacing:.05em; }
  .boleto-tabla dd{ font-size:13px; }
  .btn-basura{ width:44px; height:44px; }

  .pagos{ padding:12px 14px 8px; }
  .pagos__rotulo{ font-size:11px; }
  .pagos__logo{ height:24px; font-size:10.5px; }
  .pagos__banco{ font-size:11px; padding:6px 10px; }
  .insignia-msi{ font-size:11px; }

  .lado__total{ padding:12px 14px; }
  .lado__total b{ font-size:24px; }

  /* En fila y no apilados: dentro del cajón la altura es el
     recurso escaso y apilarlos costaba 54 px que le quitaban
     sitio a la lista de niveles. El área tocable se compensa con
     el `min-height`. El relleno respeta la franja del indicador
     de inicio en iPhone. */
  .lado__acciones{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:12px;
    padding:12px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .btn-anterior{ flex:none; min-height:48px; padding:0 4px; }
  .btn--indigo{ flex:1 1 auto; min-height:52px; padding:14px 20px; }

  /* ============================================================
     PASO 3 · BOLETOS
     ============================================================ */
  .paso3{ margin:16px auto 26px; padding-inline:12px; gap:16px; }
  .bloque{ padding:16px 14px; margin-bottom:14px; }
  .bloque__titulo{ font-size:16px; gap:10px; }

  .opcion-entrega__fila{ min-height:52px; }
  .opcion-entrega__nombre{ font-size:15px; }
  .opcion-entrega__detalle{ margin-left:0; font-size:13.5px; }

  .seguro{ grid-template-columns:1fr; gap:10px; }
  .seguro__precio{ text-align:left; }

  /* En una sola columna el resumen queda al final: pegajoso no
     aporta nada y se solapa con el pie. */
  .resumen-compra{ position:static; }
  .resumen-compra__titulo{ padding:14px 16px; font-size:16px; }
  .resumen-compra__cuerpo{ padding:14px 16px; }
  .reng{ font-size:14px; }
  .reng--fuerte span:last-child{ font-size:23px; }
  .msi-nota{ font-size:12.5px; }
}

/* ============================================================
   TELÉFONO ANGOSTO · ≤400px
   ============================================================ */
@media (max-width: 400px){
  .galon:not(.galon--activo){ padding-inline:4px 8px; }
  .galon--activo{ font-size:11px; }
  .cronometro__reloj{ font-size:17px; }
  .tarjeta-paso1{ margin-inline:10px; padding-inline:14px; }
  .boleto-tabla{ grid-template-columns:44px 60px 1fr 40px; }
}