/* ===== diseño v2: más profundidad, menos botoncitos (se carga después de app.css) ===== */
body{background:radial-gradient(1200px 520px at 50% -10%,#262c10 0%,transparent 60%) no-repeat,var(--bg);background-attachment:fixed}
.top{position:sticky;top:0;z-index:20;background:rgba(10,11,13,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #ffffff12;padding:8px 14px}
h2{font-size:22px;letter-spacing:2px;margin:22px 0 10px;color:var(--text);display:flex;align-items:center;gap:10px}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.card{background:linear-gradient(180deg,#ffffff08,#ffffff02),var(--panel);border:1px solid #ffffff14;box-shadow:0 10px 30px -14px #000c,inset 0 1px 0 #ffffff0d;border-radius:var(--radius);padding:16px}
.card.tight{padding:12px 14px}
a.card{transition:transform .12s}a.card:active{transform:scale(.985)}
.btn{border:1px solid #ffffff14;background:linear-gradient(180deg,#ffffff0d,#ffffff03),var(--panel2);border-radius:14px;min-height:46px;box-shadow:0 4px 14px -8px #000c;font-weight:700;letter-spacing:.2px}
.btn.primary{background:linear-gradient(180deg,#e8f870,#bfe21f);color:#10130a;border:0;box-shadow:0 10px 26px -10px #bfe21fcc,inset 0 1px 0 #ffffff55}
.btn.ghost{background:transparent;box-shadow:none}
.btn.good{background:linear-gradient(180deg,#2a9a62,#1c7347)}
.btn.danger{background:linear-gradient(180deg,#a02a3a,#7a1f2b)}
.btn.sm{min-height:36px}
.pill{border-radius:999px;padding:8px 14px;min-height:40px;background:#ffffff08;border:1px solid #ffffff14;font-weight:600}
.pill.on{background:linear-gradient(180deg,#e8f870,#bfe21f);color:#10130a;border:0;font-weight:800}
.chip{padding:4px 11px;letter-spacing:.4px;text-transform:uppercase;font-size:11px}
.chip.live{background:#ff4d4d22;color:#ff7b7b;border:1px solid #ff4d4d66}
.chip.final{background:#3fdc8622;color:#6ff0a8;border:1px solid #3fdc8655}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.kpi{background:linear-gradient(180deg,#ffffff0a,#ffffff03),var(--panel);border:1px solid #ffffff12;border-radius:16px;padding:14px 8px}
.kpi b{font-size:34px;color:var(--text)}.kpi span{letter-spacing:.8px}
input,select,textarea{background:#08090b;border:1px solid #ffffff1c;border-radius:12px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.sheet{border-radius:24px 24px 0 0;background:linear-gradient(180deg,#181b20,var(--bg));border:1px solid #ffffff14;border-bottom:0}
.sheetbg{backdrop-filter:blur(3px)}
.wrap{padding-bottom:120px}

/* iconos */
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* barra inferior de navegación */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;align-items:flex-end;padding:6px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(10,11,13,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid #ffffff14}
.dock a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:12px}
.dock a.on{color:var(--accent)}
.dock a.on .ic{filter:drop-shadow(0 0 8px #d6f03c88)}
.dock a.plus{flex:none;margin:0 6px;transform:translateY(-14px);color:var(--text)}
.dock a.plus .fab{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#e8f870,#bfe21f);color:#10130a;box-shadow:0 12px 28px -8px #bfe21f,0 0 0 5px var(--bg)}
.dock a.plus .ic{width:28px;height:28px;stroke-width:2.4}
.dock a.plus em{font-style:normal;margin-top:2px}
@media(min-width:760px){.dock{left:50%;right:auto;transform:translateX(-50%);width:560px;border-radius:24px 24px 0 0;border:1px solid #ffffff14;border-bottom:0}}

/* inicio de captura */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:18px;margin:6px 0 14px;background:radial-gradient(420px 200px at 100% 0,#bfe21f44,transparent 70%),linear-gradient(160deg,#1d2026,#0f1013);border:1px solid #ffffff1a;box-shadow:0 18px 40px -20px #000}
.hero .who{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.hero .who .logo,.hero .who img{width:58px;height:58px;font-size:24px;border:2px solid #ffffff22}
.hero small.eb{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#b4bac4}
.hero b.nm{display:block;font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:1.5px;line-height:1.05}
.hero .chg{margin-left:auto;font-size:12px;color:#e4e7ec;background:#ffffff14;border-radius:999px;padding:6px 11px;font-weight:700}
.hero .rec{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.hero .rec div{background:#00000030;border:1px solid #ffffff10;border-radius:14px;padding:10px 6px;text-align:center}
.hero .rec b{display:block;font-family:var(--display);font-weight:400;font-size:30px;line-height:1}
.hero .rec span{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:#b4bac4}
.cta{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:20px;text-decoration:none;color:#10130a;background:linear-gradient(120deg,#e3f56a,#b9db1f);box-shadow:0 16px 34px -14px #b9db1f;margin:0 0 12px;border:0;font:inherit}
.cta .ic{width:30px;height:30px;stroke-width:2.2}.cta b{display:block;font-size:18px}.cta small{opacity:.75;font-weight:600}
.livecard{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;border-radius:20px;padding:14px 16px;margin:0 0 12px;background:linear-gradient(120deg,#4a1620,#1c1222);border:1px solid #ff4d4d55}
.livecard b{font-size:18px;display:block}.livecard .go{margin-left:auto;font-weight:800;color:#ff9a9a}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
.quick button,.quick a{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:16px;border:1px solid #ffffff14;background:#ffffff08;color:var(--text);text-decoration:none;font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-align:left}
.quick .ic{color:var(--accent)}
.grow{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:13px 14px 13px 18px;margin:8px 0;border-radius:18px;background:linear-gradient(180deg,#ffffff08,#ffffff02),var(--panel);border:1px solid #ffffff12;position:relative;overflow:hidden}
.grow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted)}
.grow.w::before{background:var(--good)}.grow.l::before{background:var(--bad)}.grow.live::before{background:#ff4d4d}
.grow .mid{flex:1;min-width:0}.grow .mid b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grow .mid span{font-size:12.5px;color:var(--muted)}
.grow .sc{font-family:var(--display);font-size:34px;letter-spacing:1px;line-height:1;text-align:right}
.grow .sc small{display:block;font-family:system-ui,sans-serif;font-size:10.5px;letter-spacing:.8px;font-weight:800;text-transform:uppercase}
.grow.w .sc small{color:var(--good)}.grow.l .sc small{color:var(--bad)}
.prow{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:8px 0;border-radius:16px;background:linear-gradient(180deg,#ffffff08,#ffffff02),var(--panel);border:1px solid #ffffff12}
.prow .logo{width:40px;height:40px;font-size:16px}.prow b{flex:1}
.prow.off{opacity:.5}

/* sitio público: navegación inferior en el teléfono, superior en computadora */
#nav a svg{display:none}
@media(max-width:759px){
  #nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;flex-wrap:nowrap;gap:0;padding:6px 4px calc(8px + env(safe-area-inset-bottom));background:rgba(10,11,13,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid #ffffff14}
  #nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;font-size:10.5px;background:none;color:var(--muted);letter-spacing:.2px}
  #nav a.on{background:none;color:var(--accent)}
  #nav a svg{display:block}
  #nav a.on svg{filter:drop-shadow(0 0 8px #d6f03c88)}
}
@media(min-width:760px){
  #nav{position:fixed;top:14px;right:max(28px,calc((100vw - 1280px)/2 + 28px));z-index:25}
  #nav a{padding:8px 15px;font-size:14px}
}
@media(min-width:1500px){#nav{right:max(28px,calc((100vw - 1480px)/2 + 28px))}}

/* botones de captura en vivo */
.bigs{gap:10px}
.bigs .btn{min-height:62px;border-radius:16px;font-size:15.5px;font-weight:800;border:1px solid #ffffff18;box-shadow:0 8px 20px -12px #000}
.bigs .btn.hit{background:linear-gradient(180deg,#2f9f66,#1b6b43)}
.bigs .btn.out{background:linear-gradient(180deg,#9a3a46,#64222c)}
.bigs .btn.walk{background:linear-gradient(180deg,#454b57,#2a2e36)}
.tabs{background:rgba(10,11,13,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid #ffffff14;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.tabs .btn{border-radius:14px;box-shadow:none}
.score .n{text-shadow:0 4px 30px #58a8ff44}
.empty{border:1px dashed #ffffff1c;border-radius:18px;background:#ffffff04}

/* inicio del sitio público */
.phero{display:flex;align-items:center;gap:18px;padding:22px 20px;margin:4px 0 14px;border-radius:26px;background:radial-gradient(500px 220px at 100% 0,#d6f03c26,transparent 70%),linear-gradient(160deg,#1b1e24,#0f1013);border:1px solid #ffffff14;box-shadow:0 18px 40px -22px #000}
.phero .big,.phero img.big{width:86px;height:86px;font-size:34px;border:2px solid #ffffff22;flex:none;object-fit:contain}
.phero small.eb{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);font-weight:700}
.phero h1{font-size:44px;letter-spacing:2px;line-height:1;margin:4px 0 6px}
.phero .sub{color:var(--muted);font-weight:600}
.livebig{display:block;text-decoration:none;color:inherit;border-radius:22px;padding:16px;margin:0 0 14px;background:linear-gradient(140deg,#3a1218,#16101a);border:1px solid #ff4d4d55}
.cols{display:grid;gap:0 22px}
.leader{padding:11px 0}
.leader .pos{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff0c;font-size:20px;color:var(--muted)}
.leader .pos.first{background:var(--accent);color:var(--on-accent)}
.leader .v{color:var(--accent)}
@media(min-width:900px){
  .phero{padding:34px 36px;gap:28px}.phero .big,.phero img.big{width:128px;height:128px;font-size:50px}.phero h1{font-size:72px}.phero .sub{font-size:17px}
  .cols{grid-template-columns:1.35fr 1fr;align-items:start}
  .kpis{grid-template-columns:repeat(4,1fr);gap:14px}.kpi{padding:22px 10px}.kpi b{font-size:46px}
  .livebig{padding:26px 30px}
}

/* pantalla fija: sin zoom con pellizco ni doble toque, sin rebote */
html,body{touch-action:pan-x pan-y;overscroll-behavior:none;-webkit-text-size-adjust:100%}
button,a,input,select,textarea,label{touch-action:manipulation}