/* ==========================================================================
   AZTECH METAL — BOLETERA

   Cartelera (boletos.html) y ficha de evento (boleto.html).
   Sigue lo del resto del sitio: cantos rectos, tipografía condensada, el rojo
   solo donde hay que actuar.

   `min-width: 0` aparece varias veces a propósito: en rejilla y flex un hijo
   nace con `min-width: auto` y no deja que el texto se encoja, así que el
   contenido se desborda o se corta. Ya mordió antes en la tienda.
   ========================================================================== */

/* ------------------------------------------------------------- encabezados */

.bo-encabezado {
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  padding: 0 16px;
}

.bo-kicker {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neon-crimson);
  margin: 0 0 .5rem;
}

.bo-titulo,
.bo-ficha-titulo {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  color: var(--text-primary);
}

.bo-bajada {
  color: var(--text-muted);
  max-width: 55ch;
  margin: 0;
}

.bo-h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--maroon-grid-strong);
}

.bo-aviso {
  padding: 1.5rem 16px;
  color: var(--text-muted);
  text-align: center;
}
.bo-aviso--malo { color: var(--neon-crimson); }

/* --------------------------------------------------------------- cartelera */

.bo-cartelera {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 4rem;
}

.bo-tarjeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.bo-tarjeta:hover,
.bo-tarjeta:focus-visible {
  border-color: var(--neon-crimson);
  transform: translateY(-2px);
}
.bo-tarjeta--cerrada { opacity: .55; }

.bo-tarjeta-foto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-inner);
  overflow: hidden;
}
.bo-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bo-tarjeta-fecha {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--red-fill);
  color: #fff;
  padding: .45rem .7rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}
.bo-tarjeta-fecha b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0;
}

.bo-tarjeta-datos { padding: 1rem; min-width: 0; }

.bo-tarjeta-titulo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0 0 .35rem;
  overflow-wrap: anywhere;
}
.bo-tarjeta-sede { color: var(--text-muted); font-size: .9rem; margin: 0 0 .6rem; }
.bo-tarjeta-precio {
  margin: 0;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neon-crimson);
}

.bo-vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  border: 1px dashed var(--maroon-grid-strong);
}
.bo-vacio-titulo { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-primary); }
.bo-vacio a { color: var(--neon-crimson); }

/* ------------------------------------------------------------ ficha evento */

.bo-evento { max-width: 1100px; margin: 0 auto; padding: 0 16px 4rem; }

.bo-ficha-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
}
/* Un evento sin imagen no debe dejar media pantalla en blanco. */
.bo-ficha-cabeza:not(:has(.bo-ficha-foto)) { grid-template-columns: minmax(0, 1fr); }
.bo-ficha-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-inner); }
.bo-ficha-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-ficha-datos { min-width: 0; }

.bo-ficha-lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.bo-ficha-lista li {
  display: flex;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--maroon-grid);
  color: var(--text-muted);
  min-width: 0;
}
.bo-ficha-lista b {
  flex: 0 0 5.5rem;
  color: var(--text-primary);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: .15rem;
}
.bo-ficha-texto { color: var(--text-muted); margin: 0; }

/* ----------------------------------------------------------------- compra */

.bo-compra {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.bo-secciones { min-width: 0; }

.bo-seccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  margin-bottom: .75rem;
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid);
  min-width: 0;
}
.bo-seccion--agotada { opacity: .5; }
.bo-seccion-datos { min-width: 0; }

.bo-seccion-nombre {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  margin: 0 0 .2rem;
  overflow-wrap: anywhere;
}
.bo-seccion-detalle { color: var(--text-muted); font-size: .88rem; margin: 0 0 .3rem; }
.bo-seccion-quedan {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.bo-seccion-derecha { text-align: right; flex: 0 0 auto; }
.bo-seccion-precio {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 .5rem;
  color: var(--text-primary);
}

/* Los controles de cantidad van en línea y chicos: no compiten con el CTA. */
.bo-cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--maroon-grid-strong);
}
.bo-cantidad button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.bo-cantidad button:hover:not(:disabled) { background: var(--bg-card-hover); color: var(--neon-crimson); }
.bo-cantidad button:disabled { opacity: .3; cursor: not-allowed; }
.bo-numero {
  min-width: 2.2rem;
  text-align: center;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: 1rem;
}
.bo-tope { margin: .35rem 0 0; font-size: .7rem; color: var(--text-dim); }

/* --------------------------------------------------------------- resumen */

.bo-resumen {
  position: sticky;
  top: 140px;
  padding: 1.25rem;
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid-strong);
  min-width: 0;
}
.bo-resumen-vacio { color: var(--text-muted); margin: 0; }

.bo-resumen-lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.bo-resumen-lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--maroon-grid);
  color: var(--text-muted);
  min-width: 0;
}
.bo-resumen-lista b { color: var(--text-primary); white-space: nowrap; }

