/* ============================================================
   SUPERBOLETOS · MIS BOLETOS
   Dos cosas: el aviso flotante que aparece al volver de una
   compra, y los boletos digitales.

   El boleto se dibuja entero en CSS sobre el azul de la marca:
   cabecera con logo y recinto, banda del cartel, los datos del
   lugar y una tarjeta blanca con el QR. El QR lo inyecta
   js/mis-boletos.js como un <svg> de un solo <path>, generado
   con la misma semilla que el código del boleto. Nada de
   imágenes externas.
   ============================================================ */

/* ============================================================
   AVISO DE COMPRA CONFIRMADA
   ============================================================ */
.aviso-compra{
  position:fixed; z-index:220;
  top:calc(var(--cabecera-alto) + 16px); right:18px;
  width:min(340px, calc(100vw - 36px));
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start; gap:12px;
  padding:16px 16px 16px 15px;
  background:var(--papel);
  border-left:4px solid var(--asiento-libre);
  border-radius:var(--radio-s);
  box-shadow:0 16px 40px rgba(24,20,58,.24);
  transform:translateX(calc(100% + 24px));
  opacity:0;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .34s ease;
}
.aviso-compra.visible{ transform:translateX(0); opacity:1; }

.aviso-compra__marca{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--asiento-libre); color:#fff;
}
.aviso-compra__marca svg{ width:17px; height:17px; }

.aviso-compra__texto{ min-width:0; }
.aviso-compra__titulo{
  font-size:14.5px; font-weight:700; color:var(--indigo-hondo); line-height:1.3;
}
.aviso-compra__folio{
  margin-top:3px;
  font-family:var(--fuente-dato); font-size:11.5px; color:var(--tinta-suave);
}
.aviso-compra__ir{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:11px; padding:9px 17px;
  border-radius:var(--radio-pastilla);
  background:var(--degradado-cta); color:#fff;
  font-size:12px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.aviso-compra__ir svg{ width:15px; height:15px; }
.aviso-compra__ir:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(224,36,94,.3); }

.aviso-compra__cerrar{
  width:26px; height:26px;
  display:grid; place-items:center;
  background:none; border:0; border-radius:50%;
  color:var(--tinta-tenue); cursor:pointer;
}
.aviso-compra__cerrar svg{ width:16px; height:16px; }
.aviso-compra__cerrar:hover{ background:var(--papel-tenue); color:var(--tinta); }

@media (max-width:640px){
  .aviso-compra{ right:10px; left:10px; width:auto; }
}

/* ============================================================
   PÁGINA DE MIS BOLETOS
   ============================================================ */
.mis-boletos{ padding:38px 0 60px; }

.mis-boletos__titulo{
  font-size:clamp(24px,2.4vw,31px); font-weight:700;
  color:var(--indigo); letter-spacing:-.02em;
}
.mis-boletos__bajada{
  margin-top:6px;
  font-size:14.5px; color:var(--tinta-suave);
}

/* Reserva mientras js/mis-boletos.js arma las tarjetas: sin esto
   el pie salta al terminar de pintar y eso cuenta como CLS. */
#listaCompras:empty{ display:block; min-height:420px; }

/* ---------------- una compra ---------------- */
.compra-hecha{ margin-top:30px; }

.compra-hecha__barra{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  padding:14px 18px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:3px 3px 0 0;
  border-bottom:0;
}
.compra-hecha__evento{
  font-size:16px; font-weight:700; text-transform:uppercase;
  color:var(--carmin); letter-spacing:-.01em;
}
.compra-hecha__dato{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--tinta-suave);
}
.compra-hecha__dato b{
  font-family:var(--fuente-dato); font-weight:500; color:var(--indigo-hondo);
}
.compra-hecha__total{ margin-left:auto; font-size:15px; font-weight:700; color:var(--indigo-hondo); }

/* El boleto es vertical, así que la columna mínima baja de 400 a
   310 y caben tres por fila en escritorio. `align-items:start`
   evita que un nombre de zona largo estire a sus vecinos. */
