/* Juegatelos — Pronosticador. Mobile-first, azul + dorado. */
:root{
  --bg:#060d20; --bg2:#0a1732; --card:#0e1e42; --card2:#122754;
  --line:#1c356b; --txt:#eaf1ff; --mut:#93a6cf; --gold:#f5c542; --gold2:#ffd766;
  --hot:#ff6b3d; --cold:#4aa3ff; --green:#3ad07a; --danger:#ff5c72;
  --r:16px; --shadow:0 12px 30px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--txt); background:radial-gradient(1100px 560px at 50% -8%,#12306b 0%,var(--bg2) 42%,var(--bg) 100%);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
.gold{color:var(--gold)} .muted{color:var(--mut)}
img{max-width:100%}
::-webkit-scrollbar{height:6px;width:6px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* ---------- AUTH ---------- */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 20px}
.auth-card{width:100%;max-width:400px;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:22px;padding:30px 24px;box-shadow:var(--shadow);text-align:center}
.brand-mark{letter-spacing:.32em;font-size:.72rem;font-weight:800;color:var(--gold)}
.auth-title{font-size:2rem;line-height:1.05;font-weight:900;margin:10px 0 4px;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-title span{-webkit-text-fill-color:var(--gold)}
.auth-logo{width:170px;height:170px;object-fit:contain;display:block;margin:0 auto 8px;border-radius:26px}
.auth-sub{color:var(--mut);font-size:.95rem;margin-bottom:20px}
.auth-foot{margin-top:22px;color:#6f83ad;font-size:.78rem}
form{text-align:left;display:flex;flex-direction:column;gap:14px;margin-top:6px}
label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--mut);font-weight:600}
input{background:#08122b;border:1px solid var(--line);border-radius:12px;padding:14px 14px;color:#fff;
  font-size:1rem;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,66,.15)}
.btn-primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2c00;border:none;
  border-radius:12px;padding:15px;font-size:1.05rem;font-weight:800;cursor:pointer;margin-top:6px;
  box-shadow:0 10px 22px -12px rgba(245,197,66,.8);transition:transform .1s}
.btn-primary:active{transform:translateY(1px)}
.err{color:var(--danger);font-size:.85rem;min-height:1em;text-align:center}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:6px;background:#0a173a;border:1px solid var(--line);border-radius:12px;padding:5px;margin:14px 0}
.auth-tabs{max-width:100%}
.tab{flex:1;border:none;background:transparent;color:var(--mut);font-weight:700;font-size:.86rem;
  padding:10px 8px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:.15s}
.tab.on{background:linear-gradient(180deg,var(--card2),var(--card));color:#fff;box-shadow:var(--shadow)}

/* ---------- APP SHELL ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:rgba(6,13,32,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tb-brand{display:flex;align-items:center;gap:9px;font-size:.95rem;font-weight:900;letter-spacing:.02em}
.tb-logo{width:32px;height:32px;object-fit:contain;border-radius:9px;flex:0 0 auto}
.tb-txt b{color:var(--gold)} .tb-txt{color:var(--mut);font-weight:600}
.wrap{max-width:820px;margin:0 auto;padding:18px 16px 96px}

/* Barra inferior */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  background:rgba(8,16,40,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0)}
.bn{flex:1;background:none;border:none;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 0 9px;font-size:.68rem;font-weight:700;cursor:pointer;transition:color .15s}
.bn svg{width:23px;height:23px;display:block}
.bn.on{color:var(--gold)}
.bn:active{transform:scale(.94)}
.h-big{font-size:1.5rem;font-weight:900;margin:6px 0 16px}
.loading{color:var(--mut);padding:30px;text-align:center;grid-column:1/-1}

