/* stats.css — Centro de Estadísticas (rediseño premium, calca el mockup).
   Reusa los tokens --m-* de meteoro-ui.css. Convive con el sidebar (.has-sidebar). */
:root { --sc-bg:#070b12; }
* { box-sizing: border-box; }
body { background: var(--sc-bg); }
.sc { padding: 26px 30px 96px; color: var(--m-ink); max-width: 1500px; }
.sc h1 { margin: 0; font: 800 26px/1.1 "Inter", system-ui, sans-serif; letter-spacing: -.01em; }

/* Encabezado */
.sc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.sc-title { flex: 1; min-width: 0; }
.sc-upd { margin: 6px 0 0; font: 600 12px "Inter", system-ui, sans-serif; color: var(--m-mut); display: flex; align-items: center; gap: 7px; }
.sc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m-green); box-shadow: 0 0 8px var(--m-green); }
.sc-season { font: 700 12.5px "Inter", system-ui, sans-serif; color: var(--m-ink); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--m-line); background: var(--m-card); }
.sc-burger { display: none; }

/* Pestañas */
.sc-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--m-line); margin-bottom: 20px; overflow-x: auto; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 12px 16px 14px; border: 0; background: none; cursor: pointer; white-space: nowrap; position: relative;
  font: 700 13.5px "Inter", system-ui, sans-serif; color: var(--m-mut); }
.sc-tab img { width: 18px; height: 18px; object-fit: contain; }
.sc-tab:hover { color: var(--m-ink); }
.sc-tab.on { color: var(--m-ink); }
.sc-tab.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--m-green); }

/* Layout principal + rail */
.sc-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
.sc-loading { padding: 40px; text-align: center; color: var(--m-mut); font: 600 13px "Inter"; }
.sc-shimmer { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--m-line); border-top-color: var(--m-cyan); animation: scspin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes scspin { to { transform: rotate(360deg); } }

/* Tarjeta base */
.sc-card { background: var(--m-card); border: 1px solid var(--m-line); border-radius: 16px; padding: 18px; }
.sc-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.sc-card-h h3 { margin: 0; font: 800 11.5px "JetBrains Mono", monospace; letter-spacing: .1em; color: var(--m-ink); text-transform: uppercase; }
.sc-card-h .sc-sub { font: 600 10.5px "Inter", system-ui, sans-serif; color: var(--m-mut); text-transform: none; letter-spacing: 0; }
.sc-link { font: 700 11px "Inter", system-ui, sans-serif; color: var(--m-cyan); cursor: pointer; text-decoration: none; }

