/* Boletera: página de evento con la compra, lista de fechas a la venta y
   Mis boletos. Parte de styles/ — se cargan en orden desde index.html.

   La lista de boletos usa el mismo lenguaje que la de próximas fechas
   (filas a sangre completa, separadas por 1px) para que comprar se sienta
   parte del sitio y no un formulario pegado encima. */

.compra {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(1.5rem, 6vh, 4rem)) var(--bleed) clamp(6rem, 14vh, 9rem);
}

/* ── Cabecera de la fecha ─────────────────────────────────────────── */

.compra__evento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: end;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}
@media (min-width: 781px) {
  .compra__evento { grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 280px); }
}

.compra__serie {
  margin: 0 0 .9rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oro);
}
.compra__fecha {
  margin: 0;
  display: grid; gap: .35rem;
  font-weight: inherit;
}
.compra__num {
  font-family: var(--display); font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(3rem, 13vw, 6rem);
  line-height: .86; letter-spacing: -.03em; text-transform: uppercase;
  text-wrap: balance;
}
.compra__hora {
  margin-top: .35rem;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--hueso);
}
.compra__sede {
  margin: 1.1rem 0 0;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--hueso-70);
}
.compra__lineup {
  margin: 1.2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-weight: 700; font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  line-height: 1.1; text-transform: uppercase;
}
.compra__lineup li { list-style: none; }
.compra__lineup .origen {
  font-family: var(--mono); font-size: .58em; font-weight: 400;
  color: var(--hueso-70); text-transform: none; letter-spacing: .04em; margin-left: .3em;
}
.compra__desc:empty { display: none; }
.compra__desc {
  margin: 1.1rem 0 0; max-width: 60ch;
  color: var(--hueso-70); line-height: 1.6; text-wrap: pretty;
}
.compra__cartel {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 3px; border: 1px solid var(--hueso-08);
}
@media (max-width: 780px) {
  .compra__cartel { max-width: 220px; }
}

.compra__cargando {
  font-family: var(--mono); font-size: .85rem; color: var(--hueso-70);
}
/* Esqueleto mientras llega la lista: misma forma que las filas reales, para
   que la página no brinque al cargar. */
