/* ---------- shell ---------- */
#app{position:relative;overflow:hidden;height:100%;width:100%;display:flex;flex-direction:column;background:var(--bg);background-image:radial-gradient(ellipse at 20% 0%,rgba(73,129,214,.14),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(28,49,112,.12),transparent 50%)}
@media (min-width:520px){body{align-items:center;background:#0b1e49;background-image:radial-gradient(ellipse at 50% 0%,#163985,#0b1e49 70%)}#app{width:414px;height:min(896px,calc(100% - 40px));border-radius:44px;border:10px solid #101827;box-shadow:0 30px 80px rgba(0,0,0,.5)}}
/* Header de vidrio: flota sobre el contenido, que pasa por debajo desenfocado */
.top{position:absolute;top:0;left:0;right:0;flex:none;container-type:inline-size;z-index:40;height:var(--header-h);background:var(--glass-strong);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--glass-line);color:#fff;display:flex;align-items:center;padding:0 12px 0 8px;gap:8px}
.top .burger{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.top .burger:hover{background:rgba(255,255,255,.1)}
.top .burger svg{width:24px;height:24px}
/* El slogan se centra en el espacio libre entre el menú y los botones de la derecha */
.top .brand{flex:1;min-width:0;display:flex;justify-content:center;align-items:center}
.top .brand img{width:100%;max-width:174px;height:auto}
/* Saldo de puntos: icono y cantidad, lleva a Mis puntos */
.top .pts-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 8px;border-radius:17px;background:var(--glass);border:1px solid var(--glass-line);font-weight:600;font-size:.84rem;font-variant-numeric:tabular-nums;position:relative}
.top .pts-btn::before{content:"";position:absolute;inset:-3px 0}
.top .pts-btn svg{width:18px;height:18px}
.top .pts-btn b{font-weight:600;letter-spacing:.01em;white-space:nowrap}
@container (max-width:340px){ .top .pts-btn{gap:5px;padding:0 10px 0 7px} }
/* Hoja de idioma */
.lang-opts{display:flex;flex-direction:column;gap:8px}
.lang-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border-radius:var(--r-tile);background:var(--bg-card);text-align:left}
.lang-opt .code{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--navy);display:grid;place-items:center;font-family:var(--num);font-weight:700;flex:none}
.lang-opt .tx{flex:1}
.lang-opt b{color:var(--navy);display:block}
.lang-opt small{color:var(--muted);font-size:.78rem}
.lang-opt>svg{width:20px;height:20px;color:var(--p2143);flex:none}
.lang-opt.on{outline:2px solid var(--p2143)}
/* Contador del carrito en la pestaña Tienda */
.tabbar .tab-badge{position:absolute;top:5px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:.68rem;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}

/* Pantallas inmersivas (#jersey y #coleccion, spec 13): sin header ni tabbar; cada vista pinta su propio fondo */
#app.immersive .top,#app.immersive .tabbar{display:none}
#app.immersive main{padding:0;background:var(--locker);container-type:size}
/* Sin barra de scroll visible: en escritorio le quitaba ancho a la vista y cambiaba su acomodo (deslizar sigue funcionando) */
#app.immersive main{scrollbar-width:none}
#app.immersive main::-webkit-scrollbar{display:none}
#app.immersive #toast{bottom:24px}

/* El contenido pasa por debajo del header y de la tabbar flotantes: main suma sus altos a su relleno */
main{--main-pt:calc(var(--header-h) + 16px);flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--main-pt) 16px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom));width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* Tabbar flotante de vidrio oscuro */
.tabbar{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;height:var(--tab-h);border-radius:var(--r-float);background:var(--glass-strong);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-line);display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 12px 30px rgba(4,11,31,.35)}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.72rem;font-weight:600;color:var(--on-dark-2);position:relative}
.tabbar button svg{position:relative;z-index:1;width:23px;height:23px}
.tabbar button span{position:relative;z-index:1}
/* Tab activo: blanco, con una píldora de brillo eléctrico detrás del icono que late suave */
.tabbar button.on{color:var(--white)}
/* Indicadores de la tabbar: mismo rojo, sin borde, en la esquina superior derecha del icono (punto o contador) */
.tabbar .live-dot,.tabbar .todo-dot{position:absolute;top:8px;left:calc(50% + 7px);width:10px;height:10px;border-radius:50%;background:var(--red)}