/* Cabecera de liga */
.sc-league { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sc-league img { width: 38px; height: 34px; object-fit: contain; }
.sc-league b { font: 800 19px "Inter", system-ui, sans-serif; }
.sc-league span { font: 600 12.5px "Inter", system-ui, sans-serif; color: var(--m-mut); }

/* KPIs */
.sc-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.sc-kpi { background: var(--m-card); border: 1px solid var(--m-line); border-radius: 14px; padding: 14px; }
.sc-kpi .k-l { font: 700 9px "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--m-mut); text-transform: uppercase; }
.sc-kpi .k-v { font: 800 26px "Inter", system-ui, sans-serif; margin-top: 10px; line-height: 1; }
.sc-kpi .k-s { font: 600 10.5px "Inter", system-ui, sans-serif; color: var(--m-mut); margin-top: 7px; }
.sc-kpi.acc .k-v { color: var(--m-cyan); }

/* Rejilla de paneles */
.sc-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-panels .span2 { grid-column: 1 / -1; }

/* Radar SVG */
.sc-radar { display: flex; flex-direction: column; align-items: center; }
.sc-radar svg { width: 100%; max-width: 300px; height: auto; }
.sc-radar .rd-team { font: 700 11px "Inter"; color: var(--m-cyan); margin-top: 4px; }

/* Listas (líderes / statcast / power) */
.sc-list { display: flex; flex-direction: column; gap: 2px; }
.sc-row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: 9px; }
.sc-row:hover { background: rgba(255,255,255,.025); }
.sc-rk { width: 18px; text-align: center; font: 800 12px "JetBrains Mono", monospace; color: var(--m-mut); flex: 0 0 auto; }
.sc-nm { flex: 1; min-width: 0; font: 600 13px "Inter", system-ui, sans-serif; color: var(--m-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-nm small { color: var(--m-mut); font-weight: 600; margin-left: 6px; }
.sc-val { font: 800 14px "JetBrains Mono", monospace; color: var(--m-ink); flex: 0 0 auto; }
.sc-bar { flex: 1.1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; min-width: 40px; }
.sc-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--m-green), #2bd48a); }

/* Forma reciente W/L */
.sc-form { display: flex; gap: 5px; flex-wrap: wrap; }
.sc-wl { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font: 800 11px "JetBrains Mono", monospace; }
.sc-wl.w { background: rgba(62,230,160,.16); color: var(--m-green); }
.sc-wl.l { background: rgba(255,93,93,.14); color: var(--m-red); }
.sc-record { font: 700 13px "Inter"; color: var(--m-mut); margin-top: 12px; }
.sc-record b { color: var(--m-ink); }

/* Rail derecho */
.sc-rail { display: flex; flex-direction: column; gap: 16px; }
.sc-pr-row { display: flex; align-items: center; gap: 9px; padding: 8px 4px; }
.sc-pr-row .sc-rk { color: var(--m-ink); }
.sc-pr-pts { font: 800 13px "JetBrains Mono", monospace; color: var(--m-ink); flex: 0 0 auto; }
.sc-pr-bar { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; min-width: 30px; }
.sc-pr-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--m-green), #2bd48a); }

/* Tabla divisional */
.sc-divsel { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-divbtn { font: 700 10px "JetBrains Mono", monospace; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--m-line); background: var(--m-card); color: var(--m-mut); cursor: pointer; }
.sc-divbtn.on { border-color: var(--m-cyan); color: var(--m-cyan); }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th { font: 700 9px "JetBrains Mono", monospace; color: var(--m-mut); text-transform: uppercase; text-align: right; padding: 6px 4px; letter-spacing: .06em; }
.sc-table th:first-child { text-align: left; }
.sc-table td { font: 600 12.5px "Inter", system-ui, sans-serif; color: var(--m-ink); text-align: right; padding: 8px 4px; border-top: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
.sc-table td:first-child { text-align: left; display: flex; align-items: center; gap: 8px; }
.sc-table td .sc-rk { width: 14px; }

/* Vacío / sin datos */
.sc-empty { padding: 50px 20px; text-align: center; color: var(--m-mut); }
.sc-empty b { display: block; color: var(--m-ink); font: 700 15px "Inter"; margin-bottom: 6px; }

/* ── Responsive ── */
@media (max-width: 1180px) { .sc-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1023px) {
  .sc { padding: 16px 14px 96px; }
  .sc-burger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    background: var(--m-card); border: 1px solid var(--m-line); color: var(--m-ink); }
  .sc-top { gap: 12px; }
  .sc h1 { font-size: 21px; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-season { display: none; }
}
@media (max-width: 720px) {
  .sc-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sc-kpi .k-v { font-size: 22px; }
  .sc-panels { grid-template-columns: 1fr; }
}

/* Selector de equipo (en la cabecera del panel de atributos) */
.sc-tsel { background: #0b1322; border: 1px solid var(--m-line); color: var(--m-cyan);
  border-radius: 9px; padding: 6px 10px; font: 700 12px "Inter", system-ui, sans-serif;
  cursor: pointer; max-width: 170px; }
.sc-tsel:focus { outline: none; border-color: var(--m-cyan); }

/* Matchup de abridores (rail) */
.sc-mu { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.sc-mu-side { text-align: center; min-width: 0; }
.sc-mu-nm { font: 800 14px "Inter", system-ui, sans-serif; color: var(--m-ink); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-mu-st { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font: 600 11px "Inter", system-ui, sans-serif; color: var(--m-mut); }
.sc-mu-st b { color: var(--m-ink); font: 800 12px "JetBrains Mono", monospace; }
.sc-mu-vs { font: 800 11px "JetBrains Mono", monospace; color: var(--m-cyan); }
.sc-splits th, .sc-splits td { text-align: right; }
.sc-splits th:first-child, .sc-splits td:first-child { text-align: left; display: table-cell; }

/* Notas bajo gráficas */
.sc-note { font: 600 11px "Inter", system-ui, sans-serif; color: var(--m-mut); text-align: center; margin-top: 8px; }
.sc-note b { color: var(--m-cyan); }

/* Clima & impacto */
.sc-wx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sc-wx-c { text-align: center; background: rgba(255,255,255,.02); border: 1px solid var(--m-line); border-radius: 11px; padding: 12px 6px; }
.sc-wx-c b { display: block; font: 800 22px "Inter", system-ui, sans-serif; color: var(--m-ink); }
.sc-wx-c span { font: 600 10px "Inter", system-ui, sans-serif; color: var(--m-mut); }
.sc-wx-im { margin-top: 12px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--m-line); }
.sc-wx-im b { display: block; font: 800 13px "Inter", system-ui, sans-serif; margin-bottom: 3px; }
.sc-wx-im span { font: 600 11.5px "Inter", system-ui, sans-serif; color: var(--m-mut); }
.sc-wx-over { border-color: rgba(62,230,160,.4); } .sc-wx-over b { color: var(--m-green); }
.sc-wx-under { border-color: rgba(56,214,255,.4); } .sc-wx-under b { color: var(--m-cyan); }
.sc-wx-neutral b { color: var(--m-ink); }
@media (max-width: 720px) { .sc-wx-grid { grid-template-columns: repeat(2, 1fr); } }

/* Logos de equipo + headshots de jugador (acercan al mockup) */
.sc-tlogo { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.sc-hs { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 18%;
  background: #0b1322; border: 1px solid var(--m-line); flex: 0 0 auto; }
.sc-table td .sc-tlogo { width: 18px; height: 18px; }
.sc-mu-side .sc-hs { width: 44px; height: 44px; margin: 0 auto 8px; display: block; }

/* Power ranking: filas clickeables + equipo seleccionado resaltado */
.sc-pr-row { cursor: pointer; border-radius: 9px; transition: background .12s; }
.sc-pr-row:hover { background: rgba(255,255,255,.04); }
.sc-pr-row.on { background: rgba(56,214,255,.10); box-shadow: inset 2px 0 0 var(--m-cyan); }
.sc-table tr[data-team] { cursor: pointer; }
.sc-table tr[data-team]:hover td { background: rgba(255,255,255,.03); }

/* Splits con pestañas (como el mockup) */
.sc-sp-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.sc-sp-tab { font: 700 10.5px "Inter", system-ui, sans-serif; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--m-line); background: #0b1322; color: var(--m-mut); cursor: pointer; }
.sc-sp-tab.on { border-color: var(--m-green); color: var(--m-green); background: rgba(62,230,160,.08); }
.sc-sp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sc-sp-c { text-align: center; background: rgba(255,255,255,.02); border: 1px solid var(--m-line); border-radius: 11px; padding: 14px 6px; }
.sc-sp-c b { display: block; font: 800 21px "Inter", system-ui, sans-serif; color: var(--m-ink); }
.sc-sp-c span { font: 700 9px "JetBrains Mono", monospace; color: var(--m-mut); letter-spacing: .06em; }

/* Clima: iconos */
.sc-wx-ic { display: block; width: 22px; height: 22px; margin: 0 auto 6px; color: var(--m-cyan); }
.sc-wx-ic svg { width: 22px; height: 22px; }
.sc-wx-c small { font-size: 11px; color: var(--m-mut); font-weight: 600; }
.sc-wx-im-h { display: flex; align-items: center; gap: 7px; font: 800 9px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--m-mut); margin-bottom: 7px; }
.sc-wx-im-h svg { width: 15px; height: 15px; }
.sc-wx-im-t { display: block; margin-top: 4px; }
.sc-wx-over .sc-wx-im-h { color: var(--m-green); } .sc-wx-under .sc-wx-im-h { color: var(--m-cyan); }

/* Matchup: mano + placeholder de foto */
.sc-mu-hand { font: 700 9px "JetBrains Mono", monospace; color: var(--m-mut); letter-spacing: .08em; margin: -4px 0 8px; }
.sc-hs-ph { display: inline-block; background: #0b1322; }

/* Elementos clickeables (pitchers) */
.sc-clk { cursor: pointer; border-radius: 9px; }
.sc-mu-side.sc-clk:hover { background: rgba(56,214,255,.07); }
.sc-row.sc-clk:hover { background: rgba(56,214,255,.06); }

/* Modal de perfil del pitcher */
.scm-back { position: fixed; inset: 0; z-index: 130; background: rgba(5,9,17,.74); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.scm-back[hidden] { display: none; }
.scm-card { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--m-card); border: 1px solid var(--m-line); border-radius: 18px; box-shadow: 0 26px 64px rgba(0,0,0,.6); }
.scm-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(10,15,26,.72); border: 1px solid var(--m-line); color: var(--m-ink); font-size: 24px; cursor: pointer; line-height: 1; }
.scm-x:hover { border-color: var(--m-cyan); }
.scm-head { display: flex; align-items: center; gap: 14px; padding: 22px 22px 16px; border-bottom: 1px solid var(--m-line); }
.scm-av { width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center 16%; background-repeat: no-repeat; border: 1px solid var(--m-line); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background-color: #0b1322; }
.scm-av.scm-ini { font-size: 26px; }
.scm-name { font: 800 20px "Inter", system-ui, sans-serif; color: var(--m-ink); }
.scm-meta { font: 600 12.5px "Inter", system-ui, sans-serif; color: var(--m-mut); margin-top: 4px; }
.scm-meta { color: var(--m-cyan); }
.scm-body { padding: 18px 22px 22px; }
.scm-stats { margin-bottom: 8px; }
.scm-sech { font: 800 9.5px "JetBrains Mono", monospace; letter-spacing: .12em; color: var(--m-cyan); text-transform: uppercase; margin: 18px 0 10px; }
.scm-games { display: flex; flex-direction: column; }
.scm-g { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.scm-g:last-child { border-bottom: 0; }
.scm-g b { font: 700 13px "Inter", system-ui, sans-serif; color: var(--m-ink); flex: 0 0 auto; }
.scm-g span { font: 500 11px "Inter", system-ui, sans-serif; color: var(--m-mut); text-align: right; }
@media (max-width: 720px) { .scm-back { padding: 0; align-items: stretch; } .scm-card { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; } }

/* Botón llave del Mundial */
.sc-bracket { margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 11px; text-decoration: none; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--m-cyan), #21b6e0); color: #06101c;
  font: 800 12.5px "Inter", system-ui, sans-serif; }
.sc-bracket:hover { filter: brightness(1.06); }
.sc-tlogo-sm { width: 16px; height: 16px; flex: 0 0 auto; }

/* Partido destacado del Mundial */
.sc-fm-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 16px; }
.sc-fm-head > b { font: 800 15px "Inter", system-ui, sans-serif; color: var(--m-ink); }
.sc-fm-head > b:last-child { text-align: right; }
.sc-fm-score { font: 800 22px "JetBrains Mono", monospace; color: var(--m-ink); white-space: nowrap; }
.sc-fm-score small { color: var(--m-mut); }
.sc-fm-row { margin-bottom: 12px; }
.sc-fm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.sc-fm-top b { font: 800 13px "JetBrains Mono", monospace; color: var(--m-ink); }
.sc-fm-top span { font: 700 10px "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--m-mut); text-transform: uppercase; }
.sc-fm-bar { height: 7px; border-radius: 5px; background: rgba(56,214,255,.18); overflow: hidden; }
.sc-fm-bar > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--m-green), #2bd48a); }

/* Selector de liga (fútbol) */
.sc-lgtabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-lgtab { font: 700 12px "Inter", system-ui, sans-serif; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--m-line); background: var(--m-card); color: var(--m-mut); cursor: pointer; }
.sc-lgtab.on { border-color: var(--m-green); color: var(--m-green); background: rgba(62,230,160,.08); }
.sc-lgtab:hover { color: var(--m-ink); }
/* Resultados del Mundial */
.sc-res { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 8px; }
.sc-res:hover { background: rgba(255,255,255,.025); }
.sc-res-t { display: flex; align-items: center; gap: 8px; font: 600 13px "Inter", system-ui, sans-serif; color: var(--m-ink); min-width: 0; }
.sc-res-t.r { justify-content: flex-end; }
.sc-res-s { font: 800 15px "JetBrains Mono", monospace; color: var(--m-ink); white-space: nowrap; }
.sc-res-s small { color: var(--m-mut); }
.sc-flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; flex: 0 0 auto; }

/* KPI con icono (como el mockup) */
.sc-kpi { position: relative; }
.sc-kpi-ic { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--m-cyan);
  background: rgba(56,214,255,.1); }
.sc-kpi-ic svg { width: 17px; height: 17px; }
.sc-kpi.acc .sc-kpi-ic { color: var(--m-green); background: rgba(62,230,160,.1); }
.sc-kpi .k-l { padding-right: 34px; }

/* Líderes como tarjeta destacada */
.sc-lr-top { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 10px; }
.sc-lr-hs { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: center 18%;
  background: #0b1322; border: 1px solid var(--m-line); flex: 0 0 auto; }
.sc-lr-info { min-width: 0; }
.sc-lr-nm { display: flex; align-items: center; gap: 7px; font: 700 14px "Inter", system-ui, sans-serif; color: var(--m-ink); }
.sc-lr-v { font: 800 30px "Inter", system-ui, sans-serif; color: var(--m-green); line-height: 1.05; margin-top: 2px; }
.sc-lr-rest { display: flex; flex-direction: column; gap: 1px; }
.sc-lr-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 7px; }
.sc-lr-row:hover { background: rgba(255,255,255,.025); }
.sc-lr-row .sc-nm { flex: 1; }

/* Goleadores (foto Wikipedia + escudo del club) */
.sc-lr-v small { font: 600 13px "Inter", system-ui, sans-serif; color: var(--m-mut); margin-left: 2px; }
.sc-sco-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 7px; }
.sc-sco-row:hover { background: rgba(255,255,255,.025); }
.sc-sco-row .sc-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-sco-ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 15%;
  background: #0b1322; border: 1px solid var(--m-line); flex: 0 0 auto; }
.sc-lr-hs.sc-lr-ph, .sc-sco-ph.sc-lr-ph { background: #0b1322; }