.esqueleto { list-style: none; margin: 0 calc(var(--bleed) * -1); padding: 0; display: grid; gap: 1px; }
.esqueleto li {
  height: 7.5rem; background: rgb(7 8 15 / .6);
  background-image: linear-gradient(90deg, transparent, rgb(244 239 230 / .05), transparent);
  background-size: 200% 100%; animation: esqueleto 1.4s var(--ease) infinite;
}
html:not(.js) .esqueleto { display: none; }
@keyframes esqueleto { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Agotado, cerrado, error: misma caja oscura que el estado vacío de fechas. */
.compra__cerrada {
  display: grid; justify-items: start; gap: .9rem;
  margin: 0 calc(var(--bleed) * -1) 2rem;
  padding: clamp(1.75rem, 5vw, 3rem) var(--bleed);
  background: rgb(7 8 15 / .72);
  border-block: 1px solid var(--hueso-08);
}
.compra__cerrada-titulo {
  margin: 0;
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1.05; text-transform: uppercase;
}
.compra__cerrada-texto { margin: 0; max-width: 52ch; color: var(--hueso-70); line-height: 1.6; }
.compra__cerrada a:not(.boton) { color: var(--oro); }

/* ── Pasos ────────────────────────────────────────────────────────── */

.paso { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.paso__titulo {
  margin: 0 0 1.25rem;
  font-family: var(--display); font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
}
.paso__titulo:focus { outline: none; }
.paso__acciones {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: 1.75rem;
}

/* Botones de la compra: más altos que los del sitio, son para el pulgar. */
.compra .boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; cursor: pointer;
  background: transparent; color: var(--hueso);
  border: 1px solid rgb(244 239 230 / .4);
}
.compra .boton--solido { background: var(--oro); color: var(--noche); border-color: var(--oro); font-weight: 700; }
.compra .boton:hover:not(:disabled) { background: var(--hueso-08); border-color: var(--hueso); }
.compra .boton--solido:hover:not(:disabled) { background: var(--oro-claro); border-color: var(--oro-claro); }
.compra .boton:active:not(:disabled), .contador__btn:active { transform: translateY(1px); }
.compra .boton { transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .1s; }
.compra .boton:disabled { opacity: .55; cursor: not-allowed; }
.compra .boton:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.compra__mensaje {
  scroll-margin: calc(var(--nav-h) + 1rem) 0 6rem;
  margin: 1.25rem 0 0; padding: .9rem 1rem;
  border-radius: 6px; line-height: 1.5;
  background: rgb(228 98 46 / .16); border: 1px solid var(--brasa); color: var(--hueso);
}
.compra__mensaje[data-tipo="ok"] { background: rgb(242 180 65 / .12); border-color: var(--oro); }

/* ── Paso 1: tipos de boleto ──────────────────────────────────────── */

.tipos {
  list-style: none; margin: 0 calc(var(--bleed) * -1); padding: 0;
  display: grid; gap: 1px;
  background: var(--hueso-08);
  border-block: 1px solid var(--hueso-08);
}
.tipo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem; align-items: center;
  padding: clamp(1.25rem, 3.5vw, 1.9rem) var(--bleed);
  background: rgb(7 8 15 / .72);
  transition: background-color .3s var(--ease);
}
.tipo--elegido { background: rgb(7 8 15 / .9); box-shadow: inset 0 0 0 1px rgb(242 180 65 / .55); }
.tipo[data-estado="agotado"], .tipo[data-estado="cerrado"], .tipo[data-estado="en_espera"] { background: rgb(7 8 15 / .55); }
.tipo__nombre {
  margin: 0;
  font-family: var(--display); font-variation-settings: 'wdth' 112;
  font-weight: 700; font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  line-height: 1.1; text-transform: uppercase;
}
.tipo[data-estado="agotado"] .tipo__nombre { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--hueso-70); }
.tipo__desc { margin: .35rem 0 0; color: var(--hueso-70); font-size: .95rem; line-height: 1.5; text-wrap: pretty; }
.tipo__precio { margin: .6rem 0 0; display: grid; gap: .15rem; }
.tipo__total { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--hueso); }
.tipo__cargo { font-family: var(--mono); font-size: .74rem; color: var(--hueso-70); }
.tipo__estado {
  margin: .6rem 0 0;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; color: var(--hueso-70);
}
.tipo__estado--pocos { color: var(--oro); }

.contador {
  display: inline-grid; grid-template-columns: 48px 2.5ch 48px;
  align-items: center; justify-items: center;
  border: 1px solid rgb(244 239 230 / .35); border-radius: 100px;
}
.contador__btn {
  width: 48px; height: 48px; border: 0; border-radius: 100px;
  background: transparent; color: var(--hueso);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background-color .2s;
}
.contador__btn:hover { background: var(--hueso-16); }
.contador__btn:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.contador__valor { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; }

/* Código: un <details>, no un modal; casi nadie lo usa. */
.codigo { margin-top: 1.5rem; }
.codigo__abrir {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: .85rem; color: var(--hueso);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.codigo__abrir::-webkit-details-marker { display: none; }
.codigo__abrir { list-style: none; }
.codigo__form { display: grid; gap: .5rem; max-width: 26rem; margin-top: .5rem; }
.codigo__fila { display: flex; gap: .6rem; }
.codigo__fila .campo__input { flex: 1; text-transform: uppercase; }
.codigo__nota { margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--hueso-70); }
.codigo__nota[data-tipo="error"] { color: var(--brasa-texto); }
.codigo__nota[data-tipo="ok"] { color: var(--oro); }

/* Barra fija con el total: en móvil es lo único que hay que alcanzar. */
.barra {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--bleed) calc(.85rem + env(safe-area-inset-bottom));
  background: rgb(7 8 15 / .94);
  border-top: 1px solid var(--hueso-16);
  backdrop-filter: blur(10px);
}
.barra[hidden] { display: none; }
.barra__resumen { display: grid; gap: .1rem; min-width: 0; }
.barra__cuenta { font-family: var(--mono); font-size: .76rem; color: var(--hueso-70); }
.barra__total { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; }
.barra__nota { font-family: var(--mono); font-size: .7rem; color: var(--oro); }
.barra__nota:empty { display: none; }
.barra__boton { flex: none; }
/* En la compra, los botones flotantes estorban al pulgar.
   El chat de Reservity y el de WhatsApp siguen en el resto del sitio; aquí
   tapaban el "+" del último boleto y la barra del total. */