.compra-hecha__lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(310px,1fr));
  gap:18px; align-items:start;
  padding:18px;
  background:var(--papel-tenue);
  border:1px solid var(--linea);
  border-radius:0 0 3px 3px;
}

.compra-hecha__pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:14px;
  margin-top:12px;
}

/* ============================================================
   EL BOLETO DIGITAL
   Azul de marca a sangre, como el pase que enseña el usuario en
   la puerta. El color del nivel de precio entra sólo como filete
   superior: sobre este azul, un fondo por nivel sería ilegible.
   ============================================================ */
.boleto{
  --boleto-azul:#123a8c;
  --boleto-tenue:rgba(255,255,255,.72);

  position:relative;
  display:flex; flex-direction:column;
  overflow:hidden;
  border-radius:10px;
  border-top:4px solid var(--nivel, var(--carmin));
  background:var(--boleto-azul);
  color:#fff;
  box-shadow:0 10px 26px rgba(10,20,60,.28);
}

/* ---------------- cabecera ---------------- */
.boleto__cabeza{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px 11px;
}
.boleto__marca{ display:flex; align-items:center; gap:7px; flex:none; }
.boleto__marca i{
  display:grid; place-items:center;
  width:25px; height:25px; border-radius:4px;
  background:#fff; color:var(--boleto-azul);
  font-style:normal; font-weight:800; font-size:16px; line-height:1;
}
.boleto__marca > span{ display:flex; flex-direction:column; line-height:.94; }
.boleto__marca b{ font-size:13px; font-weight:800; letter-spacing:.02em; }
.boleto__marca em{ font-size:13px; font-weight:600; font-style:normal; }

.boleto__gira{ min-width:0; text-align:right; line-height:1.2; }
.boleto__gira b{
  display:block;
  font-size:13px; font-weight:700; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.boleto__gira span{
  display:block;
  font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--boleto-tenue);
}

/* ---------------- banda del cartel ----------------
   El nombre del evento va detrás de la imagen: si el archivo de
   img/ no existe, `onerror` quita el <img> y la banda se queda
   con el rótulo en vez de un hueco gris. */
.boleto__arte{
  position:relative;
  aspect-ratio:16/7; overflow:hidden;
  background:linear-gradient(140deg,#2b3054,#10142a);
}
.boleto__arte b{
  position:absolute; inset:0;
  display:grid; place-items:center; padding:0 14px;
  font-size:13px; font-weight:700; line-height:1.25;
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  color:rgba(255,255,255,.34);
}
.boleto__arte img{
  position:relative; z-index:2;
  display:block; width:100%; height:100%; object-fit:cover;
}

/* ---------------- recinto, evento y fecha ---------------- */
.boleto__resumen{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:1px 14px;
  padding:14px 16px 2px;
}
.boleto__recinto,
.boleto__hora{
  font-size:13.5px; font-weight:600;
  text-transform:uppercase; color:var(--boleto-tenue);
}
.boleto__hora{ text-align:right; white-space:nowrap; }

.boleto__evento{
  font-size:18px; font-weight:800; line-height:1.14;
  text-transform:uppercase; letter-spacing:-.01em;
}
.boleto__fecha{
  align-self:start;
  font-size:15px; font-weight:700;
  text-transform:uppercase; text-align:right; white-space:nowrap;
}

/* ---------------- zona, sección, asiento, acceso ---------------- */
.boleto__campos{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:2px 10px;
  margin:0; padding:16px 16px 18px;
}
.boleto__campos > div{ min-width:0; }
.boleto__campos dt{
  font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.58);
}
.boleto__campos dd{
  margin:4px 0 0;
  font-size:15px; font-weight:600; line-height:1.2;
  overflow-wrap:anywhere;
}

