/* ============================================================
   SUPERBOLETOS · BASE
   Tokens tomados de las capturas: degradado magenta → púrpura →
   índigo en la cabecera, fondo lavanda muy claro, títulos azul
   marino y nombres de evento en rojo carmín.
   ============================================================ */

:root{
  /* --- Marca --- */
  --magenta:      #c9265e;
  --purpura:      #6f2a97;
  --indigo:       #2f2a9e;
  --indigo-hondo: #1f1a5e;

  --degradado-marca: linear-gradient(90deg,
      var(--magenta) 0%, #9c2a7d 34%, var(--purpura) 55%, var(--indigo) 100%);
  --degradado-cta:   linear-gradient(96deg, #e0245e 0%, #8f2fc9 100%);

  /* --- Acentos --- */
  --carmin:      #e01f4a;
  --carmin-hondo:#b4143a;
  --morado-btn:  #4b3fd4;
  --verde-whats: #1faa54;

  /* --- Neutros --- */
  --lienzo:      #f4f5fb;
  --papel:       #ffffff;
  --papel-tenue: #f8f9fe;
  --linea:       #e2e4f2;
  --tinta:       #241f4d;
  --tinta-suave: #6b6a8d;
  --tinta-tenue: #9d9cb8;

  /* --- Estados de asiento --- */
  --asiento-libre:      #3ec98a;
  --asiento-libre-hover:#2fae74;
  --asiento-mio:        #e01f4a;
  --asiento-vendido:    #c9cbdd;
  --asiento-bloqueado:  #8e90a8;
  --asiento-accesible:  #2f7fe0;

  /* --- Métrica --- */
  --radio-s: 6px;
  --radio-m: 12px;
  --radio-l: 20px;
  --radio-pastilla: 999px;
  --sombra-baja: 0 1px 2px rgba(36,31,77,.06), 0 2px 8px rgba(36,31,77,.05);
  --sombra-alta: 0 8px 28px rgba(36,31,77,.14);
  --cabecera-alto: 66px;
  --compra-alto: 56px;
  --pasos-alto: 56px;
  --indigo-compra: #382c94;

  /* --- Tipografía --- */
  --fuente-titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fuente-serif:  'Zilla Slab', Georgia, 'Times New Roman', serif;
  --fuente-dato:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

/* El atributo `hidden` debe ganarle a cualquier display:flex/grid. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  background:var(--lienzo);
  color:var(--tinta);
  font-family:var(--fuente-titulo);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
img,svg{ max-width:100%; }

:focus-visible{
  outline:3px solid var(--morado-btn);
  outline-offset:2px;
  border-radius:4px;
}

.salta-al-contenido{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--papel); color:var(--indigo-hondo);
  padding:12px 18px; border-radius:0 0 var(--radio-m) 0; font-weight:600;
}
.salta-al-contenido:focus{ left:0; }

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera{
  position:sticky; top:0; z-index:60;
  height:var(--cabecera-alto);
  background:var(--degradado-marca);
  border-bottom:3px solid var(--carmin);
  color:#fff;
}
.cabecera__interior{
  height:100%;
  max-width:1720px; margin-inline:auto; padding-inline:22px;
  display:grid; align-items:center; gap:26px;
  grid-template-columns:auto auto minmax(180px,1fr) auto auto;
}

.logo{ display:flex; align-items:center; gap:7px; text-decoration:none; color:#fff; }
.logo__marca{
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:5px;
  background:#fff; color:var(--indigo-hondo);
  font-weight:800; font-size:17px; line-height:1;
}
.logo__texto{ display:flex; flex-direction:column; line-height:.94; letter-spacing:.02em; }
.logo__texto b{ font-size:15px; font-weight:800; }
.logo__texto i{ font-size:15px; font-weight:600; font-style:normal; }

.cabecera__etiqueta{
  display:block; font-size:9.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; opacity:.82;
}
.selector-estado{
  display:flex; align-items:center; gap:34px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:15px; font-weight:600; letter-spacing:.02em;
}
.selector-estado svg{ width:19px; height:19px; }

.buscador{ display:flex; align-items:center; gap:10px; }
.buscador svg{ width:20px; height:20px; flex:none; opacity:.9; }
.buscador input{
  width:100%; background:none; border:0; color:#fff;
  font:inherit; font-size:14.5px; padding:6px 0;
}
.buscador input::placeholder{ color:rgba(255,255,255,.72); }
.buscador input:focus{ outline:none; border-bottom:1px solid rgba(255,255,255,.6); }

.cabecera__vinculo{ color:#fff; text-decoration:none; font-size:14.5px; white-space:nowrap; }
.cabecera__vinculo:hover{ text-decoration:underline; }

.cuenta{ display:flex; align-items:center; gap:11px; }
.cuenta__saludo{ font-size:13px; line-height:1.25; text-align:right; }
.cuenta__saludo b{ font-weight:600; }
.cuenta__avatar{
  width:34px; height:34px; border-radius:50%;
  background:#cfd2e6 radial-gradient(circle at 50% 34%, #9aa0c0 0 33%, transparent 34%),
             radial-gradient(ellipse at 50% 108%, #9aa0c0 0 46%, transparent 47%);
}

/* ============================================================
   PASOS DE COMPRA
   ============================================================ */
.pasos{
  position:sticky; top:var(--cabecera-alto); z-index:50;
  height:var(--pasos-alto);
  background:var(--papel);
  border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-inline:26px;
}
.pasos__lista{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pasos__item{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--tinta-tenue);
  padding-right:8px;
}
.pasos__item + .pasos__item::before{
  content:''; width:22px; height:1px; background:var(--linea); margin-right:8px;
}
.pasos__item span{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--linea); color:var(--tinta-suave);
  font-size:11.5px; font-weight:700;
}
.pasos__item--hecho{ color:var(--tinta-suave); }
.pasos__item--hecho span{ background:var(--asiento-libre); color:#fff; }
.pasos__item--activo{ color:var(--indigo-hondo); }
.pasos__item--activo span{ background:var(--degradado-cta); color:#fff; }

.pasos__contador{ font-size:13px; color:var(--tinta-suave); white-space:nowrap; }
.pasos__contador b{ font-family:var(--fuente-dato); font-size:14px; color:var(--carmin); }
.pasos__contador.urge b{ animation:pulso .9s ease-in-out infinite; }
@keyframes pulso{ 50%{ opacity:.35; } }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; border-radius:var(--radio-pastilla);
  padding:14px 26px; cursor:pointer;
  font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:var(--sombra-alta); }
.btn:active:not(:disabled){ transform:translateY(0); }
.btn:disabled{ cursor:not-allowed; filter:grayscale(.7); opacity:.5; }

.btn--whats{ width:100%; background:var(--verde-whats); color:#fff; }
.btn--whats svg{ width:21px; height:21px; }

/* ============================================================
   AVISOS FLOTANTES
   ============================================================ */
.aviso{
  position:fixed; left:50%; bottom:30px; z-index:200;
  transform:translate(-50%, 18px);
  background:var(--indigo-hondo); color:#fff;
  padding:12px 20px; border-radius:var(--radio-pastilla);
  font-size:13.5px; font-weight:500;
  box-shadow:var(--sombra-alta);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.aviso.visible{ opacity:1; transform:translate(-50%,0); }
.aviso--alerta{ background:var(--carmin-hondo); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   CABECERA EN PANTALLAS CHICAS
   ============================================================ */
@media (max-width: 1100px){
  .cabecera__interior{ grid-template-columns:auto 1fr auto; gap:14px; }
  .cabecera__estado, .cabecera__vinculo{ display:none; }
  .cuenta__saludo{ display:none; }
}
@media (max-width: 640px){
  .pasos{ padding-inline:14px; }
  .pasos__item{ font-size:0; gap:0; padding-right:4px; }
  .pasos__item--activo{ font-size:13px; gap:8px; }
  .pasos__item span{ font-size:11.5px; }
}

/* ============================================================
   MÓVIL · ≤768px
   ------------------------------------------------------------
   Nada de lo que sigue existe en escritorio: todo vive dentro de
   media queries, así que el CSS de arriba queda intacto.

   Se atacan cuatro cosas:
     1 · desplazamiento horizontal (overflow-x)
     2 · desplazamiento acumulado del diseño (CLS)
     3 · objetivos táctiles de al menos 44 × 44 px
     4 · texto por debajo de los 12 px
   ============================================================ */
@media (max-width: 768px){

  /* ----------------------------------------------------------
     1 · SIN DESPLAZAMIENTO HORIZONTAL
     `clip` en vez de `hidden`: recorta el excedente sin crear un
     contenedor de scroll, así la cabecera `position:sticky` y el
     `position:fixed` de los avisos siguen funcionando.
     ---------------------------------------------------------- */
  html{ overflow-x:clip; }
  body{ overflow-x:clip; font-size:16px; }

  img, svg, video, canvas, iframe, table, pre{ max-width:100%; }
  img{ height:auto; }

  /* Cualquier rejilla que herede columnas fijas de escritorio no
     debe poder empujar el ancho de la página. */
  main, section, header, footer, .contenedor{ min-width:0; }

  /* ----------------------------------------------------------
     2 · CABECERA EN DOS FILAS
     De 66 px pasa a 110. La variable se redefine aquí y no en
     cada archivo, porque de ella cuelgan los `top:` de la barra
     pegajosa del evento y del aviso de compra.
     ---------------------------------------------------------- */
  :root{ --cabecera-alto:110px; }

  .cabecera{ height:auto; min-height:var(--cabecera-alto); }
  .cabecera__interior{ padding-inline:14px; gap:10px; }

  /* El campo de búsqueda ya no compite por el ancho: pasa a su
     propia fila y deja de ser la causa del scroll lateral. */
  .buscador{ min-width:0; }
  .buscador input{
    min-width:0;
    font-size:16px;   /* por debajo de 16 px iOS hace zoom al enfocar */
  }

  /* Reserva del hueco de la caja de cuenta mientras js/sesion.js
     la pinta. Sin esto la cabecera salta y suma CLS. */
  .cuenta{ min-height:38px; }
  .cuenta[data-sesion-caja]:empty{ min-width:128px; }

  .logo__marca{ width:30px; height:30px; font-size:19px; }
  .logo__texto b, .logo__texto i{ font-size:16px; }

  /* ----------------------------------------------------------
     3 · OBJETIVOS TÁCTILES
     ---------------------------------------------------------- */
  .btn{
    min-height:48px;
    padding:14px 22px;
    font-size:14px;
  }
  .btn--whats{ min-height:52px; }

  .selector-estado{ min-height:44px; gap:10px; }

  /* Barra de pasos genérica */
  .pasos{
    position:static; height:auto;
    flex-wrap:wrap; gap:8px 12px;
    padding:10px 14px;
  }
  .pasos__item{ min-height:34px; }
  .pasos__item span{ width:26px; height:26px; font-size:12px; }
  .pasos__contador{ font-size:12.5px; }

  /* ----------------------------------------------------------
     4 · AVISOS FLOTANTES
     A todo el ancho y anclados abajo: en un teléfono la píldora
     centrada de escritorio se salía por los costados.
     ---------------------------------------------------------- */
  .aviso{
    left:12px; right:12px; bottom:14px;
    padding:14px 18px;
    font-size:14px; line-height:1.4; text-align:center;
    border-radius:var(--radio-m);
    transform:translateY(18px);
  }
  .aviso.visible{ transform:translateY(0); }

  /* ----------------------------------------------------------
     5 · TEXTO LEGIBLE
     Google marca como ilegible todo lo que baje de 12 px.
     ---------------------------------------------------------- */
  .cabecera__etiqueta{ font-size:11px; }
  .cabecera__vinculo{ font-size:15px; }
}

/* ============================================================
   TELÉFONO ANGOSTO · ≤400px
   ============================================================ */
@media (max-width: 400px){
  .cabecera__interior{ padding-inline:12px; gap:8px; }
  .logo__texto b, .logo__texto i{ font-size:15px; }
  .btn{ padding-inline:16px; letter-spacing:.02em; }
}