/* Capa V2 sobre los estilos de V1: tablas compactas y legibles, sin truncar números. */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.3; }
.tbl th, .tbl td { padding: 5px 7px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(128,128,128,.22); }
.tbl td:first-child { white-space: normal; min-width: 120px; }
.tbl th { font-weight: 600; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; opacity: .7; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td.k { font-weight: 600; }
.tbl tr.hoy td { background: rgba(24,178,107,.10); }
.tbl .team { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tbl .team img { width: 18px; height: 18px; }
.sub-h { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-left: 6px; }
.badge.hot { background: rgba(217,72,15,.14); color: #d9480f; }
.badge.cold { background: rgba(28,126,214,.14); color: #1c7ed6; }
.badge.mid { background: rgba(128,128,128,.14); }
.badge.warn { background: rgba(217,72,15,.14); color: #d9480f; }
.badge.ok { background: rgba(24,178,107,.14); color: #18b26b; }
.pos { color: #18b26b; } .neg { color: #d9480f; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.note { font-size: 11.5px; opacity: .7; margin-top: 8px; }
.kpi-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.kpi-row .kpi-mini { flex: 1 1 120px; padding: 8px 10px; border-radius: 10px; background: rgba(128,128,128,.08); }
.kpi-row .kpi-mini b { display: block; font-size: 18px; }
.kpi-row .kpi-mini span { font-size: 11px; opacity: .7; }

/* --- organización --- */
.starters { align-items: start; }
.starter-col .pitcher { margin-bottom: 8px; }
.pitchers, .starter-col .pitcher { align-items: flex-start; justify-content: flex-start; }
.relevistas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.mercados .mk-fila, .relevistas .mk-fila { display: grid; grid-template-columns: minmax(150px, 1.8fr) 48px 60px minmax(110px, 1fr); gap: 10px; align-items: center; }
.relevistas .mk-et { white-space: normal; overflow: visible; text-overflow: clip; }
.relevistas .mk-ev { white-space: nowrap; text-align: right; font-size: 11px; }
.relevistas .mk-grupo { min-width: 0; }
.badge.alt { background: rgba(128,128,128,.12); font-weight: 600; margin-left: 4px; }
.tbl tr.fuera td { opacity: .55; }
.tbl tr.fuera td:first-child { font-weight: 400; }
.fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
@media (max-width: 1100px) { .fam-grid { grid-template-columns: 1fr; } }
.fam-grid > div { min-width: 0; }
.tbl-wrap { max-width: 100%; }
.card .tbl td, .card .tbl th { font-variant-numeric: tabular-nums; }
.donut-wrap { margin-bottom: 6px; }
.hitters { align-items: flex-start; }

/* ==================================================================
   RESPONSIVE V2 · ningún dato sale de su contenedor; portátil, tablet y teléfono
   ================================================================== */
html, body { overflow-x: hidden; }
.app, .main, .center, .layout, .grid, .grid .pane, .card, .two-col > *, .starters > *, .fam-grid > *, .an-a, .an-b, .an-c { min-width: 0; }
.card { overflow: hidden; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl { min-width: 100%; }
.card-title .card-hint { display: inline-block; max-width: 100%; white-space: normal; }
.analisis { min-width: 0; }
.ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs { -webkit-overflow-scrolling: touch; }
.mercados, .relevistas { min-width: 0; }
.engine-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

/* Portátil pequeño y tablet: V1 fuerza span 12 desde 1380px; las tablas anchas van a 24 y los pares (probabilidad+spreads, bullpen, matchup) a 12 */
@media (max-width: 1380px) {
  .grid .pane { grid-column: span 24 !important; }
  .grid .pane[data-pane="resumen"]:nth-of-type(-n+2), .grid .pane[data-pane="bullpen"]:nth-of-type(-n+2) { grid-column: span 12 !important; }
  .grid .pane[data-pane="matchup"] { grid-column: span 12 !important; }
}
@media (max-width: 1180px) {
  .grid .pane[data-pane="bullpen"], .grid .pane[data-pane="matchup"] { grid-column: span 24 !important; }
}
@media (max-width: 1000px) {
  .grid .pane, .grid .pane[data-pane="resumen"]:nth-of-type(-n+2), .grid .pane[data-pane="bullpen"]:nth-of-type(-n+2), .grid .pane[data-pane="matchup"] { grid-column: span 24 !important; }
  .two-col, .starters, .fam-grid, .relevistas { grid-template-columns: 1fr; }
  .analisis { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tbl { font-size: 11.5px; }
  .tbl th, .tbl td { padding: 4px 6px; }
}

/* Teléfono */
@media (max-width: 820px) {
  .main { padding: 10px 10px 74px; }
  .topbar { flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
  .topbar .league-select, .topbar .icon-btn, .topbar .account { display: none; }
  .topbar .sport-switch { display: flex; }   /* el cambio NFL/NBA sí se necesita en el teléfono */
  .topbar .liga-sel:not(.hidden) { display: block; width: 100%; }
  .view-title { font-size: 18px; }
  .matchup { padding: 14px 12px 0; }
  .matchup-top { gap: 8px; }
  .team-name { font-size: 20px; }
  .team-logo img { width: 48px; height: 48px; }
  .line-boxes { flex-wrap: wrap; gap: 8px; }
  .line-box { min-width: 88px; flex: 1 1 88px; padding: 8px 8px; }
  .tab { padding: 10px 7px 9px; font-size: 11.5px; }
  .card { padding: 12px; }
  .card-title { font-size: 13px; margin-bottom: 10px; }
  .card-title .card-hint { display: block; margin-top: 2px; }
  .donut-wrap { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .side-pct { min-width: 90px; }
  .pitchers, .hitters, .lineups, .weather, .kpis, .games-grid { grid-template-columns: 1fr !important; }
  .statline { flex-wrap: wrap; }
  .tbl td:first-child { min-width: 96px; }
  .badge { white-space: normal; }
  .t5-head { flex-wrap: wrap; gap: 6px; }
  .t5-cuerpo { grid-template-columns: 1fr !important; }
  .form-track { grid-template-columns: 1fr !important; }
  .standings { grid-template-columns: 1fr; }
  .engine-meta { display: none; }
  .foot { font-size: 10px; padding-bottom: 8px; }
}

/* Navegación móvil (la barra lateral de V1 desaparece bajo 820px) */
.mobile-nav { display: none; }
@media (max-width: 820px) {
  .mobile-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--card, #fff); border-top: 1px solid var(--border, #e6ebf1); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; box-shadow: 0 -2px 8px rgba(19,40,63,.06); }
  .mobile-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: #6b7a8d; text-decoration: none; padding: 4px 6px; min-width: 56px; }
  .mobile-nav a .ic { width: 18px; height: 18px; }
  .mobile-nav a.is-active { color: var(--green, #18b26b); }
  body.dark .mobile-nav { background: #121b27; border-color: #22303f; }
}
@media (max-width: 480px) {
  .tbl { font-size: 11px; }
  .team-name { font-size: 18px; }
  .chip-game { font-size: 11px; }
  .pick-m { font-size: 18px; }
}

@media (max-width: 820px) {
  .mercados .mk-fila, .relevistas .mk-fila { grid-template-columns: minmax(0, 1fr) 40px 52px minmax(84px, auto); gap: 6px; font-size: 11.5px; }
  .relevistas .mk-ev { font-size: 10.5px; white-space: normal; }
  .relevistas .mk-c { font-size: 11px; }
}

.aviso-research { background: rgba(217,72,15,.08); border-color: rgba(217,72,15,.35); font-size: 12.5px; line-height: 1.45; }
body.dark .aviso-research { background: rgba(217,72,15,.14); }

.lista-dif { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); } .lista-dif li { margin: 3px 0; }

/* explicación en sencillo de la mejor jugada */
.analisis .an-s { grid-column: 1 / -1; background: var(--green-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 4px 0 6px; }
.an-s .sen-q { margin: 4px 0 8px; font-size: 15px; color: var(--ink); }
.an-s .sen-l { margin: 0 0 8px; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } .an-s .sen-l li { margin: 3px 0; }
.an-s .sen-n { margin: 0 0 6px; font-size: 13.5px; color: var(--ink); }
.an-s .sen-r { margin: 0; font-size: 13px; color: var(--ink-2); }

.line-play { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--txt-2, #5b6478); }
.line-play b { color: var(--txt, inherit); }

.sport-switch{display:flex;gap:4px;padding:4px;border-radius:12px}
.sport-btn{border:0;background:transparent;font-weight:700;padding:6px 14px;border-radius:9px;cursor:pointer;color:inherit;opacity:.6}
.sport-btn.is-active{background:#12314f;color:#fff;opacity:1}
body.dark .sport-btn.is-active{background:#18b26b;color:#0b1a2b}
.team-logo img,.t5-vs img,.cg-eq img,.gc-team img,.eq img{height:1.25em;width:auto;vertical-align:middle;margin-right:4px}
.team-logo img{height:64px}
.ladder{display:flex;flex-wrap:wrap;gap:6px}.ladder span{border:1px solid #dbe3ec;border-radius:8px;padding:2px 8px;font-size:.8rem}

.ladder{margin:4px 0 10px}.ladder span.ok{border-color:#18b26b;background:rgba(24,178,107,.08)}.mini-label{margin:10px 0 4px;font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}

.liga-sel{border:1px solid var(--line,#dfe5ee);background:var(--card,#fff);color:inherit;font-weight:600;padding:7px 10px;border-radius:10px;max-width:220px}
.liga-sel.hidden{display:none}
body.dark .liga-sel{background:#13233a;border-color:#24364f}
.liga-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:7px;background:#eef3f9;color:#12314f;margin-right:6px}
body.dark .liga-tag{background:#1b2d47;color:#cfe0f5}
.res-w{color:#18a058;font-weight:700}.res-d{color:#8a94a6;font-weight:700}.res-l{color:#c0392b;font-weight:700}
.donut-mid{font-size:11px;fill:#8a94a6}
.standings .tabla td:first-child{text-align:center;padding-right:8px;color:#8a94a6;font-weight:700}