/* Reset mínimo */
*{box-sizing:border-box}body{margin:0;background:#f8fafc;color:#111827;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
img{display:inline-block}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header{background:#ffffff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.site-header nav a{margin-left:12px;padding:6px 10px;border-radius:8px;border:1px solid #e5e7eb;background:#fff}

/* Components */
.mlb-h2{font-size:1.25rem;margin:.5rem 0 1rem;font-weight:700}
.mlb-filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.mlb-filters input,.mlb-filters select,.mlb-filters button{padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.mlb-status{color:#6b7280}

/* Sticky */
.mlb-sticky{position:sticky;top:60px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px;display:flex;gap:8px;overflow:auto}
.mlb-sticky .game{display:flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;background:#eef6ff;white-space:nowrap}
.mlb-sticky img{width:18px;height:18px;border-radius:50%;background:#fff}

/* Cards */
.mlb-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.mlb-game-card{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .05s,box-shadow .2s}
.mlb-game-card:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.mlb-game-card .team{display:flex;align-items:center;gap:10px}
.mlb-game-card img{width:30px;height:30px;border-radius:50%;background:#fff}
.mlb-game-card .score{text-align:center;min-width:88px}
.mlb-game-card .score strong{font-variant-numeric:tabular-nums;font-size:1.1rem}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;background:#fff;border-radius:10px;overflow:hidden}
.table th{background:#f9fafb;font-weight:600;padding:10px;text-align:center}
.table td{border-top:1px solid #e5e7eb;padding:10px;text-align:center}
.team-cell{display:flex;align-items:center;gap:10px}
.team-cell img{width:22px;height:22px;border-radius:50%}

/* Alerts */
.alert{background:#fee2e2;border:1px solid #fecaca;padding:10px;border-radius:8px}


/* --- Mejora visual adicional --- */
:root{
  --card-bg:#fff;
  --bd:#e5e7eb;
  --text:#0f172a;
  --muted:#64748b;
  --chip:#eef6ff;
  --accent:#0ea5e9;
}
h1{font-size:1.6rem;margin:0.5rem 0}
h3{margin:14px 0 8px}

.pager button{background:#fff;border:1px solid var(--bd);cursor:pointer}
.pager button:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* Skeleton */
.skeleton{position:relative;overflow:hidden;background:#f1f5f9;border-radius:12px}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}


/* === SoyLarense branding === */
:root {
  --brand-red: #E11D23;
  --brand-orange: #F46A06;
  --accent: var(--brand-red);
}
.header--brand .brand__name { color: var(--brand-red); }
.main-nav a.active, .main-nav a:hover { border-color: var(--brand-red); box-shadow: 0 2px 0 var(--brand-orange) inset; }
.btn.btn--ghost { border-color: var(--brand-red); }
.mode-toggle { border-color: var(--brand-red); }
.mlb-game-card:hover { box-shadow: 0 10px 24px rgba(225,29,35,.16); }
.table th { background: linear-gradient(0deg, rgba(244,106,6,.05), rgba(244,106,6,.05)); }
.mlb-sticky .game { background: rgba(225,29,35,.06); }
.page-title { border-left: 6px solid var(--brand-orange); padding-left: 10px; }


/* === Ajuste de logos (responsive) === */
.brand__logo { 
  height: clamp(20px, 3.5vw, 34px) !important; 
  width: auto; 
  object-fit: contain; 
  image-rendering: auto;
}
.footer__logo { 
  height: clamp(22px, 3.2vw, 30px) !important; 
  width: auto; 
  object-fit: contain;
}
@media (max-width: 640px){
  .header__wrap { gap: 8px; }
  .brand__name { display: none; } /* dejamos solo el símbolo para compactar en móviles */
  .main-nav { flex-wrap: wrap; gap: 6px; }
  .main-nav a { padding: 6px 8px; }
}


/* Compact header when solo logo */
.header__wrap .brand { gap: 6px; }
.header__wrap .main-nav { margin-left: auto; }


/* === Diseño pulido: tarjetas, menú naranja, dark-mode mejorado === */

/* Transiciones suaves */
* { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }

/* Paleta y variables (ajuste) */
:root {
  --brand-orange: #F46A06;
  --brand-orange-600: #dc5f05;
  --brand-orange-700: #c25605;
  --brand-red: #E11D23;
  --bg: #f6f7fb;
  --card: #ffffff;
  --bd: #e5e7eb;
  --text: #0f172a;
  --muted: #64748b;
  --chip: #fff4ec;
  --header-bg: #ffffff;
  --footer-bg: #0f172a;
  --footer-text: #e2e8f0;
}
[data-theme="dark"] {
  --bg: #0b1220;
  --card: #0f172a;
  --bd: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --chip: #1b2437;
  --header-bg: #0f172a;
  --footer-bg: #020617;
  --footer-text: #94a3b8;
}

/* Fondo general */
body { background: var(--bg); color: var(--text); }

/* Menú botones naranja */
.main-nav a {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: var(--card);
}
.main-nav a.active,
.main-nav a:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
  box-shadow: 0 6px 16px rgba(244,106,6,.25);
}
.btn.btn--ghost {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}
.btn.btn--ghost:hover {
  background: var(--brand-orange-600);
  border-color: var(--brand-orange-600);
}
.mode-toggle {
  border: 1px solid var(--bd);
  background: var(--card);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.mode-toggle:hover {
  border-color: var(--brand-orange);
}

/* Tarjetas “bonitas” */
.card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.12); transform: translateY(-1px); }

/* Juegos en Resultados */
.mlb-games { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 16px; }
.mlb-game-card { composes: card; }
.mlb-game-card { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:16px; }

/* Sticky chips */
.mlb-sticky .game {
  background: var(--chip);
  border: 1px solid var(--bd);
}

/* Tabla */
.table { background: var(--card); border: 1px solid var(--bd); }
.table th { background: linear-gradient(0deg, rgba(244,106,6,.07), rgba(244,106,6,.07)); }

/* Equipos grid */
.teams-grid .team-card { background: var(--card); border:1px solid var(--bd); border-radius:14px; padding:16px; text-align:center; }
.teams-grid .team-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.12); transform: translateY(-1px); }
.team-card img { width:56px; height:56px; border-radius:50%; background:#fff; }
.team-card__name { font-weight: 800; margin-top: 6px; }
.team-card__abbr { color: var(--muted); }

/* Calendario filas */
.cal-row { composes: card; }
.cal-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; }
.cal-row__teams { display:flex; align-items:center; gap:10px; }
.cal-row__teams img { width:26px; height:26px; border-radius:50%; background:#fff; }
.cal-date { color: var(--muted); margin: 16px 0 8px; font-weight: 700; }

/* Hero equipo */
.team-hero__box { composes: card; }
.team-hero__box { display:flex; align-items:center; gap:16px; padding:16px; }
.team-hero__logo { width:70px; height:70px; border-radius:50%; background:#fff; }
.team-hero__meta { color: var(--muted); }

/* Roster cards */
.roster-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.roster-card { composes: card; padding:14px; }
.roster-card__name { font-weight:800; }
.roster-card__meta { color: var(--muted); }

/* Encabezados de sección */
.page-title { display:flex; align-items:center; gap:10px; }
.page-title::before {
  content:''; display:inline-block; width:8px; height:20px; border-radius:6px;
  background: var(--brand-orange);
}

/* Ajustes header/footer logos (ya compactos) */
.brand__logo { height: clamp(20px, 3.2vw, 30px) !important; }
.footer__logo { height: clamp(22px, 3vw, 28px) !important; }

@media (max-width: 640px){
  .main-nav { flex-wrap: wrap; gap: 8px; }
  .mlb-games { grid-template-columns: 1fr; }
}

/* Sticky bar cards */
.mlb-sticky{position:sticky;top:60px;background:transparent;border:0;padding:0;display:flex;gap:10px;overflow:auto}
.sticky-card{min-width:220px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;white-space:nowrap}
.sc-logos{display:flex;align-items:center;gap:8px}
.sc-logos img{width:20px;height:20px;border-radius:50%;background:#fff}
.sc-line{font-weight:700}
.sc-score{font-variant-numeric:tabular-nums;font-weight:800}
.sc-meta{color:var(--muted);font-size:.9rem}
.sc-state{color:var(--brand-orange);font-weight:800}
.mlb-sticky .vs{color:var(--muted)}

/* Calendar presets */
.mlb-filters .presets{display:flex;gap:6px}
.mlb-filters .presets button{padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--card);cursor:pointer}
.mlb-filters .presets button:hover{border-color:var(--brand-orange);}


/* Teams card redesign */
.teams-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.team-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; border:1px solid var(--bd); border-radius:14px; background:var(--card); text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.team-card img { width:60px; height:60px; border-radius:50%; background:#fff; object-fit:contain; }
.team-card__name { font-weight:800; line-height:1.2; }
.team-card__abbr { color:var(--muted); font-size:.9rem; }
.team-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.12); transform: translateY(-1px); }

/* Sticky centered & scroll-snap */
.mlb-sticky { padding: 8px 0; gap:10px; overflow:auto; scroll-snap-type: x mandatory; }
.sticky-card { align-items:center; text-align:center; scroll-snap-align: start; }
.sc-logos { justify-content:center; }
.sc-line, .sc-score, .sc-meta { text-align:center; width:100%; }
.sc-state.live { color:#ef4444; } /* red */
.sc-state.final { color:#64748b; } /* gray */

/* Skeletons */
.skeleton { position:relative; overflow:hidden; background: #e9eef6; }
[data-theme="dark"] .skeleton { background:#162133; }
.skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }


/* Footer single row, logo center */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 40px; }
.footer__grid { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 10px; padding: 16px 0; }
.footer__cell { display:flex; align-items:center; justify-content:center; }
.footer__left { justify-content:flex-start; }
.footer__right { justify-content:flex-end; }
.footer__logo { height: 28px; width:auto; display:block; margin: 0 auto 6px; }
.footer__social { display:flex; gap:10px; justify-content:center; }
.social { width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.15); background:transparent; }
.social:hover { background: rgba(255,255,255,.08); }
.social.ig::before { content: "📸"; }
.social.fb::before { content: "📘"; }
.social.tg::before { content: "✈️"; }
.social.wa::before { content: "💬"; }
.social.yt::before { content: "▶️"; }
@media (max-width: 720px){
  .footer__grid { grid-template-columns: 1fr; text-align:center; }
  .footer__left,.footer__right { justify-content:center; }
}


/* Responsive nav */
.nav-toggle { display:none; border:1px solid var(--bd); background: var(--card); border-radius:8px; padding:6px 10px; cursor:pointer; }
@media (max-width: 860px){
  .nav-toggle { display:block; }
  .main-nav { position:absolute; right:16px; top:54px; display:none; flex-direction:column; background: var(--card); border:1px solid var(--bd); border-radius:12px; padding:10px; box-shadow:0 14px 28px rgba(0,0,0,.15); }
  body.nav-open .main-nav { display:flex; }
}

/* Back to top button */
.back-top { position:fixed; right:16px; bottom:20px; width:40px; height:40px; border-radius:999px; border:1px solid var(--bd); background: var(--card); box-shadow:0 6px 18px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50; }
.back-top.show { opacity:1; pointer-events:auto; }


/* Status pills */
.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.3px}
.pill.live{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.pill.final{background:#e2e8f0;color:#334155;border:1px solid #cbd5e1}
.pill.schd{background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0}
[data-theme="dark"] .pill.schd{background:#0b1322;color:#e2e8f0;border-color:#1e293b}


/* Sticky centered & bases */
.sticky-card{ align-items:center; text-align:center; }
.sc-state-row{ margin-top:2px; }
.sc-state{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; font-weight:800; background:#f1f5f9; border:1px solid #e2e8f0; }
.sc-state.live{ background:#fee2e2; border-color:#fecaca; color:#b91c1c; }
.sc-state.final{ background:#e2e8f0; border-color:#cbd5e1; color:#334155; }
.bases{ display:flex; gap:6px; justify-content:center; margin-top:6px; }
.b{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; border:1px solid var(--bd); font-size:.75rem; color:var(--muted); background:var(--card); }
.b.on{ background:#fef3c7; border-color:#fcd34d; color:#92400e; font-weight:800; }


/* Estado: pill reutilizable en resultados y game */
.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.3px}
.pill.live{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.pill.final{background:#e2e8f0;color:#334155;border:1px solid #cbd5e1}
.pill.schd{background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0}
[data-theme="dark"] .pill.schd{background:#0b1322;color:#e2e8f0;border-color:#1e293b}

/* Resultados meta row */
.mlb-game-card.card .grow.meta { display:flex; align-items:center; justify-content:center; gap:10px; grid-column:1/-1; margin-top:8px; }

/* Sticky compact */
.mlb-sticky.compact .sticky-card{ min-width:190px; padding:8px 10px; }
.mlb-sticky.compact .sc-score{ font-size:1rem; }
.mlb-sticky.compact .sc-line{ font-size:.95rem; }
.mlb-sticky.compact .bases .b{ width:24px; height:24px; font-size:.7rem; }

/* Diamond bases (lozenges) */
.bases{ position:relative; width:80px; height:60px; margin:6px auto 0; }
.b{ position:absolute; width:16px; height:16px; transform: rotate(45deg); background: var(--card); border:1px solid var(--bd); }
.b1{ left:8px; top:22px; }
.b2{ left:32px; top:4px; }
.b3{ left:56px; top:22px; }
.bh{ left:32px; top:40px; }
.b.on{ background:#fef3c7; border-color:#facc15; }
.bh{ background:#e2e8f0; border-color:#cbd5e1; } /* home (decorativa) */

/* Footer recolor (brand orange) and center on mobile */
:root{ --brand-orange: #F46A06; }
.site-footer{ background: var(--brand-orange); color:#fff; }
.footer__grid{ padding:18px 0; }
.footer__left, .footer__right{ font-weight:600; }
.footer__logo{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
@media (max-width: 720px){
  .footer__grid{ grid-template-columns:1fr; gap:8px; }
  .footer__left, .footer__right{ justify-content:center; }
}

.ad-banner{ background:var(--card); border:1px solid var(--bd); border-radius:12px; }

/* Footer dark gray override */
.site-footer{ background:#121826 !important; color:#e5e7eb !important; }
.site-footer a{ color:#e5e7eb; }
.footer__logo{ filter:none; }


.only-logos img{ width:26px; height:26px; }
.sc-logos.only-logos .vs{ margin:0 6px; }
.b{ width:14px; height:14px; }
.b1{ left:8px; top:22px; } .b2{ left:32px; top:4px; } .b3{ left:56px; top:22px; } .bh{ left:32px; top:40px; }
.bh{ background:#9ca3af; border-color:#9ca3af; } /* home plate */


/* MLB-style diamond */
.bases{ width:84px; height:64px; background: linear-gradient(180deg,#0b6623,#07501b); border-radius:10px; position:relative; padding:6px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.b{ background:#fff; border-color:#94a3b8; }
.b.on{ background:#ffd700; border-color:#f59e0b; }
/* compact-x sticky */
.mlb-sticky.compact-x .sticky-card{ min-width:150px; padding:6px 8px; gap:4px; }
.mlb-sticky.compact-x .sc-meta{ display:none; }
.mlb-sticky.compact-x .sc-state-row{ margin-top:0; }
.mlb-sticky.compact-x .bases{ transform: scale(.9); }

/* Center team vs logos in cards */
.mlb-game-card .gcol.team { display:flex; align-items:center; justify-content:center; }
.mlb-game-card .gcol.team img { width:36px; height:36px; object-fit:contain; display:block; }
.mlb-game-card .gcol.score { display:flex; align-items:center; justify-content:center; font-weight:700; }
.sticky-card .sc-logos { display:flex; align-items:center; justify-content:center; gap:6px; }
.sticky-card .sc-logos img { width:26px; height:26px; object-fit:contain; }

/* === Refresco de estilo limpio === */
.card{border-radius:14px; border:1px solid var(--bd); background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mlb-game-card{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:14px}
.mlb-game-card .gcol.team{justify-content:center}
.mlb-game-card .gcol.score{font-weight:800; font-size:1.1rem}
.mlb-game-card img{width:40px; height:40px; object-fit:contain}
.mlb-game-card .grow.meta{display:flex; justify-content:center; gap:10px; grid-column:1/-1; margin-top:6px}
.pill{padding:4px 10px; border-radius:999px; font-weight:700}
.pill.live{background:#fde2e2; border:1px solid #fecaca; color:#b91c1c}
.pill.final{background:#e2e8f0; border:1px solid #cbd5e1; color:#334155}
.pill.schd{background:#f1f5f9; border:1px solid #e2e8f0; color:#0f172a}

/* Sticky improvements */
.mlb-sticky{display:flex; gap:10px; overflow:auto; scroll-snap-type:x mandatory; padding:8px 0}
.mlb-sticky .sticky-card{min-width:220px; scroll-snap-align:start; text-align:center; padding:10px 12px}
.mlb-sticky .sc-logos{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:4px}
.mlb-sticky .sc-logos img{width:28px; height:28px}
.mlb-sticky .sc-score{font-weight:800; margin-bottom:2px}
.mlb-sticky .sc-state-row{margin-top:6px}

/* Baseball diamond refined */
.bases{ position:relative; width:92px; height:72px; margin:8px auto 0; background:linear-gradient(180deg,#0a5a21,#08491b); border-radius:12px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.bases .b{ position:absolute; width:16px; height:16px; transform:rotate(45deg); background:#fff; border:2px solid #9ca3af; box-shadow:0 1px 0 rgba(0,0,0,.05)}
.bases .b1{ left:10px; top:25px}
.bases .b2{ left:38px; top:6px}
.bases .b3{ left:66px; top:25px}
.bases .bh{ left:38px; top:44px; background:#e5e7eb}
.bases .on{ background:#ffe08a; border-color:#f59e0b}

/* Game header nicer */
.game-head{display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:16px}
.game-head .team{display:flex; align-items:center; gap:8px; justify-content:center}
.game-head .team img{width:44px; height:44px}
.game-head .score{font-size:1.6rem; font-weight:900}
.game-head .meta{grid-column:1/-1; text-align:center; margin-top:6px}

/* Boxscore tables */
.table.small{display:grid; gap:4px}
.table.small .tr{display:grid; grid-template-columns:160px repeat(9,32px) 40px 40px 40px; align-items:center}
.table.small .tr.th{font-weight:800; color:#334155}
.table.small .td, .table.small .tr.th div{padding:4px 6px; text-align:center}
.table.small .teamcell{display:flex; align-items:center; gap:6px; justify-content:flex-start}
.split{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mini{padding:6px 8px; border:1px dashed var(--bd); border-radius:10px}


/* --- UI polish: logos y ocultar inning/outs en lista principal --- */
.game-card { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:12px; }
.game-card .team-logo { width:48px; height:48px; object-fit:contain; display:block; margin:auto; }
.game-card .meta .inning, .game-card .meta .outs { display:none !important; } /* mostrar solo en sticky */


/* --- Game view polish --- */
.game-header{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.game-header .team-logo{ width:72px; height:72px; object-fit:contain; display:block; margin:0 auto; }
.game-header .team-name{ text-align:center; font-weight:600; font-size:14px; }
.game-header .gh__center{ text-align:center; }
.game-header .score{ font-size:28px; font-weight:700; line-height:1.2; }
.game-header .state{ margin-top:6px; font-size:14px; }

.tabs{ margin-top:16px; }
.tabs__nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.tabs__nav button{ padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; cursor:pointer; }
.tabs__nav button.active{ background:#111827; color:#fff; }
.tab{ display:none; }
.tab.active{ display:block; }

.table-wrap{ overflow:auto; }
.tbl{ width:100%; border-collapse: collapse; }
.tbl th, .tbl td{ padding:8px 10px; border-bottom:1px solid #e5e7eb; text-align:left; font-size:14px; }
.tbl th{ position:sticky; top:0; background:#f9fafb; }
.tbl-title{ margin:12px 0 6px; font-size:16px; }
.pbp{ margin:0; padding-left:20px; }

/* sticky day controls */
#sticky-controls{ display:flex; gap:8px; justify-content:flex-end; margin:6px 0 8px; }
#sticky-controls .sf-btn{ padding:4px 10px; font-size:12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; }
#sticky-controls .sf-btn.active{ background:#111827; color:#fff; }


/* --- Game page layout --- */
#game-app{ margin-top:12px; }
.game-header{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:12px; }
.game-header .team-logo{ width:80px; height:80px; object-fit:contain; display:block; margin:0 auto; }
.game-header .team-name{ text-align:center; font-weight:600; }
.gh-center{ text-align:center; }
.gh-score{ font-size:32px; font-weight:800; line-height:1; }
.gh-meta{ margin-top:6px; font-size:14px; }
.gh-matchup{ margin-top:4px; font-size:13px; opacity:.85; }
.gh-date{ margin-top:4px; font-size:12px; opacity:.7; }

.tabs{ margin-top:12px; }
.tabs__nav{ display:flex; gap:8px; margin-bottom:8px; }
.tabs__nav button{ padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; cursor:pointer; font-weight:700; }
.tabs__nav button.active{ background:#111827; color:#fff; }
.tab{ display:none; }
.tab.active{ display:block; }

.linescore .tbl{ width:100%; border-collapse:collapse; }
.tbl th, .tbl td{ padding:6px 8px; border-bottom:1px solid #e5e7eb; text-align:center; font-size:14px; }
.tbl th{ position:sticky; top:0; background:#f9fafb; z-index:1; }
.table-wrap{ overflow:auto; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.pbp-list{ margin:0; padding-left:20px; }
@media (max-width: 900px){ .grid-2{ grid-template-columns:1fr; } .game-header .team-logo{ width:64px; height:64px; } .gh-score{ font-size:26px; } }


/* --- Boxscore & tables redesign --- */
.card{ border:1px solid #e5e7eb; border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; }
.tbl thead th{ position:sticky; top:0; background:#f8fafc; font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.02em; }
.tbl th, .tbl td{ padding:8px 10px; border-bottom:1px solid #eef2f7; text-align:center; }
.tbl tbody tr:nth-child(odd){ background:#fcfdff; }
.tbl tbody tr:hover{ background:#f3f6fb; }
.tbl td:first-child, .tbl th:first-child{ text-align:left; }
.table-wrap{ overflow:auto; border:1px solid #eef2f7; border-radius:12px; }
.linescore .tbl th, .linescore .tbl td{ min-width:34px; }
.tbl-title{ margin:10px 0 6px; font-weight:800; letter-spacing:.02em; }
.decisions{ padding:8px 10px; font-size:14px; }
.pill{ padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#e5e7eb; }
.pill.live{ background:#dcfce7; color:#166534; }
.pill.final{ background:#e5e7eb; color:#111827; }

/* standings redesign */
.st-card{ padding:10px; margin-bottom:14px; }
.st-title{ margin:4px 0 8px; font-weight:800; letter-spacing:.02em; }
.standings-table .tr{ display:grid; grid-template-columns:  1.6fr repeat(4, 0.6fr); align-items:center; gap:0; }
.standings-table .tr.th{ background:#f8fafc; position:sticky; top:0; z-index:1; }
.standings-table .td, .standings-table .tr.th > div{ padding:8px 10px; border-bottom:1px solid #eef2f7; font-size:14px; text-align:center; }
.standings-table .td-team{ text-align:left; display:flex; align-items:center; gap:8px; }
.standings-table .td-logo{ width:20px; height:20px; object-fit:contain; vertical-align:middle; }
.standings-table .tr:nth-child(odd){ background:#fcfdff; }
.standings-table .tr:hover{ background:#f3f6fb; }



/* --- MLB Game tables: enhanced styles --- */
.table-wrap{overflow:auto;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);background:var(--card, #fff);}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;}
.tbl thead th{position:sticky;top:0;background:var(--thead,#f6f7f9);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.02em;border-bottom:1px solid rgba(0,0,0,.08);padding:10px 12px;text-align:left;}
.tbl tbody td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:middle;}
.tbl tbody tr:hover{background:rgba(0,0,0,.03);}
.tbl .num{text-align:center;font-variant-numeric:tabular-nums;}
.tbl-title{margin:18px 0 8px;font-size:14px;opacity:.8}
.decisions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;background:var(--card,#fff);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pbp-list{margin:0;padding:12px 16px;list-style:decimal;}
.pbp-list li{margin:6px 0;padding:4px 0;border-bottom:1px dashed rgba(0,0,0,.08);}
.pill{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}
.pill.live{background:#fee;border:1px solid #f99;color:#900}
.pill.final{background:#eefaf2;border:1px solid #bde5c8;color:#1a7f3e}
.pill.schd{background:#eef2ff;border:1px solid #c7d2fe;color:#334155}
@media (max-width: 720px){
  .tbl{min-width:580px}
}


/* --- Inplay panel --- */
.inplay{display:grid;grid-template-columns: 140px 1fr;gap:16px;align-items:center}
.inplay__diamond{display:flex;align-items:center;justify-content:center}
.inplay__info{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.inplay__row{display:flex;align-items:center;gap:10px}
.inplay__label{font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.03em}
.inplay__value{font-weight:600}
.inplay__sep{height:1px;background:rgba(0,0,0,.06);grid-column:1/-1;margin:6px 0}
.inplay__outs{font-variant-numeric:tabular-nums}
.base{stroke:#999;fill:#f3f4f6}
.base--on{fill:#22c55e;stroke:#15803d}
.inning-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.08);font-size:12px}
.inning-tag .arrow{font-size:14px;line-height:1}
.matchup{display:flex;flex-wrap:wrap;gap:16px}
.matchup .chip{background:#f6f7f9;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:6px 10px;font-size:13px}
.logo-cell{display:flex;align-items:center;justify-content:center;padding:6px 4px}
.logo-cell img{width:24px;height:24px;object-fit:contain}
.tbl thead th.che{min-width:28px}


/* Header */
.game-header{display:grid; gap:12px; grid-template-columns: 1fr auto 1fr; align-items:center; padding:14px 16px}
.gh-team{display:flex; gap:10px; align-items:center;}
.gh-team .team-logo{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));}
.gh-team .team-name{font-weight:700; letter-spacing:.3px}
.gh-center{display:grid; justify-items:center; gap:6px}
.gh-score{font-size:36px; font-weight:800; letter-spacing:1px}
.gh-meta{display:flex; gap:10px; align-items:center; color:var(--muted)}
.pill{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700; letter-spacing:.3px}
.pill.live{background:#0b3c1c;border:1px solid #1ca34a;color:#7dffaf}
.pill.final{background:#1b2437;border:1px solid #334155;color:#cbd5e1}
.pill.schd{background:#13224a;border:1px solid #334155;color:#cbd5e1}

/* Linescore / tables */
.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line);}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:700px;color:var(--text)}
.tbl thead th{position:sticky;top:0;background:#0c1a36;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tbl tbody td{padding:12px;border-bottom:1px solid var(--line);}
.tbl tbody tr:hover{background:#0e1f40;}
.tbl .num{text-align:center;font-variant-numeric:tabular-nums;}
.tbl-title{margin:18px 0 8px;font-size:14px;color:#cbd5e1; text-transform:uppercase; letter-spacing:.06em}

/* In-play panel */
.inplay{display:grid;grid-template-columns: 220px 1fr;gap:18px;align-items:center;padding:14px 16px}
.inplay__diamond{display:flex;align-items:center;justify-content:center}
.inplay__info{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.inplay__row{display:flex;align-items:center;gap:10px}
.inplay__label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.06em;color:#93c5fd}
.inplay__value{font-weight:700}
.inplay__sep{height:1px;background:var(--line);grid-column:1/-1;margin:6px 0}
.inning-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;background:#0c1a36}
.matchup{display:flex;flex-wrap:wrap;gap:10px}
.matchup .chip{background:#0c1a36;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px}

/* Diamond SVG look */
.diamond-field{fill:#0f3a1a; stroke:#115e2d; stroke-width:2}
.base-plate{fill:#fff; stroke:#e2e8f0; stroke-width:1}
.path{fill:#8b5e3c; stroke:#a4754a; stroke-width:1}
.runner{fill:#facc15; stroke:#fde047; stroke-width:1.5}
.count-badge{background:#0c1a36; border:1px solid var(--line); border-radius:8px; padding:6px 8px; display:inline-flex; gap:8px}
.count-badge .dot{width:8px;height:8px;border-radius:99px;background:#1e293b;display:inline-block}
.count-badge .dot.on{background:#22c55e}

/* Decisions & PBP */
.decisions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:12px;border-radius:12px;background:#0c1a36;border:1px solid var(--line);}
.pbp-list{margin:0;padding:12px 16px;list-style:decimal;color:#cbd5e1}
.pbp-list li{margin:6px 0;padding:4px 0;border-bottom:1px dashed var(--line);}
.logo-cell{display:flex;align-items:center;justify-content:center;padding:8px}
.logo-cell img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}


/* ========= MLB Gameday — Visual refresh (light-first) ========= */
.table-wrap{overflow:auto;border-radius:14px;border:1px solid rgba(0,0,0,.06)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:700px}
.tbl thead th{position:sticky;top:0;background:#f1f5f9;padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tbl tbody td{padding:12px;border-bottom:1px solid rgba(0,0,0,.06)}
.tbl tbody tr:hover{background:#f8fafc}
.tbl .num{text-align:center;font-variant-numeric:tabular-nums}
.tbl-title{margin:18px 0 8px;font-size:14px;color:#334155;text-transform:uppercase;letter-spacing:.06em}
.card{border-radius:16px;border:1px solid rgba(0,0,0,.06);background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.inplay{display:grid;grid-template-columns: 220px 1fr;gap:18px;align-items:center;padding:14px 16px}
.inplay__diamond{display:flex;align-items:center;justify-content:center}
.inplay__info{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.inplay__row{display:flex;align-items:center;gap:10px}
.inplay__label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.inplay__value{font-weight:700}
.inplay__sep{height:1px;background:rgba(0,0,0,.06);grid-column:1/-1;margin:6px 0}
.inning-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.06);font-size:12px;background:#f1f5f9}
.matchup{display:flex;flex-wrap:wrap;gap:10px}
.matchup .chip{background:#f1f5f9;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:6px 10px;font-size:13px}
.logo-cell{display:flex;align-items:center;justify-content:center;padding:8px}
.logo-cell img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.diamond-field{fill:#e6ffe6; stroke:#b6e3b6; stroke-width:2}
.base-plate{fill:#ffffff; stroke:#94a3b8; stroke-width:1}
.path{fill:#e7c29f; stroke:#d1a67b; stroke-width:1}
.runner{fill:#16a34a; stroke:#22c55e; stroke-width:1.5}
.count-badge{background:#f1f5f9;border:1px solid rgba(0,0,0,.06);border-radius:8px;padding:6px 8px;display:inline-flex;gap:8px}
.count-badge .dot{width:8px;height:8px;border-radius:99px;background:#cbd5e1;display:inline-block}
.count-badge .dot.on{background:#22c55e}
.pill{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.3px}
.pill.live{background:#ecfdf5;border:1px solid #86efac;color:#166534}
.pill.final{background:#eef2ff;border:1px solid #c7d2fe;color:#334155}
.pill.schd{background:#f1f5f9;border:1px solid #e2e8f0;color:#334155}
:root[data-theme="dark"] .card{background:#0f172a;border-color:rgba(255,255,255,.06);box-shadow:0 10px 30px rgba(0,0,0,.25)}
:root[data-theme="dark"] .tbl thead th{background:#0c1a36;border-bottom-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .tbl tbody td{border-bottom-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .tbl tbody tr:hover{background:#0e1f40}
:root[data-theme="dark"] .tbl-title{color:#cbd5e1}
:root[data-theme="dark"] .inplay__label{color:#93c5fd}
:root[data-theme="dark"] .inplay__sep{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .inning-tag{background:#0c1a36;border-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .matchup .chip{background:#0c1a36;border-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .count-badge{background:#0c1a36;border-color:rgba(255,255,255,.06)}
:root[data-theme="dark"] .logo-cell img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* Two-column layout for standings when both leagues */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width: 900px){.st-grid{grid-template-columns:1fr}}
.st-card{margin:0}

/* Ensure team names stay on one line and align cells neatly */
.st-team-name {
  white-space: nowrap;
}
.st-card table {
  width: 100%;
  border-collapse: collapse;
}
.st-card table th, .st-card table td {
  text-align: left;
  vertical-align: middle;
  padding: 4px 6px;
}

/* Keep team names on one line, shrink font slightly, and ellipsis overflow */
.st-team-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9em;
  max-width: 180px; /* adjust as needed for layout */
}

/* Center align the streak (racha) column - assuming it has a class or is last column */
.st-card table td:last-child,
.st-card table th:last-child {
  text-align: center;
}


/* --- Standings refinements --- */
/* 1) Team name in a single line with ellipsis if too long */
.standings-table .td.td-team{ 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}
.standings-table .td.td-team .td-logo{
  width: 18px; height: 18px; object-fit: contain; margin-right: 6px;
}

/* 2) Center the 'Racha' column (last column) */
.standings-table .tr > .td:last-child{
  display: flex;
  justify-content: center;
  text-align: center;
}
.standings-table .tr.th > div:last-child{
  display: flex;
  justify-content: center;
  text-align: center;
}


/* Numeric columns centered */
.standings-table .tr > .td:nth-child(n+2),
.standings-table .tr.th > div:nth-child(n+2){
  text-align:center;
}
/* First column (Equipo) left aligned */
.standings-table .tr > .td:first-child,
.standings-table .tr.th > div:first-child{
  text-align:left;
}


/* Ajuste tablas Liga Americana y Liga Nacional */
.st-grid {
    display: flex;
    gap: 0 !important;
}
.st-card {
    flex: 1 1 50%;
    max-width: 50% !important;
    margin: 0 !important;
    padding: 0.5rem !important;
}
.st-card table {
    width: 100%;
}