/* ============ base ============ */
:root{
  --bg:#f2f5f9;
  --card:#ffffff;
  --border:#e9edf2;
  --ink:#16283f;
  --ink-2:#33475f;
  --muted:#8794a5;
  --muted-2:#a6b1bf;
  --green:#12a65f;
  --green-2:#18b26b;
  --green-soft:#e9f7f0;
  --navy:#12314f;
  --red:#c8323d;
  --red-soft:#fdecec;
  --radius:14px;
  --shadow:0 1px 2px rgba(19,40,63,.04), 0 1px 3px rgba(19,40,63,.03);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:13px;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h2,h3,h4{margin:0}

.ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic.tiny{width:13px;height:13px}

/* ============ estructura ============ */
.app{display:flex;min-height:100vh;max-width:1800px;margin:0 auto;width:100%;background:var(--bg)}

/* ---- sidebar ---- */
.sidebar{
  width:224px;flex:none;background:#fff;border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:22px 14px 16px;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:9px;padding:0 8px 26px}
.brand-name{font-size:19px;font-weight:800;letter-spacing:-.4px;color:#122c48}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:#5d6c7e;font-weight:500;font-size:13.5px;transition:background .15s,color .15s;
}
.nav-item:hover{background:#f5f8fa;color:var(--ink)}
.nav-item.is-active{background:var(--green-soft);color:var(--green);font-weight:600}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.pro-card{border:1px solid var(--border);border-radius:12px;padding:13px;background:#fbfdfc}
.pro-head{display:flex;gap:10px;align-items:center}
.pro-badge{
  width:30px;height:30px;border-radius:9px;background:var(--green);color:#fff;
  display:grid;place-items:center;flex:none;
}
.pro-badge .ic{width:15px;height:15px;fill:#fff}
.pro-title{font-weight:700;font-size:13px}
.pro-sub{color:var(--muted);font-size:11px;margin-top:2px}
.btn-ghost{
  margin-top:11px;width:100%;padding:8px 0;border:1px solid var(--border);border-radius:9px;
  background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.btn-ghost:hover{background:#f7fafc}
.theme-toggle{
  display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--border);
  border-radius:11px;background:#fff;font-size:13px;font-weight:500;color:var(--ink-2);
}
.theme-toggle .ic{color:#f0a913}

/* ---- main ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 20px 12px}

.topbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:2px 4px 14px}
.league-select{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);
  border-radius:11px;padding:8px 12px;box-shadow:var(--shadow);
}
.league-logo{display:grid;place-items:center}
.league-name{font-weight:700;font-size:13.5px}
.chev{width:15px;height:15px;color:var(--muted)}
.icon-btn{position:relative;color:#4d5d70;display:grid;place-items:center;width:32px;height:32px}
.icon-btn .dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#e5484d;border:1.5px solid #fff}
.account{display:flex;align-items:center;gap:9px}
.avatar{display:grid;place-items:center;border-radius:50%;overflow:hidden}
.account-name{font-weight:600;font-size:13.5px}
.pill-pro{background:var(--green);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 7px;border-radius:6px}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.center{display:flex;flex-direction:column;gap:14px;min-width:0}
.rail{display:flex;flex-direction:column;gap:14px}

.card{transition:box-shadow .18s ease;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;display:flex;flex-direction:column}
.card:hover{box-shadow:0 2px 6px rgba(19,40,63,.06),0 1px 3px rgba(19,40,63,.04)}
.card-title{font-size:13.5px;font-weight:700;letter-spacing:-.1px;margin-bottom:14px}

/* ============ tarjeta del partido ============ */
.matchup{padding:20px 22px 0}
.matchup-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.team{display:flex;align-items:center;gap:18px}
.team-left{justify-content:center}
.team-right{justify-content:center}
.team-left .team-txt{text-align:right}
.team-city{font-size:12.5px;color:var(--muted)}
.team-name{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.25;margin:1px 0 6px}
.team-rec{font-size:13px;font-weight:600;color:var(--ink-2)}
.team-div{font-size:11.5px;color:var(--muted);margin-top:3px}
.team-logo{display:grid;place-items:center;filter:drop-shadow(0 1px 2px rgba(19,40,63,.06))}

.matchup-mid{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:4px}
.chip-league{
  display:inline-flex;align-items:center;gap:6px;background:#f4f7fa;border:1px solid var(--border);
  border-radius:8px;padding:4px 9px;font-size:11px;font-weight:700;color:var(--ink-2);
}
.game-time{font-size:13px;font-weight:700;margin-top:4px}
.game-place{font-size:12px;color:var(--muted)}
.vs{
  margin-top:8px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--ink-2);box-shadow:var(--shadow);
}

.line-block{margin-top:20px;border-top:1px solid var(--border);padding:16px 0 20px;text-align:center}
.line-label{font-size:10.5px;font-weight:700;letter-spacing:1.1px;color:var(--muted);margin-bottom:10px}
.line-boxes{display:flex;justify-content:center;gap:14px}
.line-box{
  min-width:106px;border:1px solid var(--border);border-radius:11px;padding:9px 14px;background:#fff;
}
.lb-top{font-size:13px;font-weight:700}
.lb-odd{font-size:12.5px;font-weight:700;margin-top:3px}
.lb-odd.neg{color:var(--red)}
.lb-odd.pos{color:var(--green)}

/* ============ tabs ============ */
.tabs{
  display:flex;gap:2px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:4px 8px 0;box-shadow:var(--shadow);overflow-x:auto;
}
.tab{
  display:flex;align-items:center;gap:6px;padding:13px 9px 12px;font-size:12.2px;font-weight:500;
  color:#6b7a8d;border-bottom:2.5px solid transparent;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab .ic{width:15px;height:15px}
.tab.is-active{color:var(--green);font-weight:600;border-bottom-color:var(--green)}

/* ============ grid de contenido ============ */
.grid{display:grid;grid-template-columns:repeat(24,1fr);gap:14px;align-items:stretch}
.pane.hidden{display:none}

/* ---- pitcher probable ---- */
.pitchers{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;align-content:center}
.pitcher-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.headshot{display:grid;place-items:center;border-radius:50%;overflow:hidden;flex:none}
.pitcher-name{font-size:13.4px;font-weight:700;white-space:nowrap}
.pitcher-hand{font-size:11.5px;color:var(--muted);margin-top:2px}
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
.statline div{display:flex;flex-direction:column;gap:3px}
.statline b{font-size:14.5px;font-weight:700}
.statline span{font-size:10.5px;color:var(--muted);font-weight:500}
.mini-label{font-size:11px;color:var(--muted);text-align:center;margin:16px 0 8px}
.last5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.g{display:flex;flex-direction:column;align-items:center;gap:5px}
.res{
  width:100%;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--green-soft);color:var(--green);
}
.res.l{background:var(--red-soft);color:var(--red)}
.ip{font-size:10.5px;color:var(--muted)}
.ip.ip-l{color:var(--red)}

/* ---- bateadores ---- */
.hitters-col{display:flex;flex-direction:column}
.hitters{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1}
.hitters-team{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;margin-bottom:12px}
.hitters-team.bos{color:var(--red)}
.mini-logo{width:16px;height:16px;border-radius:50%;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center}
.mini-logo.nyy{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='20' fill='%23ffffff'/><text x='20' y='27' text-anchor='middle' font-family='Georgia,serif' font-size='20' font-weight='700' fill='%23132a54' letter-spacing='-3'>NY</text></svg>")}
.mini-logo.bos{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><circle cx='20' cy='20' r='20' fill='%23ffffff'/><g fill='%23bd3039'><g transform='translate(4,7) scale(0.56)'><path d='M12 3h13a1 1 0 0 1 1 1v39a1 1 0 0 1-1 1H10a9 9 0 0 1 0-18h2z'/></g><g transform='translate(15,7) scale(0.56)'><path d='M12 3h13a1 1 0 0 1 1 1v39a1 1 0 0 1-1 1H10a9 9 0 0 1 0-18h2z'/></g></g></svg>")}
.hitter{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-areas:'a b' 'p b';
  column-gap:9px;align-items:center;padding:9px 0;border-top:1px solid #f2f5f8}
.hitter .headshot{grid-area:a}
.hitter .hitter-body{grid-area:b}
.hitter .pos{grid-area:p}
.hitter:first-of-type{border-top:0}
.hitter-body{flex:1;min-width:0}
.hitter-name{font-size:11.8px;font-weight:600;margin-bottom:5px;line-height:1.25}
.hitter-stats{display:flex;gap:10px}
.hitter-stats div{display:flex;flex-direction:column;gap:1px}
.hitter-stats b{font-size:11.5px;font-weight:700}
.hitter-stats span{font-size:9.5px;color:var(--muted-2)}
.pos{font-size:9.5px;color:var(--muted-2);font-weight:600;text-align:center;padding-top:3px}

/* ---- bullpen ---- */
.vs-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:16px}
.vs-team{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700}
.vs-team.right{justify-content:flex-end}
.vs-mid{font-size:11px;font-weight:700;color:var(--muted);background:#f4f7fa;border-radius:7px;padding:3px 8px}
.cmp-rows{display:flex;flex-direction:column;gap:13px;flex:1;justify-content:center}
.cmp{display:grid;grid-template-columns:34px 1fr 46px 1fr 34px;align-items:center;gap:8px}
.cmp .v{font-size:12px;font-weight:700}
.cmp .v:first-child{text-align:left}
.cmp .v:last-child{text-align:right}
.cmp .k{font-size:10.5px;color:var(--muted);text-align:center;font-weight:600}
.bar-l,.bar-r{height:3px;border-radius:3px;background:#eef1f5;display:block;position:relative}
.bar-l i{position:absolute;right:0;top:0;height:100%;border-radius:3px;background:var(--green-2);display:block}
.bar-r i{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--red);display:block}

/* ---- donut modelo ---- */
.donut-wrap{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 0 10px;flex:1}
.side-pct{display:flex;flex-direction:column;align-items:center;gap:3px}
.side-pct b{font-size:19px;font-weight:800}
.side-pct span{font-size:11px;color:var(--muted)}
.side-pct.left b{color:var(--navy)}
.side-pct.right b{color:var(--red)}
.d-t1{font-size:9px;font-weight:600;fill:var(--muted)}
.d-t2{font-size:9px;font-weight:700;fill:var(--ink)}

/* ---- análisis de matchup ---- */
.insights{display:flex;flex-direction:column;gap:15px;flex:1;justify-content:center}
.insights li{display:flex;gap:10px;align-items:flex-start}
.ins-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.ins-ic.green{background:var(--green-soft);color:var(--green)}
.ins-ic.teal{background:#e8f6f4;color:#0f9b8e}
.ins-ic.blue{background:#eaf1fb;color:#2f6fd0}
.ins-t{font-size:11.9px;font-weight:600;line-height:1.35}
.ins-s{font-size:10.8px;color:var(--muted);margin-top:3px;line-height:1.4}

/* ---- clima ---- */
.weather{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center;padding-bottom:14px}
.w-main{display:flex;align-items:center;gap:8px;white-space:nowrap}
.w-sun{font-size:21px;line-height:1}
.w-temp{font-size:18px;font-weight:800;letter-spacing:-.4px}
.w-desc{font-size:11.5px;color:var(--muted);margin-top:2px}
.w-place{font-size:9.5px;color:var(--muted-2);margin-top:6px}
.w-side{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center;align-items:start}
.w-cell{display:flex;flex-direction:column;gap:2px;white-space:nowrap;border-left:1px solid #f2f5f8;padding-left:5px}
.w-cell:first-child{border-left:0;padding-left:0}
.w-k{font-size:9px;color:var(--muted-2);letter-spacing:.2px}
.w-v .wind{color:var(--green);width:15px;height:15px}
.w-n{font-size:10.5px;font-weight:700;white-space:nowrap}
.w-n.big{font-size:13px;font-weight:700}
.w-cell:last-child::before{content:'';display:block;height:15px}
.w-sub{font-size:9px;color:var(--muted-2)}
.w-banner{
  margin-top:auto;background:var(--green-soft);color:var(--green);border-radius:9px;
  padding:9px 0;text-align:center;font-size:11.5px;font-weight:600;
}

/* ---- factores clave ---- */
.factors{display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center}
.factor{display:grid;grid-template-columns:78px 15px 1fr 15px;align-items:center;gap:6px}
.f-k{font-size:9.6px;line-height:1.3;color:var(--ink-2);font-weight:500}
.f-bar{display:flex;gap:3px;height:4px;min-width:0}
.f-bar i{display:block;height:100%;border-radius:3px}
.f-bar i.g{background:var(--green-2)}
.f-bar i.r{background:var(--red)}

/* ---- alineaciones / lesiones ---- */
.lineups{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lineup li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f2f5f8;font-size:12.5px;font-weight:500}
.lineup li:first-child{border-top:0}
.lineup li span{width:20px;height:20px;border-radius:6px;background:#f4f7fa;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--muted)}
.lineup li em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--muted);font-weight:600}
.injuries li{padding:10px 0;border-top:1px solid #f2f5f8;font-size:12.5px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.injuries li:first-child{border-top:0}
.injuries em{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:600}
.injuries p{width:100%;font-size:10.8px;color:var(--muted)}
.tag{margin-left:auto;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px}
.tag.out{background:var(--red-soft);color:var(--red)}
.tag.day{background:#fff4e2;color:#c07b12}

/* ============ columna derecha ============ */
.rail-title{font-size:11px;font-weight:800;letter-spacing:.7px;color:var(--ink-2);margin-bottom:14px}
.conf{display:flex;gap:12px;align-items:center}
.conf-donut{position:relative;flex:none;width:112px;height:112px;display:grid;place-items:center}
.conf-c{position:absolute;text-align:center;display:flex;flex-direction:column;line-height:1.15}
.conf-c b{font-size:19px;font-weight:800}
.conf-c span{font-size:9.5px;color:var(--muted)}
.conf-c .hi{font-size:9.5px;color:var(--muted)}
.conf-list{flex:1;display:flex;flex-direction:column;gap:11px;min-width:0}
.conf-list li{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ck{display:flex;align-items:center;gap:7px;font-size:11.3px;color:var(--ink-2);min-width:0}
.ck .ic{width:14px;height:14px;color:var(--green)}
.conf-list b{font-size:11.3px;font-weight:700;color:var(--green)}
.model-note{margin-top:14px;padding-top:12px;border-top:1px solid #f2f5f8;font-size:10.3px;color:var(--muted-2);display:flex;align-items:center;gap:5px}

.upcoming{display:flex;flex-direction:column}
.upcoming li{display:flex;align-items:center;gap:7px;padding:11px 0;border-top:1px solid #f2f5f8;font-size:12px}
.upcoming li:first-child{border-top:0;padding-top:2px}
.upcoming b{font-weight:700}
.vs-sm{color:var(--muted-2);font-size:10.5px}
.when{margin-left:auto;text-align:right;font-size:10.5px;color:var(--muted);line-height:1.5}
.when i{display:block;font-style:normal;font-size:10px;color:var(--muted-2)}
.rail-link{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:600;color:#2f6fd0}
.rail-link:hover{text-decoration:underline}

.h2h li{display:grid;grid-template-columns:42px 34px 1fr 34px 16px;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #f2f5f8;font-size:11.5px}
.h2h li:first-child{border-top:0;padding-top:2px}
.h2h .d{color:var(--muted);font-size:10.5px}
.h2h .sc{text-align:center;font-weight:600;color:var(--ink-2)}
.h2h .rs{font-size:10.5px;font-weight:800;text-align:right}
.h2h .rs.w{color:var(--green)}
.h2h .rs.l{color:var(--red)}

.info li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:11.8px}
.info span{color:var(--muted)}
.info b{font-weight:600}

.foot{
  margin-top:16px;padding:14px 0 6px;text-align:center;color:var(--muted-2);font-size:11px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}

/* ============ modo oscuro ============ */
body.dark{
  --bg:#0e1520;--card:#151f2c;--border:#22303f;--ink:#eaf0f6;--ink-2:#c2ceda;
  --muted:#8494a5;--muted-2:#6d7d8f;--green-soft:#12352a;--red-soft:#3a1e21;
}
body.dark .sidebar{background:#151f2c}
body.dark .nav-item:hover,body.dark .btn-ghost:hover{background:#1b2938}
body.dark .pro-card,body.dark .btn-ghost,body.dark .theme-toggle,body.dark .league-select,
body.dark .line-box,body.dark .vs{background:#1a2635;color:var(--ink)}
body.dark .chip-league,body.dark .vs-mid,body.dark .lineup li span{background:#1a2635}
body.dark .brand-name{color:var(--ink)}
body.dark .hitter,body.dark .lineup li,body.dark .injuries li,body.dark .upcoming li,
body.dark .h2h li,body.dark .model-note{border-color:#22303f}
body.dark .bar-l,body.dark .bar-r{background:#22303f}
body.dark .side-pct.left b{color:#7fa8d8}
body.dark .d-t2{fill:#eaf0f6}
body.dark .donut circle[stroke='#12314f']{stroke:#2c5f96}
body.dark .donut circle[stroke='#eef1f5']{stroke:#22303f}
body.dark .w-banner,body.dark .res{filter:brightness(1.15)}

/* ============ responsive ============ */
@media (max-width:1380px){
  .layout{grid-template-columns:minmax(0,1fr) 300px}
  .grid .pane{grid-column:span 12 !important}
}
@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media (max-width:820px){
  .sidebar{display:none}
  .grid .pane{grid-column:span 24 !important}
  .matchup-top{grid-template-columns:1fr}
  .team,.team-left,.team-right{justify-content:center}
  .team-left .team-txt{text-align:center}
  .pitchers,.hitters,.lineups,.weather{grid-template-columns:1fr}
}

/* ==================================================================
   DATOS EN VIVO · MOTOR DE ANÁLISIS · VISTAS NUEVAS
   ================================================================== */

/* ---------- cabecera con título de vista ---------- */
.topbar{justify-content:flex-start}
.topbar-left{margin-right:auto}
.view-title{font-size:16px;font-weight:800;letter-spacing:-.3px}
.view-sub{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- consola del motor ---------- */
.engine{
  background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
  margin-bottom:12px;overflow:hidden;
}
.engine-head{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer}
.engine-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;position:relative}
.engine-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);opacity:.5;
  animation:pulso 1.4s ease-out infinite;
}
.engine.listo .engine-dot::after{animation:none;opacity:0}
.engine-title{font-size:12.5px;font-weight:700}
.engine-meta{font-size:11px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.engine-open{font-size:11px;color:#2f6fd0;font-weight:600}
.engine-bar{height:2px;background:#eef1f5}
.engine-bar i{display:block;height:100%;width:4%;background:linear-gradient(90deg,var(--green-2),#3fd39a);transition:width .4s ease}
.engine-steps{display:none;padding:6px 14px 12px;gap:2px;flex-direction:column}
.engine.abierto .engine-steps{display:flex}
.paso{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:11.5px;color:var(--ink-2)}
.paso-ic{width:13px;height:13px;border-radius:50%;border:2px solid #dfe5ec;flex:none}
.paso.corriendo .paso-ic{border-color:var(--green);border-top-color:transparent;animation:girar .7s linear infinite}
.paso.ok .paso-ic{border-color:var(--green);background:var(--green);
  box-shadow:inset 0 0 0 2px #fff}
.paso.error .paso-ic{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 2px #fff}
.paso-t{flex:1;min-width:0}
.paso-m{color:var(--muted-2);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes pulso{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.9);opacity:0}}

/* ---------- tira de partidos ---------- */
.ticker{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:thin;
}
.ticker.hidden{display:none}
.chip-game{
  display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);
  border-radius:11px;padding:8px 11px;white-space:nowrap;box-shadow:var(--shadow);flex:none;
  transition:border-color .15s, transform .15s;
}
.chip-game:hover{transform:translateY(-1px);border-color:#cfd9e4}
.chip-game.sel{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.cg-est{font-size:10px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:4px}
.chip-game.vivo .cg-est{color:var(--red)}
.cg-eq{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.cg-eq b{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.cg-at{font-size:10px;color:var(--muted-2)}
.pulso{width:6px;height:6px;border-radius:50%;background:var(--red);animation:latido 1.2s infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- imágenes reales ---------- */
.escudo{object-fit:contain;flex:none;vertical-align:middle}
.retrato{border-radius:50%;object-fit:cover;background:#eef2f7;flex:none}
.headshot{background:transparent}

/* ---------- estados de partido en la cabecera ---------- */
.chip-league.vivo{background:#fdecec;border-color:#f6d5d5;color:var(--red)}
.chip-league.final{background:#eef1f5;color:var(--muted)}
.vs.con-marcador{width:auto;min-width:56px;padding:0 10px;font-size:14px;font-variant-numeric:tabular-nums}
.line-hint{
  display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;
  background:#eef1f5;color:var(--muted);font-size:9px;cursor:help;margin-left:3px;
}
.card-foot{margin-top:10px;font-size:10px;color:var(--muted-2);text-align:center;line-height:1.45}
.vacio{font-size:11px;color:var(--muted-2);padding:8px 0;text-align:center}
.res.n{background:#eef1f5;color:var(--muted)}
.factor.sin-dato{opacity:.45}
.w-banner.neutro{background:#eef1f5;color:var(--muted)}
.w-banner.frio{background:#eaf1fb;color:#2f6fd0}

/* ---------- animaciones de datos ---------- */
.flash{animation:destello .7s ease}
@keyframes destello{0%{background:rgba(24,178,107,.18)}100%{background:transparent}}
.revelar{animation:entrar .45s cubic-bezier(.22,1,.36,1) both}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bar-l i,.bar-r i,.f-bar i,.gc-bar i,.t5-bar i{transition:width .9s cubic-bezier(.22,1,.36,1)}

body.analizando .grid .card,body.analizando .rail .card{position:relative;overflow:hidden}
body.analizando .grid .card::after,body.analizando .rail .card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(24,178,107,.09) 50%,transparent 70%);
  background-size:220% 100%;animation:barrido 1.5s linear infinite;
}
@keyframes barrido{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- vistas ---------- */
.view.hidden{display:none}
.seccion{font-size:13px;font-weight:700;margin:16px 0 10px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{padding:14px 16px}
.kpi-k{font-size:11px;color:var(--muted)}
.kpi-v{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi-v.pos{color:var(--green)}
.kpi-v.neg{color:var(--red)}

.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.game-card{
  text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px;
  transition:transform .15s, box-shadow .15s;
}
.game-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(19,40,63,.08)}
.game-card.vivo{border-color:#f3d7d9}
.gc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gc-status{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--muted)}
.game-card.vivo .gc-status{color:var(--red)}
.gc-venue{font-size:9.5px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.gc-teams{display:flex;flex-direction:column;gap:7px}
.gc-team{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.gc-rec{font-size:10px;color:var(--muted-2);font-weight:500}
.gc-score{margin-left:auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.gc-foot{display:flex;align-items:center;gap:8px;border-top:1px solid #f2f5f8;padding-top:9px}
.gc-model{font-size:10.5px;color:var(--muted)}
.gc-model b{color:var(--ink);font-weight:700}
.gc-bar{flex:1;height:3px;border-radius:3px;background:#eef1f5;overflow:hidden}
.gc-bar i{display:block;height:100%;background:var(--green-2)}

.filtros{flex-direction:row;align-items:center;gap:14px;padding:12px 16px;margin-bottom:14px}
.filtros label{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.filtros input[type=date]{
  font:inherit;font-size:12.5px;border:1px solid var(--border);border-radius:8px;padding:6px 9px;background:#fff;color:var(--ink);
}
.filtros-info{margin-left:auto;font-size:11.5px;color:var(--muted)}

.top5{display:flex;flex-direction:column}
.top5 li{display:grid;grid-template-columns:24px auto 1fr 110px 44px;align-items:center;gap:11px;
  padding:12px 0;border-top:1px solid #f2f5f8;cursor:pointer}
.top5 li:first-child{border-top:0}
.top5 li:hover{background:#fafcfe}
.t5-n{font-size:12px;font-weight:800;color:var(--muted-2);text-align:center}
.t5-t{font-size:13px;font-weight:700}
.t5-t span{font-weight:500;color:var(--muted)}
.t5-s{font-size:10.5px;color:var(--muted-2);margin-top:2px}
.t5-bar{height:5px;border-radius:4px;background:#eef1f5;overflow:hidden}
.t5-bar i{display:block;height:100%;background:var(--green-2)}
.t5-p{font-size:13px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

.standings{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.tabla{width:100%;border-collapse:collapse;font-size:11.5px}
.tabla th{text-align:right;font-size:9.5px;letter-spacing:.4px;color:var(--muted-2);font-weight:700;padding:0 0 8px}
.tabla th:first-child{text-align:left}
.tabla td{text-align:right;padding:7px 0;border-top:1px solid #f2f5f8;font-variant-numeric:tabular-nums}
.tabla td.eq{text-align:left;display:flex;align-items:center;gap:7px;font-weight:600}
.tabla td.pos{color:var(--green)}
.tabla td.neg{color:var(--red)}

.movs{display:flex;flex-direction:column}
.movs li{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid #f2f5f8;font-size:11.5px}
.movs li:first-child{border-top:0}
.mov-f{font-size:10px;color:var(--muted-2);width:46px;flex:none}
.mov-t{color:var(--ink-2);line-height:1.4}

.form-track{display:grid;grid-template-columns:1.4fr 1.1fr .7fr .6fr auto;gap:9px}
.form-track input{font:inherit;font-size:12px;border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:#fff;color:var(--ink)}
.form-track button{background:var(--green);color:#fff;border-radius:9px;padding:9px 18px;font-size:12.5px;font-weight:700}
.sel-res,#cfgIntervalo{font:inherit;font-size:11px;border:1px solid var(--border);border-radius:7px;padding:4px 6px;background:#fff;color:var(--ink)}
.del{color:var(--muted-2);font-size:12px;padding:2px 6px}
.del:hover{color:var(--red)}

.ajustes li{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid #f2f5f8}
.ajustes li:first-child{border-top:0}
.ajustes b{font-size:12.5px}
.ajustes p{font-size:10.8px;color:var(--muted);margin-top:3px}
.ajustes li>div{flex:1}
.switch{position:relative;width:40px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#dde3ea;border-radius:99px;transition:background .2s;cursor:pointer}
.switch span::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked+span{background:var(--green)}
.switch input:checked+span::after{transform:translateX(18px)}

.perfil-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.perfil-head h3{font-size:15px;font-weight:700}
.perfil-head p{font-size:11.5px;color:var(--muted);margin-top:3px}
.avatar.grande{width:52px;height:52px;border-radius:50%;background:#dbe6f2;display:block}

/* ---------- modo oscuro para lo nuevo ---------- */
body.dark .engine,body.dark .chip-game,body.dark .game-card,body.dark .kpi{background:var(--card)}
body.dark .engine-bar,body.dark .gc-bar,body.dark .t5-bar{background:#22303f}
body.dark .gc-foot,body.dark .tabla td,body.dark .movs li,body.dark .top5 li,body.dark .ajustes li{border-color:#22303f}
body.dark .filtros input[type=date],body.dark .form-track input,body.dark .form-track button,
body.dark .sel-res,body.dark #cfgIntervalo{background:#1a2635;color:var(--ink);border-color:#22303f}
body.dark .top5 li:hover{background:#1a2635}
body.dark .switch span{background:#2c3a4b}
body.dark .paso-ic{border-color:#2c3a4b}
body.dark .w-banner.neutro{background:#1a2635}

@media (max-width:900px){
  .form-track{grid-template-columns:1fr 1fr}
  .top5 li{grid-template-columns:20px auto 1fr 44px}
  .t5-bar{display:none}
}

/* ---------- ajustes finos sobre datos reales ---------- */
.chip-league{white-space:nowrap}
.game-time,.game-place{white-space:nowrap}
.h2h .vacio,.upcoming .vacio,.lineup .vacio,.injuries .vacio{grid-column:1/-1;width:100%;display:block}
.matchup-mid{min-width:132px}

/* ---------- la cabecera del partido se encoge antes de romperse ---------- */
@media (max-width:1340px){
  .team-name{font-size:22px}
  .team-logo img{width:58px;height:58px}
  .team{gap:12px}
  .matchup{padding:18px 18px 0}
  .line-box{min-width:96px;padding:8px 12px}
}
@media (max-width:1180px){
  .team-name{font-size:24px}
  .team-logo img{width:66px;height:66px}
}
/* las 8 pestañas deben entrar sin scroll también con la columna derecha visible */
.tabs{gap:1px}
.tab{padding:13px 6px 12px;gap:5px;font-size:12px}

/* ==================================================================
   ANÁLISIS DEL MODELO: RAZONES + MERCADOS
   ================================================================== */
.analisis{display:grid;grid-template-columns:300px minmax(0,1.2fr) minmax(0,.9fr);gap:26px;align-items:start}
.an-col{min-width:0}
.an-sub{
  font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-2);
  margin:18px 0 10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.an-sub:first-child{margin-top:0}
.an-sub span{font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted-2)}

.pick{
  border:1px solid #d7ede1;background:linear-gradient(180deg,#f2fbf6,#ffffff);
  border-radius:12px;padding:14px 16px;
}
.pick-tag{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--green);background:#ffffff;border:1px solid #cfe9dc;border-radius:6px;padding:3px 7px;
}
.pick-m{font-size:19px;font-weight:800;letter-spacing:-.4px;margin-top:9px}
.pick-p{font-size:14px;font-weight:700;color:var(--green);margin-top:3px}
.pick-p span{font-weight:600;color:var(--ink-2);font-size:12px}
.pick-n{font-size:10.8px;color:var(--muted);margin-top:6px;line-height:1.5}

.razones{display:flex;flex-direction:column;gap:12px}
.razones li{display:flex;gap:10px}
.rz-n{
  width:19px;height:19px;border-radius:6px;background:#eef1f5;color:var(--muted);
  display:grid;place-items:center;font-size:10px;font-weight:800;flex:none;margin-top:1px;
}
.rz-body{min-width:0}
.rz-t{font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rz-delta{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px}
.rz-delta.up{background:var(--green-soft);color:var(--green)}
.rz-delta.down{background:var(--red-soft);color:var(--red)}
.rz-s{font-size:11px;color:var(--muted);line-height:1.55;margin-top:3px}

.contexto{display:flex;flex-direction:column;gap:7px}
.contexto li{font-size:11px;color:var(--ink-2);line-height:1.5;padding-left:13px;position:relative}
.contexto li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--muted-2)}

.mercados{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px 24px;align-content:start}
.mk-grupo{break-inside:avoid}
.mk-tit{
  font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:6px;
}
.mk-fila{
  display:grid;grid-template-columns:minmax(0,1fr) 34px 42px 38px;align-items:center;gap:7px;
  padding:5px 0;font-size:11.2px;
}
.mk-fila.top{background:var(--green-soft);border-radius:7px;padding:5px 7px;margin:2px -7px}
.mk-et{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.mk-bar{height:3px;border-radius:3px;background:#eef1f5;overflow:hidden}
.mk-bar i{display:block;height:100%;background:var(--green-2);transition:width .9s cubic-bezier(.22,1,.36,1)}
.mk-p{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.mk-c{text-align:right;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}

body.dark .pick{background:linear-gradient(180deg,#153024,#151f2c);border-color:#1f4534}
body.dark .pick-tag{background:#0f2419;border-color:#1f4534}
body.dark .rz-n,body.dark .mk-bar{background:#22303f}
body.dark .mk-tit{border-color:#22303f}

@media (max-width:1240px){
  .analisis{grid-template-columns:minmax(0,1fr)}
}
.an-mercados{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.foot{margin-top:auto}
body.dark .an-mercados{border-color:#22303f}
@media (max-width:760px){ .mercados{grid-template-columns:1fr} }

/* la tarjeta de abridores necesita algo más de aire con nombres largos */
.pitcher-name{overflow:hidden;text-overflow:ellipsis}
.statline b{font-size:14px}
.pick-alt{font-size:10.5px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px dashed #d7e3dc}
.pick-alt b{color:var(--ink-2)}
body.dark .pick-alt{border-color:#24483a}

/* ---------------------------------------------------- Top 5 con análisis ---- */
.t5-lista{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.t5-card{padding:0;overflow:hidden}
.t5-head{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);
  background:#fbfcfe;
}
.t5-rank{
  width:24px;height:24px;border-radius:8px;background:var(--navy);color:#fff;flex:none;
  display:grid;place-items:center;font-size:12px;font-weight:800;
}
.t5-vs{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800}
.t5-at{font-size:11px;color:var(--muted-2);font-weight:500}
.t5-meta{font-size:11px;color:var(--muted);margin-left:6px}
.t5-conf{
  margin-left:auto;font-size:10.5px;font-weight:700;color:var(--green);
  background:var(--green-soft);border-radius:6px;padding:4px 9px;
}
.t5-cuerpo{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:20px;padding:16px}
.t5-cuerpo .an-sub{margin-top:0}
.t5-razones{display:flex;flex-direction:column;gap:8px}
.t5-razones li{font-size:11.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.t5-detalle{font-size:10.8px;color:var(--muted);line-height:1.55;margin-top:10px}
.t5-cta{
  width:100%;padding:11px 0;border-top:1px solid var(--border);font-size:12px;font-weight:700;
  color:var(--green);background:#fbfdfc;
}
.t5-cta:hover{background:var(--green-soft)}
body.dark .t5-head,body.dark .t5-cta{background:#1a2635}
@media (max-width:1100px){ .t5-cuerpo{grid-template-columns:1fr} }

/* ---------------------------------------- forma reciente, viaje y bullpen --- */
.card-hint{font-size:10px;font-weight:500;color:var(--muted-2);margin-left:8px}
.forma-reciente{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fr-col{min-width:0}
.fr-linea{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.fr-linea b{font-size:20px;font-weight:800;letter-spacing:-.4px}
.fr-linea span{font-size:11px;color:var(--muted)}
.fr-chips{display:flex;gap:4px;margin-bottom:13px}
.fr-chip{
  width:21px;height:21px;border-radius:6px;display:grid;place-items:center;
  font-size:10px;font-weight:800;cursor:help;
}
.fr-chip.w{background:var(--green-soft);color:var(--green)}
.fr-chip.l{background:var(--red-soft);color:var(--red)}
.fr-datos{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;text-align:center;margin-bottom:14px}
.fr-datos div{display:flex;flex-direction:column;gap:3px;min-width:0}
.fr-datos b{font-size:13px;font-weight:700;white-space:nowrap}
.fr-datos span{font-size:9px;color:var(--muted-2);line-height:1.2}
.fr-fatiga{display:grid;grid-template-columns:auto 1fr 34px;align-items:center;gap:9px;font-size:10.5px;color:var(--ink-2)}
.fr-barra{height:5px;border-radius:4px;background:#eef1f5;overflow:hidden}
.fr-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--green-2),#e0a63a,var(--red));transition:width .9s cubic-bezier(.22,1,.36,1)}
.fr-fatiga b{text-align:right;font-variant-numeric:tabular-nums}
.fr-nota{font-size:9.8px;color:var(--muted-2);margin-top:6px}

/* mercados con cuota real */
.mk-fila{grid-template-columns:minmax(0,1fr) 42px 44px 44px}
.mk-c.real{color:var(--ink);font-weight:700}
.mk-ev{text-align:right;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.mk-ev.pos{color:var(--green)}
.mk-ev.neg{color:var(--red)}
.mk-fila.cara{opacity:.42}
.mk-fila.cara .mk-c{text-decoration:line-through}
.pick-alt .alerta{color:var(--red)}

body.dark .fr-chip.w{background:#12352a}
body.dark .fr-chip.l{background:#3a1e21}
body.dark .fr-barra{background:#22303f}
@media (max-width:900px){ .forma-reciente{grid-template-columns:1fr} .fr-datos{grid-template-columns:repeat(3,1fr)} }
.t5-cuotas{font-size:9.5px;margin-top:7px;padding-top:6px;border-top:1px dashed #d7e3dc}
.t5-cuotas.ok{color:var(--green)}
.t5-cuotas.no{color:var(--muted-2)}