body[data-paso] .rsv-wa,
body[data-paso] .rsv-wa-panel,
body[data-paso] #chat-toggle,
body[data-paso] #chat-teaser { display: none !important; }

/* ── Paso 2: datos ────────────────────────────────────────────────── */

.datos { max-width: 38rem; }
.datos__grupo { border: 0; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1rem; }
.datos__leyenda {
  margin-bottom: .25rem; padding: 0;
  font-family: var(--display); font-variation-settings: 'wdth' 112;
  font-weight: 700; font-size: 1.1rem; text-transform: uppercase;
}
.campo { display: grid; gap: .4rem; }
.campo__etiqueta {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hueso);
}
.campo__input {
  width: 100%; min-height: 48px;
  padding: .75rem .9rem;
  font: inherit; font-size: 1rem; color: var(--hueso);
  background: var(--superficie);
  border: 1px solid rgb(244 239 230 / .28); border-radius: 6px;
  transition: border-color .2s;
}
.campo__input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.campo__input[aria-invalid="true"] { border-color: var(--brasa); box-shadow: 0 0 0 1px var(--brasa); }
.campo__ayuda { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--hueso-70); text-wrap: pretty; }

.datos__terminos {
  display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start;
  margin-top: .5rem; line-height: 1.55; font-size: .95rem;
}
.datos__terminos input { width: 24px; height: 24px; margin: 0; accent-color: var(--oro); }
.datos__terminos a { color: var(--oro); text-underline-offset: 3px; }
.datos__captcha:empty { display: none; }
.datos__captcha { margin-top: 1rem; }
.datos__nota { margin-top: .9rem; }

/* ── Paso 3: pago ─────────────────────────────────────────────────── */

.apartado {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem;
  margin: 0 0 1.5rem; padding: .9rem 1rem;
  border: 1px solid rgb(242 180 65 / .5); border-radius: 6px;
  background: rgb(242 180 65 / .08);
}
.apartado__texto { color: var(--hueso); }
.apartado__tiempo { font-family: var(--mono); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--oro); }
.apartado[data-urgente="si"] { border-color: var(--brasa); background: rgb(228 98 46 / .12); }
.apartado[data-urgente="si"] .apartado__tiempo { color: var(--brasa-texto); }

.desglose {
  display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem;
  margin: 0 0 1.75rem; max-width: 38rem;
  font-family: var(--mono); font-size: .9rem;
}
.desglose dt { color: var(--hueso-70); }
.desglose dd { margin: 0; text-align: right; }
.desglose .desglose__total {
  padding-top: .7rem; border-top: 1px solid var(--hueso-16);
  color: var(--hueso); font-weight: 700; font-size: 1.1rem;
}
.pago { max-width: 38rem; }
.pago__elemento { min-height: 180px; }
.pago__cargando { font-family: var(--mono); font-size: .85rem; color: var(--hueso-70); }
.pago__nota { margin-top: 1rem; }

/* ── Paso 4: listo ────────────────────────────────────────────────── */