.bo-resumen-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bo-resumen-total b {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* El CTA es el elemento más prominente de la página, a propósito. */
.bo-cta {
  display: block;
  width: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--red-fill);
  color: #fff;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
}
.bo-cta:hover:not(:disabled) { background: var(--red-fill-hover); }
.bo-cta:disabled { opacity: .6; cursor: wait; }

.bo-volver {
  display: block;
  width: 100%;
  margin-top: .6rem;
  padding: .7rem;
  background: transparent;
  border: 1px solid var(--maroon-grid-strong);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bo-volver:hover { color: var(--text-primary); border-color: var(--neon-crimson); }

.bo-nota { margin: .75rem 0 0; font-size: .78rem; color: var(--text-dim); }

/* ------------------------------------------------------------------ datos */

.bo-form label {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bo-form input {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .7rem .8rem;
  background: var(--bg-inner);
  border: 1px solid var(--maroon-grid-strong);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.bo-form input:focus { outline: 2px solid var(--neon-crimson); outline-offset: 1px; }
.bo-form small {
  display: block;
  margin-top: .3rem;
  font-size: .72rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-dim);
}

.bo-error {
  margin: .8rem 0 0;
  padding: .7rem;
  border-left: 3px solid var(--neon-crimson);
  background: rgba(var(--neon-crimson-rgb), .08);
  color: var(--neon-crimson);
  font-size: .88rem;
}

/* ------------------------------------------------------------ confirmación */

.bo-listo {
  max-width: 34rem;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--maroon-grid-strong);
  background: var(--bg-charcoal);
}
.bo-folio {
  font-family: var(--font-mono, monospace);
  font-size: 1.1rem;
  letter-spacing: .1em;
  margin: 0 0 .5rem;
  color: var(--text-muted);
}
.bo-folio b { color: var(--neon-crimson); font-size: 1.4rem; }
.bo-listo-total { color: var(--text-muted); margin: 0 0 .5rem; }
.bo-listo-total b { color: var(--text-primary); font-size: 1.2rem; }
.bo-cuenta {
  font-family: var(--font-data, 'Barlow', sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--neon-crimson);
  margin: 0 0 1rem;
}
.bo-listo .bo-cta { margin-top: 1.25rem; }

/* ------------------------------------------------------------------ móvil */

@media (max-width: 860px) {
  .bo-ficha-cabeza { grid-template-columns: 1fr; gap: 1.25rem; }
  .bo-compra { grid-template-columns: 1fr; }

  /* En el teléfono el resumen deja de ser columna y se pega abajo, donde cae
     el pulgar. Sin esto había que subir a buscar el botón.

     El `bottom` no es 0: abajo vive `.tn-nav-app`, la barra de navegación del
     sitio (56px, z-index 1001). Con 0 el botón de continuar quedaba DEBAJO de
     ella y no se podía tocar. Lo destapó una captura, no una comprobación. */
  .bo-resumen {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    max-height: 55vh;
    overflow-y: auto;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .6);
  }

  /* `sticky` no servía: el resumen es el último elemento del flujo, así que se
     quedaba donde caía, muy por debajo de la pantalla. Con `fixed` hay que
     dejarle sitio abajo al contenido o el resumen tapa la última sección. */
  .bo-evento { padding-bottom: calc(56px + 55vh + env(safe-area-inset-bottom, 0px)); }

  /* Sin boletos elegidos no hay nada que decidir: la barra estorba más que
     ayuda, así que se queda en el flujo hasta que el resumen tenga contenido. */
  .bo-resumen:has(.bo-resumen-vacio) {
    position: static;
    max-height: none;
    box-shadow: none;
    border: 1px solid var(--maroon-grid-strong);
  }
  .bo-evento:has(.bo-resumen-vacio) { padding-bottom: calc(56px + 2rem); }
}

@media (max-width: 520px) {
  .bo-seccion { flex-direction: column; align-items: flex-start; }
  .bo-seccion-derecha { text-align: left; width: 100%; }
  .bo-ficha-lista li { flex-direction: column; gap: .15rem; }
  .bo-ficha-lista b { flex: none; }
}

/* ============================================================ mis boletos */

.bo-mis-cabeza { margin-bottom: 1.5rem; }
.bo-mis-resumen {
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.bo-mis-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* El boleto es un talón: fondo oscuro, pero el QR sobre BLANCO. Un QR claro
   sobre oscuro lo leen mal muchos lectores, y el de la puerta no puede fallar. */
.bo-boleto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid-strong);
  border-top: 3px solid var(--neon-crimson);
}
.bo-boleto-cabeza {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1rem;
  border-bottom: 1px dashed var(--maroon-grid-strong);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-width: 0;
}
.bo-boleto-num { color: var(--text-muted); }
.bo-boleto-seccion { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; text-align: right; }

.bo-boleto-qr {
  margin: 1.1rem auto .6rem;
  width: min(240px, calc(100% - 2rem));
  aspect-ratio: 1;
  background: #fff;
  padding: 10px;
}
.bo-boleto-qr svg { display: block; width: 100%; height: 100%; }

.bo-boleto-codigo {
  margin: 0 0 1rem;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  letter-spacing: .12em;
  color: var(--text-primary);
}