.overlay{position:absolute;inset:0;background:rgba(11,30,73,.58);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.on{opacity:1;pointer-events:auto}
/* Menú lateral: marino profundo con un arco de luz; la ruta activa va en vidrio con el icono encendido */
.drawer{position:absolute;top:0;bottom:0;left:0;width:290px;max-width:85%;background:var(--grad-hero);isolation:isolate;color:#fff;z-index:60;transform:translateX(-100%);transition:transform .2s;padding:20px 18px 20px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(126,222,241,.28) transparent}
.drawer::-webkit-scrollbar{width:6px}
.drawer::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(126,222,241,.28)}
.drawer.on{transform:none}
.drawer .logo{width:88px;height:88px;margin:6px auto 16px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.drawer a,.drawer button.item{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:10px;font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.04em;width:100%;text-align:left}
.drawer a svg,.drawer button.item svg{width:20px;height:20px;opacity:.85}
.drawer::before{content:"";position:absolute;z-index:-1;width:560px;height:560px;left:-380px;bottom:-300px;border-radius:50%;border:1px solid rgba(126,222,241,.25);box-shadow:0 0 36px rgba(61,139,255,.25);pointer-events:none}
.drawer a:hover,.drawer button.item:hover{background:rgba(255,255,255,.08)}
.drawer button.item.on{background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line)}
.drawer button.item.on svg{opacity:1;color:var(--electric);filter:drop-shadow(0 0 6px rgba(61,139,255,.8))}
.drawer .sep{height:1px;background:rgba(255,255,255,.14);margin:8px 0}
.drawer .item .val{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500;opacity:.75}
.drawer .ext{opacity:.7;font-weight:500;text-transform:none;letter-spacing:0;font-size:.85rem}
.drawer .note{margin-top:auto;font-size:.75rem;opacity:.65;line-height:1.4;padding:8px 10px}

/* Pantalla de arranque: el escudo late mientras se precargan las imágenes del inicio */
#splash{position:absolute;inset:0;z-index:95;display:grid;place-items:center;background:radial-gradient(60% 40% at 50% 46%,rgba(61,139,255,.45),transparent 70%),linear-gradient(180deg,rgba(4,11,31,.72),rgba(4,11,31,.9)),url(../../assets/img/bg-estadio-noche.webp) 50% 0/cover,var(--abyss);transition:opacity .35s ease}
#splash img{width:96px;height:96px;border-radius:50%;background:var(--white);padding:4px;box-shadow:0 0 0 1px rgba(126,222,241,.5),0 0 34px rgba(61,139,255,.6);animation:splash-pulse 1.4s ease-in-out infinite}
#splash.out{opacity:0;pointer-events:none}
@keyframes splash-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.94);opacity:.85}}
/* Barra de carga al entrar a una vista cuyas imágenes aún no están listas */
#app.loading::after{content:"";position:absolute;z-index:96;top:0;left:0;width:40%;height:3px;background:var(--sky);animation:load-bar 1s ease-in-out infinite}
@keyframes load-bar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
/* Imágenes que no alcanzaron a precargarse: aparecen con un fundido (preload.js les pone .ld al cargar) */
#view img{transition:opacity .3s ease}
#view img:not(.ld){opacity:0}

/* Sin backdrop-filter, el vidrio del header y la tabbar se vuelve sólido */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .top,.tabbar{background:rgba(4,11,31,.94)} }
/* El login no tiene header ni tabbar: relleno normal */
#app.auth main{padding:16px 16px 28px}

/* Entrada escalonada de los bloques al cambiar de ruta (spec 15): opacidad y 12 px, 40 ms entre bloques, máximo 6 */
#view.enter>*{animation:view-in .35s cubic-bezier(.22,1,.36,1) both}
#view.enter>*:nth-child(2){animation-delay:.04s}
#view.enter>*:nth-child(3){animation-delay:.08s}
#view.enter>*:nth-child(4){animation-delay:.12s}
#view.enter>*:nth-child(5){animation-delay:.16s}
#view.enter>*:nth-child(n+6){animation-delay:.2s}
@keyframes view-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* En las pantallas inmersivas (que caben justo en el alto) la entrada es solo un fundido, sin desplazamiento */
#app.immersive #view.enter>*{animation-name:view-fade}
@keyframes view-fade{from{opacity:0}to{opacity:1}}