.listo__texto { margin: 0; max-width: 52ch; font-size: 1.1rem; line-height: 1.6; }
.listo__nota { margin: 1rem 0 0; max-width: 52ch; color: var(--hueso-70); line-height: 1.6; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── /boletos: fechas a la venta ──────────────────────────────────── */

.venta { max-width: var(--maxw); margin-inline: auto; padding: calc(var(--nav-h) + clamp(2.5rem, 8vh, 5rem)) var(--bleed) clamp(4rem, 10vh, 7rem); }
.venta__titulo {
  margin: 0 0 1.5rem;
  font-family: var(--display); font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(2.6rem, 11vw, 6rem);
  line-height: .86; letter-spacing: -.03em; text-transform: uppercase;
}
.venta__lista { margin-top: 1rem; }
.venta__lista .fecha { cursor: pointer; }
.fecha__comprar {
  grid-column: 2 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.fecha__precio { font-family: var(--mono); font-size: .85rem; color: var(--hueso); }
.fecha__estado { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; color: var(--oro); }
@media (min-width: 781px) {
  .fecha--venta { grid-template-columns: 8.5rem 1fr auto; }
  .fecha__comprar { grid-column: auto; justify-self: end; }
}
.venta__mis { margin-top: 2.5rem; color: var(--hueso-70); }
.venta__mis a { color: var(--oro); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .tipo, .contador__btn, .campo__input, .compra .boton { transition: none; }
  .esqueleto li { animation: none; }
}

/* ── Mis boletos ──────────────────────────────────────────────────── */

.mis .venta__titulo { margin-bottom: 1.25rem; }
.mis__orden { margin-top: 2.5rem; }
.mis__orden .tipos { margin-top: 1.25rem; }
.mis__boleto { align-items: start; }
.mis__boleto .boton { margin-top: 1rem; }
.mis__qr {
  width: clamp(132px, 34vw, 180px); height: auto; aspect-ratio: 1;
  border-radius: 6px; background: var(--hueso);
}
.dialogo {
  width: min(32rem, calc(100vw - 2rem)); padding: 1.5rem;
  color: var(--hueso); background: var(--superficie);
  border: 1px solid var(--hueso-16); border-radius: 10px;
}
.dialogo::backdrop { background: rgb(7 8 15 / .7); }
.dialogo .datos { display: grid; gap: 1rem; }
.dialogo .paso__acciones { margin-top: .5rem; }
.dialogo .boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer;
  background: transparent; color: var(--hueso); border: 1px solid rgb(244 239 230 / .4);
}
.dialogo .boton--solido { background: var(--oro); color: var(--noche); border-color: var(--oro); font-weight: 700; }

/* ── Páginas legales ──────────────────────────────────────────────── */

.legal { max-width: 46rem; }
.legal h2 {
  margin: 2.25rem 0 .75rem;
  font-family: var(--display); font-variation-settings: 'wdth' 112;
  font-weight: 700; font-size: 1.25rem; text-transform: uppercase;
}
.legal p, .legal li { line-height: 1.7; color: var(--hueso); max-width: 68ch; }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--oro); }
.legal__fecha { font-family: var(--mono); font-size: .8rem; color: var(--hueso-70); }

/* ── Pago de demostración (PAGOS_DEMO=1) ──────────────────────────────
   Misma forma que el Payment Element de Stripe con nuestra apariencia,
   pero los "campos" son texto: no se puede escribir una tarjeta. */
.demo__aviso {
  margin: 0 0 1.25rem; padding: .85rem 1rem; line-height: 1.5;
  border: 1px dashed var(--oro); border-radius: 6px; background: rgb(242 180 65 / .08);
}
.demo { border: 0; margin: 0; padding: 0; display: grid; gap: .75rem; }
.demo__opcion {
  display: grid; grid-template-columns: 24px 1fr; gap: .25rem .75rem; align-items: center;
  padding: 1rem; border: 1px solid rgb(244 239 230 / .22); border-radius: 6px;
  background: var(--superficie); cursor: pointer;
}
.demo__opcion:has(input:checked) { border-color: var(--oro); background: rgb(242 180 65 / .08); }
.demo__opcion input { width: 20px; height: 20px; margin: 0; accent-color: var(--oro); }
.demo__titulo { font-weight: 500; }
.demo__opcion > :not(input):not(.demo__titulo) { grid-column: 2; }
.demo__opcion:not(:has(input:checked)) .demo__detalle,
.demo__opcion:not(:has(input:checked)) .demo__nota { display: none; }
.demo__detalle { display: grid; gap: .75rem; margin-top: .5rem; }
.demo__fila { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.demo__campo { display: grid; gap: .35rem; }
.demo__etiqueta {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hueso-70);
}
.demo__valor {
  display: block; padding: 13px 14px; border-radius: 6px;
  border: 1px solid rgb(244 239 230 / .28); background: #0d0f17;
  color: var(--hueso-70); font-variant-numeric: tabular-nums;
}
.demo__nota { margin: .25rem 0 0; font-size: .88rem; color: var(--hueso-70); line-height: 1.5; }