.bo-boleto--usado { opacity: .5; border-top-color: var(--text-dim); }
.bo-boleto--usado .bo-boleto-qr {
  background: repeating-linear-gradient(45deg, var(--bg-inner) 0 10px, var(--bg-charcoal) 10px 20px);
}
.bo-boleto-usado {
  margin: 0 0 1rem;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon-crimson);
}
.bo-mis-nota { margin-top: 1.5rem; max-width: 60ch; }

/* ================================================================ puerta */

.bo-puerta { max-width: 560px; margin: 0 auto; padding: 0 16px 4rem; }

.bo-puerta-cuenta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  background: var(--bg-charcoal);
  border: 1px solid var(--maroon-grid-strong);
  font-family: var(--font-data, 'Barlow', sans-serif);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bo-puerta-cuenta b { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0; color: var(--text-primary); }

.bo-puerta-camara {
  position: relative;
  aspect-ratio: 1;
  background: #000;
  overflow: hidden;
  border: 1px solid var(--maroon-grid-strong);
}
.bo-puerta-camara video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El recuadro que dice "pon el QR aquí". */
.bo-puerta-camara::after {
  content: '';
  position: absolute;
  inset: 18%;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* El resultado tiene que leerse a un metro, con prisa y con poca luz: color
   de pantalla completa, no un letrerito. */
.bo-puerta-veredicto {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.4rem 1rem;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
}
.bo-puerta-veredicto[hidden] { display: none; }
.bo-puerta-veredicto big { display: block; font-size: 2.6rem; line-height: 1; }
.bo-puerta-veredicto small {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  text-transform: none;
}
.bo-puerta-veredicto--ok   { background: #117A3D; }
.bo-puerta-veredicto--malo { background: #B3121A; }
.bo-puerta-veredicto--ojo  { background: #9A6700; }

.bo-puerta-manual { display: flex; gap: .5rem; margin-top: 1rem; }
.bo-puerta-manual input {
  flex: 1;
  min-width: 0;
  padding: .8rem;
  background: var(--bg-inner);
  border: 1px solid var(--maroon-grid-strong);
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bo-puerta-manual button { flex: 0 0 auto; width: auto; }
.bo-puerta select {
  width: 100%;
  padding: .8rem;
  margin-bottom: 1rem;
  background: var(--bg-inner);
  border: 1px solid var(--maroon-grid-strong);
  color: var(--text-primary);
  font-size: 1rem;
}

.bo-mis-linea { margin: 0; color: var(--text-muted); }
.bo-mis-detalles { margin-top: 1.75rem; }

/* Las chispas animadas y el grano del sitio pasan por ENCIMA de todo (z-index
   9998/9999). Sobre un QR son ruido que el lector tiene que atravesar: una
   captura enseñó una chispa roja justo sobre los módulos. Aquí no van. */
body:has(#bo-mis) .film-grain,
body:has(#bo-mis) .ashes-canvas,
body:has(#bo-puerta) .film-grain,
body:has(#bo-puerta) .ashes-canvas { display: none; }

/* La búsqueda de la puerta: para quien llegó sin teléfono. */
.bo-puerta-buscar { margin-top: 1rem; }
.bo-puerta-buscar input {
  width: 100%;
  padding: .8rem;
  background: var(--bg-inner);
  border: 1px solid var(--maroon-grid-strong);
  color: var(--text-primary);
  font-size: 1rem;
}
.bo-puerta-persona {
  margin-top: .7rem;
  padding: .8rem;
  border: 1px solid var(--maroon-grid-strong);
  background: var(--bg-charcoal);
}
.bo-puerta-persona p { margin: 0 0 .4rem; color: var(--text-muted); }
.bo-puerta-persona b { color: var(--text-primary); }
.bo-puerta-boleto {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .35rem 0;
  border-top: 1px dashed var(--maroon-grid);
  min-width: 0;
}
.bo-puerta-boleto span { color: var(--text-muted); font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
.bo-puerta-boleto em { font-style: normal; color: var(--neon-crimson); font-size: .85rem; white-space: nowrap; }
.bo-puerta-boleto .bo-cta { width: auto; padding: .55rem .9rem; font-size: .95rem; flex: 0 0 auto; }

/* Sin cámara: el cuadro deja de ser un cuadrado negro y solo enseña el
   veredicto cuando lo hay. */
.bo-puerta-camara--sin { aspect-ratio: auto; border: 0; background: none; }
.bo-puerta-camara--sin video,
.bo-puerta-camara--sin::after { display: none; }
.bo-puerta-camara--sin .bo-puerta-veredicto { position: static; margin-bottom: 1rem; }
/* `.bo-nota` se declara después y le ganaba el color al aviso de error. */
.bo-nota.bo-aviso--malo { color: var(--neon-crimson); }

/* El cargo por servicio (0028): a la vista antes del total, más discreto. */
.bo-resumen-linea {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0 0 .6rem;
  font-family: var(--font-data, 'Barlow', sans-serif); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.bo-resumen-linea b { font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; color: var(--text-primary); }