/* ---------- Header (spec 20) ---------- */
/* Transparente arriba sobre la zona oscura; vidrio con línea de luz al bajar o si la vista empieza en claro */
.top{transition:background-color .2s,border-color .2s,box-shadow .2s}
#app:not(.scrolled):not(.solid) .top{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
#app.scrolled .top,#app.solid .top{box-shadow:0 1px 0 rgba(4,11,31,.12),0 8px 20px -12px rgba(4,11,31,.5)}
/* Franja sólida en el azul marino del club (spec 25) cuando la vista empieza en claro o al desplazar: el vidrio oscuro
   translúcido sobre contenido claro se veía gris. Arriba de una zona oscura el header sigue transparente */
#app.scrolled .top,#app.solid .top{background:linear-gradient(100deg,var(--navy-g1) 0%,var(--blue-dark) 60%,var(--navy-g2) 100%);border-bottom-color:rgba(126,222,241,.16);-webkit-backdrop-filter:none;backdrop-filter:none}

/* Barra de desplazamiento en PC (mouse): delgada, azul marino, con los extremos libres del header y la tabbar flotantes.
   Chrome y Safari usan los pseudoelementos; Firefox, scrollbar-color. En el teléfono queda la del sistema */
@media (hover:hover) and (pointer:fine){
  main::-webkit-scrollbar{width:10px}
  main::-webkit-scrollbar-track{background:transparent;margin:calc(var(--header-h) + 10px) 0 calc(var(--tab-h) + 22px)}
  main::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:6px;background:rgba(28,49,112,.32) padding-box}
  main::-webkit-scrollbar-thumb:hover{background-color:rgba(28,49,112,.55)}
  main::-webkit-scrollbar-thumb:active{background-color:var(--sky-ink)}
  @supports not selector(::-webkit-scrollbar){ main{scrollbar-width:thin;scrollbar-color:rgba(28,49,112,.4) transparent} }
}
/* Subpantallas: flecha y título en lugar del menú y el lema */
.top .hd-bk,.top .hd-title{display:none}
#app.sub .top .burger,#app.sub .top .brand{display:none}
#app.sub .top .hd-bk{display:grid;flex:none;place-items:center;width:40px;height:40px;margin-left:4px;border-radius:50%;background:rgba(4,11,31,.35);border:1px solid rgba(126,222,241,.35);color:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#app.sub .top .hd-bk svg{width:20px;height:20px}
#app.sub .top .hd-title{display:block;flex:1;min-width:0;font-family:var(--tech);font-weight:700;font-size:1.3rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 10px rgba(4,11,31,.6)}
/* Pill de puntos: vidrio con borde de luz, la moneda con brillo y la cifra en Saira */
.top .pts-btn{height:36px;padding:0 12px 0 7px;border-radius:18px;background:rgba(4,11,31,.35);border-color:rgba(126,222,241,.35);box-shadow:0 0 14px rgba(61,139,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.top .pts-btn svg{width:20px;height:20px;filter:drop-shadow(0 1px 4px rgba(4,11,31,.5))}
.top .pts-btn b{font-family:var(--tech);font-weight:700;font-size:1.02rem;letter-spacing:.02em}
@container (max-width:340px){ #app.sub .top .hd-title{font-size:1.02rem;letter-spacing:.02em} #app.sub .top .hd-bk{margin-left:0} }

/* Logo siempre al centro de la pantalla (no del hueco entre menú y pill). Su ancho deja libre a cada lado
   lo que ocupa la pill de puntos más el relleno y 8 px de aire (108 px; 92 px con la pill compacta), así nunca la toca */
.top .brand{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:min(174px,calc(100cqw - 216px));flex:none}
.top .brand img{max-width:100%}
.top .pts-btn{margin-left:auto}
@container (max-width:380px){ .top .brand{width:min(174px,calc(100cqw - 184px))} .top .pts-btn{height:34px;gap:5px;padding:0 10px 0 6px} .top .pts-btn svg{width:17px;height:17px} .top .pts-btn b{font-size:.94rem} }
@container (max-width:340px){ .top .pts-btn{padding:0 8px 0 5px;gap:4px} .top .pts-btn b{font-size:.88rem} }