/* ---------- GRID SORTEOS ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:var(--r);padding:16px 12px;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s;
  display:flex;flex-direction:column;align-items:center;gap:10px;min-height:132px;justify-content:center}
.card:active{transform:scale(.97)}
.card:hover{border-color:var(--gold)}
.logo-wrap{width:62px;height:62px;display:flex;align-items:center;justify-content:center}
.card .logo{max-width:62px;max-height:62px;object-fit:contain;filter:drop-shadow(0 5px 11px rgba(0,0,0,.6))}
.logo-fallback{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;font-weight:900;color:#08122b;background:linear-gradient(180deg,var(--gold2),var(--gold))}
.card .nm{font-size:.86rem;font-weight:700;line-height:1.15}
.card .live{position:absolute;top:8px;right:8px;font-size:.62rem;font-weight:800;color:#04210f;
  background:var(--green);padding:2px 7px;border-radius:999px}
.ghost-btn{display:block;width:100%;margin:18px auto 0;max-width:420px;background:transparent;border:1px dashed var(--line);
  color:var(--mut);border-radius:12px;padding:13px;font-weight:700;cursor:pointer}

/* ---------- DETALLE ---------- */
.back{background:none;border:none;color:var(--gold);font-weight:700;font-size:.95rem;cursor:pointer;padding:2px 0;margin-bottom:8px}
.d-head{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.d-logo{width:52px;height:52px;object-fit:contain}
.d-name{font-size:1.5rem;font-weight:900}
.block{margin:16px 0}
.blk-title{font-size:.95rem;font-weight:800;color:var(--mut);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.reel{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.rcard{flex:0 0 auto;width:96px;background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-radius:14px;padding:10px 8px;text-align:center;scroll-snap-align:start}
.rcard .t{font-size:.72rem;color:var(--gold);font-weight:800}
.rcard img{width:60px;height:60px;object-fit:contain;margin:6px auto}
.rcard .a{font-size:.72rem;font-weight:700;line-height:1.1}
.rcard .n{font-size:.68rem;color:var(--mut)}
.empty{color:var(--mut);font-size:.88rem;padding:14px;border:1px dashed var(--line);border-radius:12px;text-align:center}

/* sticky tabs del detalle */
.sticky-tabs{position:sticky;top:57px;z-index:30;overflow-x:auto}
.sticky-tabs .tab{flex:0 0 auto;min-width:96px}

/* listas de stats */
.tab-body{margin-top:14px;min-height:120px}
.stat-list{display:flex;flex-direction:column;gap:9px}
.srow{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.srow .rank{font-size:.9rem;font-weight:900;color:var(--gold);width:22px;text-align:center}
.srow img{width:46px;height:46px;object-fit:contain}
.srow .info{flex:1;min-width:0}
.srow .info .an{font-weight:800;font-size:.95rem}
.srow .info .sub{font-size:.76rem;color:var(--mut)}
.srow .metric{text-align:right;font-weight:900}
.srow .metric .big{font-size:1.15rem}
.srow .metric.hot .big{color:var(--hot)}
.srow .metric.cold .big{color:var(--cold)}
.srow .metric .u{font-size:.66rem;color:var(--mut);font-weight:600}
.bar{height:6px;border-radius:6px;background:#0a1838;overflow:hidden;margin-top:5px}
.bar>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--hot))}
.pill-note{font-size:.78rem;color:var(--mut);margin:2px 0 12px}
.pred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:520px){.pred-grid{grid-template-columns:repeat(3,1fr)}}
.pcard{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;
  padding:14px 10px;text-align:center;position:relative;overflow:hidden}
.pcard img{width:66px;height:66px;object-fit:contain;margin-bottom:6px}
.pcard .an{font-weight:800;font-size:.9rem}
.pcard .nn{font-size:.72rem;color:var(--mut)}
.pcard .conf{margin-top:8px;font-size:.72rem;color:var(--gold);font-weight:800}
.pcard .ring{margin-top:6px}

/* resultados de hoy (todos) */
.today-list{display:flex;flex-direction:column;gap:8px}
.trow{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.trow img{width:40px;height:40px;object-fit:contain}
.trow .tinfo{flex:1;min-width:0}
.trow .tinfo b{font-size:.9rem}
.trow .tinfo .s{font-size:.74rem;color:var(--mut);display:block}
.trow .th{color:var(--gold);font-weight:800;font-size:.82rem}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#0c1c40;border:1px solid var(--line);color:#fff;padding:12px 18px;border-radius:12px;
  font-size:.88rem;box-shadow:var(--shadow);transition:.25s;z-index:99;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}