/* ---------------- tarjeta del QR ---------------- */
.boleto__pase{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  margin:0 16px 16px;
  padding:16px 16px 13px;
  background:#fff; border-radius:10px;
}
.boleto__pase .qr{
  display:block;
  width:min(62%, 190px); height:auto;
  shape-rendering:crispEdges;   /* módulos con filo, sin difuminado */
}
.boleto__pase .qr path{ fill:#17171f; }

.boleto__numero{
  font-family:var(--fuente-dato);
  font-size:clamp(13px, 4vw, 17px); font-weight:600;
  letter-spacing:.05em; color:#17171f;
  overflow-wrap:anywhere; text-align:center;
}

/* ---------------- pie ---------------- */
.boleto__pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:5px 12px;
  padding:0 16px 15px;
  font-size:11.5px; color:rgba(255,255,255,.6);
}
.boleto__contador{ font-weight:600; letter-spacing:.03em; }
.boleto__pie b{
  font-family:var(--fuente-dato); font-weight:500;
  letter-spacing:.02em; color:rgba(255,255,255,.86);
}

/* ---------------- sin boletos ---------------- */
.sin-boletos{
  margin-top:26px; padding:56px 24px;
  background:var(--papel);
  border:1px dashed var(--linea); border-radius:4px;
  text-align:center;
}
.sin-boletos svg{ width:52px; height:52px; color:var(--tinta-tenue); }
.sin-boletos h2{
  margin-top:14px;
  font-size:19px; font-weight:700; color:var(--indigo-hondo);
}
.sin-boletos p{
  margin-top:7px;
  font-size:14.5px; color:var(--tinta-suave);
}
.sin-boletos .pastilla{ margin-top:22px; }

/* ============================================================
   MÓVIL · ≤768px
   El boleto ya nace vertical, así que en teléfono no cambia de
   forma: sólo se aprietan los márgenes y crece el QR.
   ============================================================ */
@media (max-width: 768px){

  /* El aviso arriba a la derecha se montaba sobre la cabecera de
     dos filas. Se ancla abajo, que además es donde cae el pulgar. */
  .aviso-compra{
    top:auto; bottom:12px; left:10px; right:10px;
    width:auto;
    transform:translateY(calc(100% + 24px));
  }
  .aviso-compra.visible{ transform:translateY(0); }
  .aviso-compra__titulo{ font-size:15px; }
  .aviso-compra__folio{ font-size:12px; }
  .aviso-compra__ir{ min-height:44px; padding:11px 18px; font-size:12.5px; }
  .aviso-compra__cerrar{ width:40px; height:40px; }

  .mis-boletos{ padding:24px 0 40px; }
  .mis-boletos__bajada{ font-size:15px; }
  #listaCompras:empty{ min-height:520px; }

  .compra-hecha{ margin-top:22px; }
  .compra-hecha__barra{ padding:12px 14px; gap:8px 14px; }
  .compra-hecha__evento{ font-size:15px; width:100%; }
  .compra-hecha__dato{ font-size:13px; }
  .compra-hecha__total{ margin-left:0; }

  .compra-hecha__lista{ grid-template-columns:1fr; padding:12px; gap:14px; }

  .boleto__cabeza{ padding:12px 14px 10px; }
  .boleto__gira b{ font-size:12.5px; }
  .boleto__resumen{ padding:13px 14px 2px; }
  .boleto__evento{ font-size:17px; }
  .boleto__campos{ padding:14px 14px 16px; gap:2px 8px; }
  .boleto__campos dd{ font-size:14px; }
  .boleto__pase{ margin:0 14px 14px; padding:16px 14px 12px; }
  .boleto__pase .qr{ width:min(70%, 200px); }
  .boleto__pie{ padding:0 14px 14px; }

  .sin-boletos{ padding:40px 16px; }
  .sin-boletos p{ font-size:15px; }
}

/* ============================================================
   TELÉFONO ANGOSTO · ≤400px
   Cuatro columnas de datos no caben: pasan a dos filas de dos.
   ============================================================ */
@media (max-width: 400px){
  .boleto__campos{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 10px; }
  .boleto__resumen{ grid-template-columns:minmax(0,1fr); }
  .boleto__hora, .boleto__fecha{ text-align:left; }
  .boleto__fecha{ margin-top:2px; }
}

/* Nota al pie de la página, fuera de las tarjetas. */
.mis-boletos__nota{
  margin-top:26px; max-width:62ch;
  font-size:13px; line-height:1.6; color:var(--tinta-tenue);
}