/* ===== TDYPICKS: estilo deportivo, modo oscuro, verde neón + rojo + negro ===== */
:root {
  --bg: #050505;
  --surface: #0f0f10;
  --surface-2: #17171a;
  --surface-3: #202024;
  --line: #2a2a2f;
  --text: #f4f4f5;
  --muted: #9b9ba3;
  --neon: #39ff14;
  --neon-dim: #2bc010;
  --neon-soft: rgba(57, 255, 20, 0.12);
  --neon-glow: 0 0 18px var(--accent-border);
  --red: #ff2d3d;
  --red-soft: rgba(255, 45, 61, 0.14);
  --mid: #e8e8e8;
  --radius: 16px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Arial Black', 'Segoe UI Black', 'Helvetica Neue', Impact, system-ui, sans-serif;
  color-scheme: dark;
  /* Variables del tema (Clásico). "Niebla azul" las cambia más abajo. */
  --accent: var(--neon);
  --accent-soft: var(--neon-soft);
  --on-accent: #000;
  --on-red: #fff;
  --soft-text: #d4d4d8;
  --soft-text-2: #e4e4e7;
  --overlay: rgba(255, 255, 255, 0.06);
  --overlay-dark: rgba(0, 0, 0, 0.35);
  --accent-border: rgba(57, 255, 20, 0.45);
  --red-border: rgba(255, 45, 61, 0.45);
  --neutral-bar: #8a8a90;
  --draw: #3a3a40;
  --form-e: #4a4a50;
  --low-dim: #a01622;
  --topbar-bg: rgba(5, 5, 5, 0.86);
  --tabs-bg: rgba(5, 5, 5, 0.9);
  --disc-bg: #0b0b0b;
  --body-bg: radial-gradient(1200px 500px at 50% -200px, rgba(57, 255, 20, 0.10), transparent 70%), var(--bg);
  --hero-bg: linear-gradient(135deg, #0d1f0a 0%, #0a0a0a 55%, #1f0a0c 100%);
  --match-hero-bg: radial-gradient(300px 140px at 0% 0%, rgba(57,255,20,.15), transparent 70%), radial-gradient(300px 140px at 100% 100%, rgba(255,45,61,.15), transparent 70%), var(--surface);
  --card-shadow: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--body-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  padding-bottom: calc(52px + env(safe-area-inset-bottom));
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; }

/* ---------- barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { border-radius: 9px; }
.wordmark {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 22px; letter-spacing: 0.5px;
}
.wordmark b { color: var(--neon); text-shadow: var(--neon-glow); font-weight: 900; }

.usage-chip {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted);
}
.usage-chip .num { color: var(--neon); }
@media (max-width: 400px) {
  .wordmark { font-size: 18px; }
  .brand img { width: 28px; height: 28px; }
  .usage-chip { font-size: 11px; padding: 5px 8px; }
}
.usage-chip.low .num { color: var(--red); }
.usage-chip.low { border-color: var(--red); }

.demo-banner {
  margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px;
  background: var(--red-soft); border: 1px solid var(--red-border);
  font-size: 13px; font-weight: 600;
}
.demo-banner code { background: var(--overlay-dark); padding: 1px 5px; border-radius: 4px; }

.historic-banner {
  margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px;
  background: var(--neon-soft); border: 1px solid var(--accent-border);
  font-size: 13px; display: flex; flex-direction: column; gap: 2px;
}
.historic-banner b { color: var(--neon); font-size: 14px; }
.historic-banner span { color: var(--soft-text); }

main { max-width: 980px; margin: 0 auto; padding: 16px; }

/* ---------- modo histórico ---------- */
.btn.ghost { background: transparent; color: var(--neon); border: 1px solid var(--neon); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: wait; }
.btn + .btn { margin-left: 8px; }
.btn.more { display: block; width: 100%; margin-top: 14px; }
.hero .btn { position: relative; z-index: 1; }
.mini.hit { border-color: var(--accent-border); color: var(--neon); }
.mini.miss { border-color: var(--red-border); color: var(--red); }
.tag.grey { background: var(--overlay); color: var(--soft-text-2); border-color: var(--line); }

.eval-panel { border-color: var(--accent-border); }
.warn-box {
  margin: 8px 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--red-soft); border: 1px solid var(--red-border);
}
.pick-low { opacity: .55; filter: grayscale(1); }

/* ---------- tendencias ---------- */
:root { --yellow: #ffd60a; }
.trend-list { display: grid; gap: 10px; }
.trend-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .trend-grid { grid-template-columns: 1fr 1fr; } }
.trend {
  padding: 12px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line); border-left: 4px solid var(--yellow);
}
.trend.strong { border-left-color: var(--neon); }
.trend-top { display: flex; align-items: center; gap: 8px; }
.tlabel {
  font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--soft-text-2);
}
.tcount { margin-left: auto; font-weight: 800; color: var(--muted); font-size: 13px; }
.tpct { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--yellow); }
.trend.strong .tpct { color: var(--neon); }
.ttext { margin: 8px 0; font-weight: 600; font-size: 14px; }
.trend-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.trend-bar > div {
  height: 100%; width: var(--w); border-radius: 999px; background: var(--yellow);
  animation: grow 1s cubic-bezier(.2,.8,.2,1);
}
.trend.strong .trend-bar > div { background: var(--neon); box-shadow: var(--neon-glow); }
.tmodel { margin-top: 8px; font-size: 12px; font-weight: 700; padding: 6px 8px; border-radius: 8px; background: var(--overlay); }
.tmodel.agree { color: var(--neon); background: var(--neon-soft); }
.tmodel.mixed { color: var(--soft-text-2); }
.tmodel.against { color: var(--red); background: var(--red-soft); }
.tmodel.none { color: var(--muted); }
.tsmall { margin-top: 6px; font-size: 12px; color: var(--yellow); font-weight: 700; }
.toutcome { margin-top: 6px; font-size: 12px; font-weight: 800; }
.toutcome.hit { color: var(--neon); }
.toutcome.miss { color: var(--red); }
.tdy { font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; font-style: italic; }
.tdy-alto { background: var(--neon); color: var(--on-accent); }
.tdy-medio { background: rgba(255,214,10,.18); color: var(--yellow); border: 1px solid rgba(255,214,10,.5); }
.tdy-bajo { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-border); }

/* ---------- Análisis TDY y contexto ---------- */
.tdy-panel { border-color: var(--neon); box-shadow: 0 0 0 1px rgba(57,255,20,.15) inset; }
.tdy-list { margin: 8px 0; padding-left: 18px; font-size: 14px; font-weight: 600; }
.tdy-list li { margin: 6px 0; }
.fatigue { margin: 8px 0 10px; }
.fatigue-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 5px; }
.fatigue-head b { font-family: var(--font-display); font-style: italic; color: var(--neon); }
.fatigue-head b.mid { color: var(--yellow); }
.fatigue-head b.red, b.red { color: var(--red); }
.pbar-fill.mid { background: var(--yellow); box-shadow: none; }
.pbar-fill.red { background: var(--red); box-shadow: none; }
.ctx-table td { text-align: left; }
.ctx-table td:first-child { color: var(--muted); width: 45%; }
.factor-list { display: grid; gap: 6px; margin: 10px 0; }
/* Etapa 3: listas de jugadores (bajas y alineaciones) */
.plist { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 4px; }
.plist li { display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.plist li > .small { grid-column: 2; }
.plist li.imp { box-shadow: inset 3px 0 0 var(--red); }
.plist .pos { font-size: 11px; font-weight: 800; color: var(--muted); }
.plist .pname { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.factor { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.factor.activo span:last-child { color: var(--neon); }
.factor.descartado span:last-child { color: var(--red); }
.factor.pendiente span:last-child { color: var(--muted); }
.ctx-box { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--overlay-dark); border: 1px solid var(--line); position: relative; z-index: 1; }
.ctx-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.ctx-box .btn { margin-top: 10px; }
.table-scroll { overflow-x: auto; }
.val-table { min-width: 520px; }
.val-table td.win { color: var(--neon); font-weight: 800; }
.val-table td.lose { color: var(--red); }
.val-table tr.acc-ok td:first-child { color: var(--neon); font-weight: 800; }
.tmatch { display: block; font-size: 12px; font-weight: 800; color: var(--neon); margin-bottom: 6px; }
.eval-list { display: grid; gap: 6px; margin: 10px 0; }
.eval-row {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
}
.eval-row .mark { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; }
.eval-row.hit .mark { background: var(--neon); color: var(--on-accent); }
.eval-row.miss .mark { background: var(--red); color: var(--on-red); }
.eval-row .p { font-family: var(--font-display); font-style: italic; font-size: 17px; }

.acc-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.acc-row:last-child { border-bottom: 0; }
.acc-head { display: flex; justify-content: space-between; align-items: baseline; }
.acc-rate { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--neon); }
.acc-bars { display: grid; gap: 5px; margin: 8px 0; }
.acc-bar { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: 8px; font-size: 12px; }
.acc-bar .lbl { color: var(--muted); font-weight: 700; }
.acc-bar > span:last-child { text-align: right; font-weight: 700; }
.acc-bar.exp .pbar-fill { background: linear-gradient(90deg, var(--neutral-bar), var(--mid)); box-shadow: none; }

.calib { display: grid; gap: 8px; margin-top: 10px; }
.calib-row { display: grid; grid-template-columns: 62px 1fr 78px; gap: 8px; align-items: center; font-size: 12px; }
.calib-row .rng { color: var(--muted); font-weight: 800; }
.calib-row .nums { text-align: right; }
.calib-bars { display: grid; gap: 3px; }
.cb { height: 9px; border-radius: 999px; width: var(--w); animation: grow 1s cubic-bezier(.2,.8,.2,1); }
.cb.pred { background: var(--neutral-bar); }
.cb.real { background: var(--neon); box-shadow: var(--neon-glow); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 8px; border-radius: 4px; margin-right: 5px; }
.legend i.pred { background: var(--neutral-bar); }
.legend i.real { background: var(--neon); }

/* ---------- aviso legal ---------- */
.disclaimer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  text-align: center; font-size: 12px; font-weight: 600;
  background: var(--disc-bg); border-top: 2px solid var(--red);
  color: var(--soft-text);
}
.disclaimer strong { color: var(--red); }

/* ---------- títulos ---------- */
.h-display {
  font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  font-weight: 900; letter-spacing: 0.3px; margin: 0;
}
.section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0 12px; font-size: 18px;
}
.section-title .bar { width: 5px; height: 22px; background: var(--neon); border-radius: 3px; box-shadow: var(--neon-glow); }
.section-title img { width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- héroe "Picks del día" ---------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: 18px;
  background: var(--hero-bg);
  border: 1px solid var(--line);
}
.hero::after {
  content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  border-radius: 50%; border: 10px solid var(--neon); opacity: 0.12;
}
.hero h2 { font-size: 20px; }
.hero h2 span { color: var(--neon); }
.hero p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.tag {
  display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; letter-spacing: 0.4px;
  background: var(--neon-soft); color: var(--neon); border: 1px solid var(--accent-border);
}
.tag.red { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }

/* ---------- filtros ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 13px;
}
.chip.active { background: var(--neon); color: var(--on-accent); border-color: var(--neon); box-shadow: var(--neon-glow); }

/* ---------- tarjetas de partido ---------- */
.day-label { margin: 16px 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: 0.6px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .grid { grid-template-columns: 1fr 1fr; } }

.match-card {
  display: block; cursor: pointer;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.match-card:hover, .match-card:focus-visible { border-color: var(--neon); box-shadow: var(--neon-glow); transform: translateY(-2px); outline: none; }
.mc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mc-time { font-weight: 800; color: var(--text); }
.live { color: var(--red); font-weight: 800; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .45; } }
.mc-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 12px 0; }
.team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.team-name { font-weight: 800; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.logo {
  width: 44px; height: 44px; object-fit: contain;
  background: #fff; border-radius: 12px; padding: 4px;
}
.logo-fallback {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-3); border: 1px solid var(--line);
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--neon);
}
.vs { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--muted); }
.vs.score { color: var(--text); font-size: 24px; }
.mc-cta {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 9px; border-radius: 10px; font-weight: 800; font-size: 13px;
  background: var(--neon-soft); color: var(--neon); border: 1px dashed var(--accent-border);
}
.mini-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mini {
  font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--line);
}
.mini b { color: var(--neon); }

/* barra 1X2 de tres colores */
.tri { display: flex; height: 26px; border-radius: 8px; overflow: hidden; gap: 2px; font-size: 11px; font-weight: 800; }
.tri > div {
  display: flex; align-items: center; justify-content: center; min-width: 30px; white-space: nowrap;
  animation: grow .9s cubic-bezier(.2,.8,.2,1);
}
.tri .t1 { background: var(--neon); color: var(--on-accent); }
.tri .tx { background: var(--draw); }
.tri .t2 { background: var(--red); color: var(--on-red); }

/* ---------- barras de probabilidad ---------- */
.pbar { margin: 10px 0; }
.pbar-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.pbar-head strong { font-family: var(--font-display); font-style: italic; }
.pbar-track { height: 10px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.pbar-fill {
  height: 100%; width: var(--w); border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-dim), var(--neon));
  box-shadow: var(--neon-glow);
  animation: grow 1s cubic-bezier(.2,.8,.2,1);
}
.pbar.mid .pbar-fill { background: linear-gradient(90deg, var(--neutral-bar), var(--mid)); box-shadow: none; }
.pbar.low .pbar-fill { background: linear-gradient(90deg, var(--low-dim), var(--red)); box-shadow: none; }
.pbar.high .pbar-head strong { color: var(--neon); }
.pbar.low .pbar-head strong { color: var(--red); }
@keyframes grow { from { width: 0; } }

/* ---------- razones + confianza ---------- */
.market { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.market:last-child { border-bottom: 0; }
details.why { margin: 2px 0 6px; }
details.why summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
details.why summary::-webkit-details-marker { display: none; }
details.why summary::before { content: '▸'; color: var(--neon); transition: transform .2s; }
details.why[open] summary::before { transform: rotate(90deg); }
details.why ul { margin: 8px 0 4px; padding-left: 18px; color: var(--soft-text); font-size: 13px; }
details.why li { margin: 4px 0; }
.conf { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.conf-alta { background: var(--neon-soft); color: var(--neon); }
.conf-media { background: var(--overlay); color: var(--soft-text-2); }
.conf-baja { background: var(--red-soft); color: var(--red); }

/* ---------- detalle de partido ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.back:hover { color: var(--neon); }
.match-hero {
  border-radius: var(--radius); padding: 16px;
  background: var(--match-hero-bg);
  border: 1px solid var(--line);
}
.match-hero .mc-teams { margin: 14px 0 8px; }
.match-hero .logo, .match-hero .logo-fallback { width: 60px; height: 60px; }
.match-hero .team-name { font-size: 16px; }
.xg-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--muted); }

.tabs {
  position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 10;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 14px -16px 0; padding: 10px 16px;
  background: var(--tabs-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 8px 13px; border-radius: 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  font-weight: 800; font-size: 13px; text-transform: uppercase; font-style: italic;
}
.tab.active { background: var(--neon); color: var(--on-accent); border-color: var(--neon); }
.tab .lock { opacity: .6; font-style: normal; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-top: 12px;
}
.panel h3 { margin: 0 0 6px; font-size: 16px; }
.panel h3.h-display { font-size: 15px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.two { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .two { grid-template-columns: 1fr 1fr; } }

.big-nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; margin: 8px 0; }
.big-num { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; }
.big-num .v { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--neon); }
.big-num .v.red { color: var(--red); }
.big-num .l { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }

.picks-list { display: grid; gap: 8px; }
.pick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
}
.pick .p { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--neon); }

/* tabla comparativa */
.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp th, .cmp td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp td:nth-child(2) { color: var(--muted); font-size: 12px; width: 44%; }
.cmp th { font-size: 12px; color: var(--muted); }
.cmp td.win { color: var(--neon); font-weight: 800; }

.form { display: inline-flex; gap: 3px; }
.f { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 900; }
.f.G { background: var(--neon); color: var(--on-accent); }
.f.E { background: var(--form-e); }
.f.P { background: var(--red); }

/* heatmap de marcadores */
.heat { display: grid; grid-template-columns: 28px repeat(6, 1fr); gap: 3px; font-size: 11px; margin-top: 8px; }
.heat div { text-align: center; padding: 7px 0; border-radius: 5px; }
.heat .hd { color: var(--muted); font-weight: 800; }
.scores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.score-pill { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 800; }
.score-pill b { font-family: var(--font-display); font-style: italic; font-size: 18px; margin-right: 6px; }
.score-pill:first-child { border-color: var(--neon); }

/* lista H2H */
.h2h-row { display: grid; grid-template-columns: 70px 1fr auto 1fr; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.h2h-row .r { font-family: var(--font-display); font-style: italic; font-size: 15px; padding: 2px 8px; background: var(--surface-3); border-radius: 6px; }
.h2h-row .hn { text-align: right; }
.h2h-row .win { color: var(--neon); font-weight: 800; }

.locked {
  text-align: center; padding: 28px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface);
}
.locked .icon { font-size: 34px; }

ul.reasons { margin: 8px 0 0; padding-left: 18px; color: var(--soft-text); font-size: 13px; }
ul.reasons li { margin: 4px 0; }

/* ---------- estados ---------- */
.loader { display: grid; place-items: center; gap: 10px; padding: 60px 0; color: var(--muted); text-align: center; }
.spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid var(--surface-3); border-top-color: var(--neon);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-box {
  padding: 14px; border-radius: 12px; background: var(--red-soft);
  border: 1px solid var(--red-border); font-weight: 600;
}
.btn {
  display: inline-block; margin-top: 10px; padding: 10px 16px; border-radius: 10px; cursor: pointer;
  background: var(--neon); color: var(--on-accent); border: 0; font-weight: 900; text-transform: uppercase; font-style: italic;
}
.empty { padding: 14px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; font-size: 13px; }
.noscript { padding: 20px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Fase 3: picks más probables del día */
.picks-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
.picks-nav .btn { margin: 0; min-width: 44px; }
.picks-date { display: grid; text-align: center; gap: 2px; text-transform: capitalize; }
.picks-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.picks-progress .btn { margin: 0; }
.pick-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0; }
@media (min-width: 720px) { .pick-grid { grid-template-columns: 1fr 1fr; } }
.pick-card { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-2); color: inherit; text-decoration: none; border: 1px solid transparent; }
.pick-card:hover { border-color: var(--neon); }
.pick-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pick-lg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.pick-match { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.pick-line { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pick-p { color: var(--neon); font-size: 18px; }
.pick-res { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pick-res.hit { color: var(--on-accent); background: var(--neon); }
.pick-res.miss { color: var(--on-red); background: var(--red); }
.league-select { display: grid; gap: 4px; margin: 12px 0; }
.league-select select { width: 100%; max-width: 420px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--surface-2); font: inherit; }

/* Interruptor de modo */
.mode-switch { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; margin-left: auto; margin-right: 8px; }
.mode-switch button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.mode-switch button.active { background: var(--neon); color: var(--on-accent); }
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .mode-switch { order: 3; width: 100%; margin: 0; }
  .mode-switch button { flex: 1; }
}

/* 🔴 En vivo */
.live-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0 4px; }
@media (min-width: 720px) { .live-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .live-grid { grid-template-columns: 1fr 1fr 1fr; } }
.live-card { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-2); color: inherit; text-decoration: none; border: 1px solid var(--red-border); }
.live-card:hover { border-color: var(--red); }
.live-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.live-row .g { font-size: 18px; font-variant-numeric: tabular-nums; }
.live-min { color: var(--red); font-weight: 800; font-size: 12px; }
.live-ev { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.live-updated { font-size: 12px; color: var(--muted); }
.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.timeline li { display: grid; grid-template-columns: 46px 22px 1fr; gap: 6px; align-items: baseline; font-size: 13px; padding: 4px 6px; border-radius: 8px; }
.timeline li.away { background: var(--overlay); }
.timeline .min { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; }
.stat-row .lbl { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 12px; margin-bottom: -4px; }
.stat-row .v { font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-row .v.r { text-align: right; }
.stat-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.stat-bar .h { background: var(--neon); }
.stat-bar .a { background: var(--red); }
.pick-track { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); margin: 6px 0; font-size: 13px; }
.pick-track .st { font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; align-self: center; }
.pick-track .note { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.st.ganado { background: var(--neon); color: var(--on-accent); }
.st.perdido { background: var(--red); color: var(--on-red); }
.st.va { border: 1px solid var(--neon); color: var(--neon); }
.st.falta { border: 1px solid var(--muted); color: var(--muted); }

/* ---------- Cuotas (solo informan) y pantalla Ajustes ---------- */
.mkt-line { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mkt-tag { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }
.mkt-tag.up { color: var(--neon); border-color: var(--accent-border); }
.mkt-tag.down { color: var(--red); border-color: var(--red-border); }
.gear { color: var(--muted); text-decoration: none; font-size: 20px; line-height: 1; padding: 6px; border-radius: 10px; }
.gear:hover, .gear:focus-visible { color: var(--neon); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .txt { flex: 1; min-width: 0; }
.toggle-row .txt b { display: block; }
.switch { position: relative; width: 50px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--soft-text-2); transition: transform .2s; }
.switch input:checked + span { background: var(--neon); }
.switch input:checked + span::after { transform: translateX(22px); background: #050505; }
.switch input:disabled + span { opacity: .4; }
.switch input:focus-visible + span { outline: 2px solid var(--neon); outline-offset: 2px; }
.league-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 18px; }
.league-toggles .toggle-row { padding: 8px 0; }
.saved-note { color: var(--neon); font-size: 13px; min-height: 18px; }

/* =====================================================================
   TEMA "NIEBLA AZUL" (pedido del usuario): colores tranquilos, letras redondeadas, más aire.
   Claro: fondo #EEF2F5, tarjetas blancas, azul #5B7DB1, celeste #A7C4D9, texto #2E3A4B,
   probabilidad alta #6FA89A, baja #D08C7E. Si el teléfono está en modo oscuro, usa los mismos tonos en oscuro.
   ===================================================================== */
html[data-theme="niebla"] {
  --bg: #EEF2F5;
  --surface: #FFFFFF;
  --surface-2: #F5F8FA;
  --surface-3: #E3EAF0;
  --line: #DCE4EB;
  --text: #2E3A4B;
  --muted: #6B7A8C;
  --neon: #6FA89A;
  --neon-dim: #8DBBAF;
  --neon-soft: rgba(111, 168, 154, 0.14);
  --neon-glow: 0 0 0 transparent;
  --red: #D08C7E;
  --red-soft: rgba(208, 140, 126, 0.14);
  --mid: #A7C4D9;
  --yellow: #C4A056;
  --accent: #5B7DB1;
  --accent-soft: rgba(91, 125, 177, 0.10);
  --on-accent: #FFFFFF;
  --on-red: #FFFFFF;
  --soft-text: #44526A;
  --soft-text-2: #3A475A;
  --overlay: rgba(46, 58, 75, 0.04);
  --overlay-dark: rgba(46, 58, 75, 0.05);
  --accent-border: rgba(91, 125, 177, 0.35);
  --red-border: rgba(208, 140, 126, 0.5);
  --neutral-bar: #B9C6D2;
  --draw: #CBD5DE;
  --form-e: #B9C6D2;
  --low-dim: #DCA79C;
  --topbar-bg: rgba(238, 242, 245, 0.88);
  --tabs-bg: rgba(238, 242, 245, 0.94);
  --disc-bg: #FFFFFF;
  --body-bg: linear-gradient(180deg, #E4ECF3 0, #EEF2F5 340px);
  --hero-bg: linear-gradient(135deg, #FFFFFF 0%, #EDF3F8 100%);
  --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(91,125,177,.10), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(167,196,217,.22), transparent 70%), #FFFFFF;
  --card-shadow: 0 1px 2px rgba(46, 58, 75, 0.05), 0 6px 18px rgba(46, 58, 75, 0.05);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="niebla"] {
    --bg: #18202A;
    --surface: #212B37;
    --surface-2: #283340;
    --surface-3: #313E4D;
    --line: #36444F;
    --text: #E3E9F0;
    --muted: #9AA8B8;
    --neon: #7DB8A9;
    --neon-dim: #6A9F92;
    --neon-soft: rgba(125, 184, 169, 0.14);
    --red: #D99A8C;
    --red-soft: rgba(217, 154, 140, 0.14);
    --mid: #8FAEC4;
    --yellow: #D2B06A;
    --accent: #7E9CCB;
    --accent-soft: rgba(126, 156, 203, 0.14);
    --on-accent: #10161D;
    --on-red: #10161D;
    --soft-text: #C5D0DC;
    --soft-text-2: #D3DCE6;
    --overlay: rgba(255, 255, 255, 0.04);
    --overlay-dark: rgba(0, 0, 0, 0.18);
    --accent-border: rgba(126, 156, 203, 0.4);
    --neutral-bar: #5D6C7C;
    --draw: #4A5866;
    --form-e: #5D6C7C;
    --low-dim: #B98377;
    --topbar-bg: rgba(24, 32, 42, 0.9);
    --tabs-bg: rgba(24, 32, 42, 0.94);
    --disc-bg: #1D2631;
    --body-bg: linear-gradient(180deg, #1D2733 0, #18202A 340px);
    --hero-bg: linear-gradient(135deg, #243040 0%, #1E2834 100%);
    --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(126,156,203,.14), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(143,174,196,.12), transparent 70%), #212B37;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}
/* Letras: sin cursiva ni mayúsculas gritadas */
html:not([data-theme="clasico"]) body { font-size: 15.5px; line-height: 1.55; }
html:not([data-theme="clasico"]) .h-display { font-style: normal; text-transform: none; font-weight: 800; letter-spacing: 0; }
html:not([data-theme="clasico"]) :is(.pbar-head strong, .big-num .v, .pick .p, .acc-rate, .tpct, .eval-row .p, .vs, .score-pill b, .h2h-row .r,
  .fatigue-head b, .tab, .btn, .tdy, .logo-fallback, .wordmark) { font-style: normal; }
html:not([data-theme="clasico"]) :is(.tab, .btn, .conf, .tlabel, .tag, .day-label, .big-num .l) { text-transform: none; letter-spacing: 0; }
html:not([data-theme="clasico"]) .wordmark { font-weight: 800; letter-spacing: 0; }
/* Color principal (azul) en botones, pestañas y elementos activos */
html:not([data-theme="clasico"]) :is(.btn, .tab.active, .chip.active, .mode-switch button.active) {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: none;
}
html:not([data-theme="clasico"]) .btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent-border); }
html:not([data-theme="clasico"]) .switch input:checked + span { background: var(--accent); }
html:not([data-theme="clasico"]) .switch input:checked + span::after { background: #fff; }
html:not([data-theme="clasico"]) .section-title .bar { background: var(--accent); box-shadow: none; }
html:not([data-theme="clasico"]) .spin { border-top-color: var(--accent); }
html:not([data-theme="clasico"]) details.why summary::before { color: var(--accent); }
html:not([data-theme="clasico"]) :is(.back:hover, .gear:hover, .gear:focus-visible, .tmatch, .hero h2 span, .wordmark b, .logo-fallback, .usage-chip .num) {
  color: var(--accent); text-shadow: none;
}
html:not([data-theme="clasico"]) .tag { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
html:not([data-theme="clasico"]) .tag.red { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }
html:not([data-theme="clasico"]) .tdy-panel { border-color: var(--accent-border); box-shadow: var(--card-shadow); }
html:not([data-theme="clasico"]) .hero::after { border-color: var(--mid); opacity: 0.25; }
html:not([data-theme="clasico"]) .score-pill:first-child { border-color: var(--accent); }
html:not([data-theme="clasico"]) .mc-cta { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
html:not([data-theme="clasico"]) :is(.panel, .match-card, .hero, .match-hero, .pick-card, .live-card) { box-shadow: var(--card-shadow); }
html:not([data-theme="clasico"]) .match-card { background: var(--surface); }
html:not([data-theme="clasico"]) .match-card:hover, html:not([data-theme="clasico"]) .match-card:focus-visible { border-color: var(--accent-border); box-shadow: 0 8px 24px rgba(46, 58, 75, 0.10); }
html:not([data-theme="clasico"]) .pick-card:hover { border-color: var(--accent-border); }
html:not([data-theme="clasico"]) .panel { padding: 18px; margin-top: 14px; }
html:not([data-theme="clasico"]) .tri .t1 { background: var(--accent); color: var(--on-accent); }
html:not([data-theme="clasico"]) .tri .tx { color: var(--text); }
html:not([data-theme="clasico"]) .tri .t2 { background: var(--mid); color: var(--text); }
html:not([data-theme="clasico"]) .stat-bar .h { background: var(--accent); }
html:not([data-theme="clasico"]) .stat-bar .a { background: var(--mid); }
html:not([data-theme="clasico"]) .disclaimer { color: var(--muted); border-top: 1px solid var(--line); }
html:not([data-theme="clasico"]) .disclaimer strong { color: var(--red); }
html:not([data-theme="clasico"]) .mode-switch { background: var(--surface-3); }
html:not([data-theme="clasico"]) .chip { background: var(--surface); }
html:not([data-theme="clasico"]) :is(.logo, .section-title img) { box-shadow: 0 0 0 1px var(--line); }

/* =====================================================================
   MENÚS: barra de abajo (teléfono) y barra lateral con las ligas (computadora)
   ===================================================================== */
.bottom-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
.bottom-dock .disclaimer { position: static; }
.bottom-nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px;
  font-size: 11px; font-weight: 700; color: var(--muted); text-decoration: none; min-height: 48px;
}
.bottom-nav a .ico { font-size: 19px; line-height: 1; }
.bottom-nav a.active { color: var(--accent); }
body.has-dock { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

.side-nav { display: none; }
@media (min-width: 1100px) {
  .bottom-nav { display: none; }
  body.has-dock { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .side-nav {
    display: block; position: fixed; top: 64px; bottom: 44px; left: 0; width: 260px; overflow-y: auto;
    padding: 14px 12px 20px; border-right: 1px solid var(--line); background: var(--surface);
  }
  body.has-dock main { margin-left: max(260px, calc((100vw - 980px) / 2)); }
  .side-nav .nav-main a, .side-nav .side-lg {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px;
  }
  .side-nav .nav-main a:hover, .side-nav .side-lg:hover { background: var(--overlay); }
  .side-nav .nav-main a.active, .side-nav .side-lg.active { background: var(--accent-soft, var(--neon-soft)); color: var(--accent); }
  .side-nav h4 { margin: 16px 10px 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
  .side-nav .side-lg { font-weight: 600; font-size: 13px; padding: 6px 10px; }
  .side-nav .side-lg img { width: 20px; height: 20px; object-fit: contain; background: #fff; border-radius: 5px; padding: 1px; }
}

/* Páginas de ligas */
.zone { margin-top: 18px; }
.lg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lg-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow); color: var(--text); text-decoration: none;
}
.lg-item img { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; flex: none; }
.lg-item .nm { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.lg-item .nm small { display: block; font-weight: 600; color: var(--muted); }
.star {
  border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; padding: 6px;
  color: var(--muted); border-radius: 8px; min-width: 36px; min-height: 36px;
}
.star.on { color: var(--yellow); }
.lg-head { display: flex; align-items: center; gap: 12px; }
.lg-head img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
.lg-head .star { margin-left: auto; }
.search { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; margin-top: 12px; }
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.theme-pick button {
  padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 700; cursor: pointer; text-align: left;
}
.theme-pick button.on { border-color: var(--accent); }
.theme-pick .sw { display: flex; gap: 4px; margin-top: 6px; }
.theme-pick .sw i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.1); }
.section-title a { color: inherit; text-decoration: none; }
.section-title .star { margin-left: auto; font-size: 18px; }
.bottom-nav a.active { box-shadow: inset 0 3px 0 var(--accent); font-weight: 800; }
html:not([data-theme="clasico"]) .switch span::after { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
html:not([data-theme="clasico"]) .switch span { background: var(--surface-3); }

/* =====================================================================
   DISEÑOS TRANQUILOS (pedido del usuario, 23/10/2026). Usan las mismas formas que "Niebla azul";
   solo cambian los colores. Claros: Salvia y arena, Lavanda suave, Océano sereno, Amanecer.
   Oscuros: Noche tranquila, Bosque nocturno.
   ===================================================================== */
html[data-theme="salvia"] {
  --bg: #F5F1EA;
  --surface: #FFFDF9;
  --surface-2: #F9F5EF;
  --surface-3: #ECE5DA;
  --line: #E4DCCF;
  --text: #3B3A33;
  --muted: #77736A;
  --neon: #6E9472;
  --neon-dim: #6E9472;
  --neon-soft: rgba(110, 148, 114, 0.14);
  --neon-glow: 0 0 0 transparent;
  --red: #C98B6B;
  --red-soft: rgba(201, 139, 107, 0.14);
  --mid: #D8C3A5;
  --yellow: #C4A056;
  --accent: #6E9472;
  --accent-soft: rgba(110, 148, 114, 0.11);
  --on-accent: #FFFFFF;
  --on-red: #FFFFFF;
  --soft-text: #4D4B42;
  --soft-text-2: #4D4B42;
  --overlay: rgba(59, 58, 51, 0.04);
  --overlay-dark: rgba(59, 58, 51, 0.05);
  --accent-border: rgba(110, 148, 114, 0.38);
  --red-border: rgba(201, 139, 107, 0.5);
  --neutral-bar: #C9BBA6;
  --draw: #E2D7C6;
  --form-e: #C9BBA6;
  --low-dim: #C98B6B;
  --topbar-bg: rgba(245, 241, 234, 0.9);
  --tabs-bg: rgba(245, 241, 234, 0.94);
  --disc-bg: #FFFDF9;
  --body-bg: linear-gradient(180deg, #EEE7DB 0, #F5F1EA 340px);
  --hero-bg: linear-gradient(135deg, #FFFDF9 0%, #F3EDE3 100%);
  --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(110, 148, 114, 0.11), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(216, 195, 165, 0.25), transparent 70%), #FFFDF9;
  --card-shadow: 0 1px 2px rgba(59, 58, 51, 0.05), 0 6px 18px rgba(59, 58, 51, 0.05);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  color-scheme: light;
}
html[data-theme="lavanda"] {
  --bg: #F4F2F8;
  --surface: #FFFFFF;
  --surface-2: #F8F7FB;
  --surface-3: #E8E4F1;
  --line: #E2DDEC;
  --text: #34304A;
  --muted: #716C86;
  --neon: #6E9E94;
  --neon-dim: #6E9E94;
  --neon-soft: rgba(110, 158, 148, 0.14);
  --neon-glow: 0 0 0 transparent;
  --red: #CF8A7E;
  --red-soft: rgba(207, 138, 126, 0.14);
  --mid: #C9C0E0;
  --yellow: #C4A056;
  --accent: #8B7FB8;
  --accent-soft: rgba(139, 127, 184, 0.11);
  --on-accent: #FFFFFF;
  --on-red: #FFFFFF;
  --soft-text: #47425E;
  --soft-text-2: #47425E;
  --overlay: rgba(52, 48, 74, 0.04);
  --overlay-dark: rgba(52, 48, 74, 0.05);
  --accent-border: rgba(139, 127, 184, 0.38);
  --red-border: rgba(207, 138, 126, 0.5);
  --neutral-bar: #BFB7D3;
  --draw: #DCD6EA;
  --form-e: #BFB7D3;
  --low-dim: #CF8A7E;
  --topbar-bg: rgba(244, 242, 248, 0.9);
  --tabs-bg: rgba(244, 242, 248, 0.94);
  --disc-bg: #FFFFFF;
  --body-bg: linear-gradient(180deg, #EAE6F2 0, #F4F2F8 340px);
  --hero-bg: linear-gradient(135deg, #FFFFFF 0%, #F0EDF7 100%);
  --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(139, 127, 184, 0.11), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(201, 192, 224, 0.25), transparent 70%), #FFFFFF;
  --card-shadow: 0 1px 2px rgba(52, 48, 74, 0.05), 0 6px 18px rgba(52, 48, 74, 0.05);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  color-scheme: light;
}
html[data-theme="oceano"] {
  --bg: #EEF5F5;
  --surface: #FFFFFF;
  --surface-2: #F4F9F9;
  --surface-3: #DDEBEB;
  --line: #D6E6E5;
  --text: #2C3E3F;
  --muted: #667A7B;
  --neon: #5E9C86;
  --neon-dim: #5E9C86;
  --neon-soft: rgba(94, 156, 134, 0.14);
  --neon-glow: 0 0 0 transparent;
  --red: #CF8A7E;
  --red-soft: rgba(207, 138, 126, 0.14);
  --mid: #A8D0CF;
  --yellow: #C4A056;
  --accent: #4F8A8B;
  --accent-soft: rgba(79, 138, 139, 0.11);
  --on-accent: #FFFFFF;
  --on-red: #FFFFFF;
  --soft-text: #3E5354;
  --soft-text-2: #3E5354;
  --overlay: rgba(44, 62, 63, 0.04);
  --overlay-dark: rgba(44, 62, 63, 0.05);
  --accent-border: rgba(79, 138, 139, 0.38);
  --red-border: rgba(207, 138, 126, 0.5);
  --neutral-bar: #AFC9C8;
  --draw: #D2E3E3;
  --form-e: #AFC9C8;
  --low-dim: #CF8A7E;
  --topbar-bg: rgba(238, 245, 245, 0.9);
  --tabs-bg: rgba(238, 245, 245, 0.94);
  --disc-bg: #FFFFFF;
  --body-bg: linear-gradient(180deg, #E1EEEE 0, #EEF5F5 340px);
  --hero-bg: linear-gradient(135deg, #FFFFFF 0%, #E9F3F3 100%);
  --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(79, 138, 139, 0.11), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(168, 208, 207, 0.25), transparent 70%), #FFFFFF;
  --card-shadow: 0 1px 2px rgba(44, 62, 63, 0.05), 0 6px 18px rgba(44, 62, 63, 0.05);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  color-scheme: light;
}
html[data-theme="amanecer"] {
  --bg: #FBF4EF;
  --surface: #FFFFFF;
  --surface-2: #FDF8F4;
  --surface-3: #F3E6DC;
  --line: #EEDFD3;
  --text: #45342B;
  --muted: #86705F;
  --neon: #7FA88A;
  --neon-dim: #7FA88A;
  --neon-soft: rgba(127, 168, 138, 0.14);
  --neon-glow: 0 0 0 transparent;
  --red: #C0675A;
  --red-soft: rgba(192, 103, 90, 0.14);
  --mid: #EBC9B4;
  --yellow: #C4A056;
  --accent: #C98B6B;
  --accent-soft: rgba(201, 139, 107, 0.11);
  --on-accent: #FFFFFF;
  --on-red: #FFFFFF;
  --soft-text: #5A463A;
  --soft-text-2: #5A463A;
  --overlay: rgba(69, 52, 43, 0.04);
  --overlay-dark: rgba(69, 52, 43, 0.05);
  --accent-border: rgba(201, 139, 107, 0.38);
  --red-border: rgba(192, 103, 90, 0.5);
  --neutral-bar: #DCC2B1;
  --draw: #F0DFD3;
  --form-e: #DCC2B1;
  --low-dim: #C0675A;
  --topbar-bg: rgba(251, 244, 239, 0.9);
  --tabs-bg: rgba(251, 244, 239, 0.94);
  --disc-bg: #FFFFFF;
  --body-bg: linear-gradient(180deg, #F6E8DE 0, #FBF4EF 340px);
  --hero-bg: linear-gradient(135deg, #FFFFFF 0%, #FAEFE7 100%);
  --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(201, 139, 107, 0.11), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(235, 201, 180, 0.25), transparent 70%), #FFFFFF;
  --card-shadow: 0 1px 2px rgba(69, 52, 43, 0.05), 0 6px 18px rgba(69, 52, 43, 0.05);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  color-scheme: light;
}
html[data-theme="noche"] {
  --bg: #1E2430;
  --surface: #262D3B;
  --surface-2: #2D3545;
  --surface-3: #364052;
  --line: #3A4456;
  --text: #E4E8F0;
  --muted: #9CA5B8;
  --neon: #8FC1A9;
  --neon-dim: #8FC1A9;
  --neon-soft: rgba(143, 193, 169, 0.14);
  --neon-glow: 0 0 0 transparent;
  --red: #D99A8C;
  --red-soft: rgba(217, 154, 140, 0.14);
  --mid: #B7A9D6;
  --yellow: #D8BD72;
  --accent: #8FC1A9;
  --accent-soft: rgba(143, 193, 169, 0.16);
  --on-accent: #1E2430;
  --on-red: #1E2430;
  --soft-text: #CBD2DE;
  --soft-text-2: #CBD2DE;
  --overlay: rgba(255, 255, 255, 0.04);
  --overlay-dark: rgba(0, 0, 0, 0.18);
  --accent-border: rgba(143, 193, 169, 0.45);
  --red-border: rgba(217, 154, 140, 0.5);
  --neutral-bar: #5E6880;
  --draw: #465068;
  --form-e: #5E6880;
  --low-dim: #D99A8C;
  --topbar-bg: rgba(30, 36, 48, 0.9);
  --tabs-bg: rgba(30, 36, 48, 0.94);
  --disc-bg: #262D3B;
  --body-bg: linear-gradient(180deg, #232A38 0, #1E2430 340px);
  --hero-bg: linear-gradient(135deg, #262D3B 0%, #222A37 100%);
  --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(143, 193, 169, 0.16), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(183, 169, 214, 0.14), transparent 70%), #262D3B;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  color-scheme: dark;
}
html[data-theme="bosque"] {
  --bg: #1A2421;
  --surface: #212D29;
  --surface-2: #283631;
  --surface-3: #31403A;
  --line: #34443D;
  --text: #E2EAE5;
  --muted: #98AAA1;
  --neon: #7FB29A;
  --neon-dim: #7FB29A;
  --neon-soft: rgba(127, 178, 154, 0.14);
  --neon-glow: 0 0 0 transparent;
  --red: #D99A8C;
  --red-soft: rgba(217, 154, 140, 0.14);
  --mid: #C7B892;
  --yellow: #D8BD72;
  --accent: #7FB29A;
  --accent-soft: rgba(127, 178, 154, 0.16);
  --on-accent: #1A2421;
  --on-red: #1A2421;
  --soft-text: #C8D4CD;
  --soft-text-2: #C8D4CD;
  --overlay: rgba(255, 255, 255, 0.04);
  --overlay-dark: rgba(0, 0, 0, 0.18);
  --accent-border: rgba(127, 178, 154, 0.45);
  --red-border: rgba(217, 154, 140, 0.5);
  --neutral-bar: #566A61;
  --draw: #40514A;
  --form-e: #566A61;
  --low-dim: #D99A8C;
  --topbar-bg: rgba(26, 36, 33, 0.9);
  --tabs-bg: rgba(26, 36, 33, 0.94);
  --disc-bg: #212D29;
  --body-bg: linear-gradient(180deg, #1F2B27 0, #1A2421 340px);
  --hero-bg: linear-gradient(135deg, #212D29 0%, #1E2925 100%);
  --match-hero-bg: radial-gradient(320px 160px at 0% 0%, rgba(127, 178, 154, 0.16), transparent 70%), radial-gradient(320px 160px at 100% 100%, rgba(199, 184, 146, 0.14), transparent 70%), #212D29;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --radius: 18px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  color-scheme: dark;
}

/* =====================================================================
   PÁGINA DE CADA LIGA: Tabla, Estadísticas, buscador y ficha de equipo · ⭐ Picks 80%+
   ===================================================================== */
.team-search { position: relative; }
.team-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 60vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px;
}
.team-results p { margin: 8px; }
.team-hit { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-weight: 700; min-height: 44px; }
.team-hit:hover, .team-hit:focus-visible { background: var(--overlay); }
.team-hit .logo, .team-hit .logo-fallback, .lg-table .logo, .lg-table .logo-fallback, .top-list .logo, .top-list .logo-fallback, .tm-line .logo, .tm-line .logo-fallback {
  width: 24px; height: 24px; min-width: 24px; font-size: 10px; flex: none;
}
.lg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lg-table th { font-size: 11px; color: var(--muted); font-weight: 700; padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.lg-table td { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table .tm { text-align: left; width: 100%; }
.lg-table .tm a { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.lg-table .tm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.lg-table .rk { color: var(--muted); font-weight: 700; width: 26px; }
.lg-table .pts { font-weight: 800; color: var(--accent); }
.fd {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 800; font-style: normal;
  margin-right: 2px; color: #fff;
}
.fd.win { background: var(--neon); color: var(--on-accent); }
.fd.draw { background: var(--neutral-bar); }
.fd.lose { background: var(--red); color: var(--on-red); }
@media (max-width: 560px) { .hide-xs { display: none; } }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (min-width: 720px) { .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-box { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.st-box .l { font-size: 12px; color: var(--muted); font-weight: 700; }
.st-box b { font-size: 20px; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-box .s { font-size: 11.5px; color: var(--muted); }
.top-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
@media (min-width: 720px) { .top-grid { grid-template-columns: 1fr 1fr; } }
.top-list h4 { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.top-list a { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; min-height: 40px; }
.top-list a:hover { background: var(--overlay); }
.top-list .rk { width: 16px; color: var(--muted); font-weight: 700; font-size: 12px; }
.top-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.top-list b { color: var(--accent); font-variant-numeric: tabular-nums; }
.team-card .lg-head .logo, .team-card .lg-head .logo-fallback { width: 48px; height: 48px; }
.team-card h3 { margin: 0; }
.tm-list { padding: 6px 10px; }
.tm-line { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); min-height: 44px; }
.tm-line:last-child { border-bottom: 0; }
.tm-line .dt { width: 52px; font-size: 12px; color: var(--muted); flex: none; }
.tm-line .ha { width: 40px; font-size: 11px; color: var(--muted); flex: none; }
.tm-line .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tm-line b { font-variant-numeric: tabular-nums; }
.top-link { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft, var(--neon-soft)); color: var(--accent); font-weight: 600; font-size: 14px; }
.big-rate { font-size: 24px; color: var(--accent); }
.top-fam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
@media (min-width: 720px) { .top-fam { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { .theme-pick { grid-template-columns: 1fr; } }
.update-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(118px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--accent-border); box-shadow: 0 8px 24px rgba(0,0,0,.18); font-weight: 600;
}
.update-bar .btn { margin: 0; }
.snap-note { margin: 8px 2px 0; }
.live-refresh { margin: 6px 0 0 8px; padding: 6px 12px; font-size: 13px; min-height: 36px; }
.live-updated.stale #live-ago { color: var(--red); }
.team-card p.form { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.exp { padding: 10px 0; border-top: 1px solid var(--line); }
.exp:first-of-type { border-top: 0; }
.exp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.exp-table { min-width: 0; width: 100%; font-size: 13px; margin-top: 6px; }
.exp-table td, .exp-table th { padding: 5px 4px; }

/* ===== 23/10/2026 (2): equipos favoritos, avisos, resumen, notas, momento, jugador, proyección ===== */
/* Colores del gráfico "Momento" (local / visitante). Azul y naranja calmos, validados para daltonismo
   en claro y en oscuro; el Clásico usa su verde y rojo. */
:root { --mom-h: var(--neon); --mom-a: var(--red); }
html:not([data-theme="clasico"]) { --mom-h: #3F6FB5; --mom-a: #C8642E; }
html[data-theme="noche"], html[data-theme="bosque"] { --mom-h: #5C8FD6; --mom-a: #CC6B33; }
@media (prefers-color-scheme: dark) {
  html[data-theme="niebla"], html:not([data-theme]) { --mom-h: #5C8FD6; --mom-a: #CC6B33; }
}

.team-link { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.team .team-star { min-width: 32px; min-height: 32px; padding: 4px; font-size: 18px; margin-top: -4px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 12px;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 14px;
}
.toast a { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* Ajustes: mis equipos y avisos */
.fav-teams { display: grid; gap: 6px; margin: 8px 0 12px; }
.fav-team { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); }
.fav-team .logo { width: 26px; height: 26px; object-fit: contain; }
.fav-team a, .fav-team span { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.push-note { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-border); }
.push-sub { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#push-box .btn { margin: 4px 8px 4px 0; }
#push-box .btn + .btn { margin-left: 0; }

/* Inicio: mis equipos */
.my-fx { display: grid; gap: 4px; min-width: 0; }

/* Notas (rating) */
.rt { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 7px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.rt.big { min-width: 50px; height: 38px; font-size: 19px; border-radius: 10px; }
.rt-high { background: var(--accent); color: var(--on-accent); }
.rt-mid { background: var(--surface-3); color: var(--text); }
.rt-low { background: var(--red-soft); color: var(--text); border: 1px solid var(--red-border); }
.rt-none { color: var(--muted); }
.rt-list li { grid-template-columns: auto 34px 1fr; align-items: center; }
.rt-list li > .small { grid-column: 3; }
.rt-list li.fig { box-shadow: inset 3px 0 0 var(--yellow); }
.rt-list .pname a, .plist a.pname { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.rp-ratings h4 { margin: 10px 0 4px; font-size: 14px; }

/* Resumen post-partido */
.report .rp-head { margin: 4px 0 6px; font-size: 16px; }
.rp-why { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.rp-fig { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin: 8px 0; }
.rp-fig a { color: inherit; }
.eval-row:not(.hit):not(.miss) .mark { background: var(--surface-3); }

/* Momento del partido */
.mom { width: 100%; height: auto; max-height: 190px; display: block; margin: 6px 0 4px; }
.mom .mh { fill: var(--mom-h); }
.mom .ma { fill: var(--mom-a); }
.mom .est { opacity: .42; }
.mom .base { stroke: var(--line); stroke-width: 1; }
.mom .tk { stroke: var(--muted); stroke-width: 1; }
.mom .tl { fill: var(--muted); font-size: 9px; }
.mom .mb:hover .hit { fill: var(--overlay); }
.mom-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 700; }
.mom-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mom-legend i.mh { background: var(--mom-h); }
.mom-legend i.ma { background: var(--mom-a); }

/* Plantel y jugador */
.sq-h { margin: 12px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sq-p { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); min-height: 44px; color: inherit; text-decoration: none; }
.sq-p img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; grid-row: span 2; background: var(--surface-3); }
.sq-p .nm { font-weight: 700; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.sq-p .muted { grid-column: 2; font-size: 11px; }
.player-hero .ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--surface-3); padding: 0; }
.player-hero .lg-head > div:nth-child(2) { flex: 1; min-width: 0; }
.ph-rt { display: grid; justify-items: center; gap: 2px; margin-left: auto; }
.pl-det { white-space: nowrap; }
.tm-line .rt { margin-left: 4px; }
.ps-btn { margin-top: 8px; width: 100%; }

/* Proyección */
.proj-table td.pj { font-weight: 700; font-size: 13px; min-width: 46px; }
.proj-table td.champ, .proj-table td.cups { background: color-mix(in srgb, var(--accent) calc(var(--a) * 38%), transparent); }
.proj-table td.rel { background: color-mix(in srgb, var(--red) calc(var(--a) * 42%), transparent); }
.proj-table .tm span { max-width: 34vw; }
@media (min-width: 700px) { .proj-table .tm span { max-width: 260px; } }
@media (max-width: 520px) {
  .proj-table { font-size: 13px; }
  .proj-table th, .proj-table td { padding: 7px 2px; }
  .proj-table td.pj { min-width: 38px; font-size: 12px; }
  .proj-table .tm span { max-width: 24vw; }
  .proj-table .logo, .proj-table .logo-fallback { width: 20px; height: 20px; }
  .proj-table th { font-size: 10px; }
}

/* ===== Cancha con las alineaciones ===== */
:root { --pitch-bg: #0f2a12; --pitch-line: rgba(255,255,255,.28); --chip-text: #fff; }
html:not([data-theme="clasico"]) { --pitch-bg: color-mix(in srgb, var(--accent) 16%, var(--surface)); --pitch-line: color-mix(in srgb, var(--text) 22%, transparent); }
.pitch { position: relative; width: 100%; max-width: 460px; margin: 6px auto; aspect-ratio: 68 / 105; border-radius: 14px; background: var(--pitch-bg); overflow: hidden; }
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch-lines * { fill: none; stroke: var(--pitch-line); stroke-width: .4; }
.pf-head { display: flex; justify-content: center; font-size: 13px; font-weight: 700; margin: 4px 0; }
.pf-head b { color: var(--muted); font-weight: 700; margin-left: 4px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dot.home { background: var(--mom-h); } .dot.away { background: var(--mom-a); }
.pf {
  position: absolute; transform: translate(-50%, -50%); width: 21%; max-width: 92px; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; border: 0; background: none;
  color: var(--text); font: inherit; cursor: pointer; z-index: 2;
}
.pf-n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; font-size: 13px;
  color: var(--chip-text); border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; flex: none;
}
.pf.home .pf-n, .pf-n.home { background: var(--mom-h); }
.pf.away .pf-n, .pf-n.away { background: var(--mom-a); }
.pf.gone .pf-n { opacity: .55; }
.pf.sel .pf-n, .pb-row.sel .pf-n { outline: 3px solid var(--yellow); outline-offset: 1px; }
.pf-name { font-size: 10.5px; font-weight: 700; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 1px 4px; border-radius: 5px; }
.pf-rt { position: absolute; top: 12px; right: 4%; min-width: 26px; height: 16px; font-size: 10px; padding: 0 3px; border-radius: 5px; }
.pf-bs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; min-height: 0; font-size: 9.5px; line-height: 1.15; }
.pf-b { background: color-mix(in srgb, var(--surface) 88%, transparent); border-radius: 4px; padding: 0 2px; font-weight: 700; white-space: nowrap; }
.pf .pf-bs { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 140%; }
.pf-press { position: absolute; left: 0; right: 0; height: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pf-press.home { top: 0; background: linear-gradient(to top, color-mix(in srgb, var(--mom-h) 26%, transparent), transparent 85%); }
.pf-press.away { bottom: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--mom-a) 26%, transparent), transparent 85%); }
.pf-detail { margin: 8px 0; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.pfd-head { display: flex; align-items: center; gap: 10px; }
.pfd-head > div { flex: 1; min-width: 0; }
.pfd-close { border: 0; background: transparent; color: var(--muted); font-size: 18px; min-width: 40px; min-height: 40px; cursor: pointer; }
.pfd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.pfd-grid > div { padding: 6px 8px; border-radius: 8px; background: var(--surface); display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.pfd-grid .l { color: var(--muted); }
.pb-team h4 { margin: 4px 0; font-size: 14px; }
.pb-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; margin-bottom: 4px; min-height: 44px; }
.pb-row .pf-n { width: 26px; height: 26px; font-size: 12px; }
.pb-row .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.pb-row .pf-bs { font-size: 11px; }
.pb-more summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }
@media (max-width: 380px) { .pf-n { width: 26px; height: 26px; font-size: 12px; } .pf-name { font-size: 9.5px; } }
@media (min-width: 700px) { .two .pb-team { min-width: 0; } }
html[data-theme="clasico"] .pf.home .pf-n, html[data-theme="clasico"] .pf-n.home { color: #000; }
.pf-pnote { text-align: center; font-size: 13px; font-weight: 700; margin: 4px 0; }
.pf-pnote.home { color: var(--mom-h); } .pf-pnote.away { color: var(--mom-a); } .pf-pnote.none { color: var(--muted); }
.pf-pnote b { color: var(--text); }
.pfd-grid b { white-space: nowrap; text-align: right; }

/* ===== Navegación nueva: Hoy · En vivo · Picks · Ligas · Más ===== */
.nb { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--red); color: var(--on-red); font-size: 10.5px; font-weight: 800; font-style: normal; line-height: 1; }
.bottom-nav a .ico { position: relative; }
.bottom-nav .nb { position: absolute; top: -6px; left: 62%; box-shadow: 0 0 0 2px var(--surface); }
.side-nav .nav-main .nb { margin-left: auto; }

.today-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin: 6px 0 10px; }
.today-head h2 { margin: 0; font-size: 24px; }
.today-head h2 span { font-size: 15px; color: var(--muted); font-weight: 700; text-transform: capitalize; margin-left: 4px; }
.today-head p { margin: 2px 0 0; }
.quick { display: flex; gap: 8px; }
.qbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
}
.qbtn b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--red-soft); color: var(--text); font-size: 12px; }
.qbtn.live { border-color: var(--red-border); }

.tr-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--card-shadow); }
.tr-lg { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 800; font-size: 13px; background: var(--surface-2); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.tr-lg img { width: 20px; height: 20px; object-fit: contain; background: #fff; border-radius: 5px; padding: 1px; }
.tr-lg span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-n { color: var(--muted); font-weight: 700; font-size: 12px; }
.tr-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 40px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  padding: 9px 10px; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 14px;
}
.tr-row:last-child { border-bottom: 0; }
.tr-row:hover { background: var(--overlay); }
.tr-row.is-live { background: var(--red-soft); }
.tr-t { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; }
.tr-t.live { color: var(--red); }
.tr-t.off { color: var(--muted); font-size: 11px; }
.tr-tm { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.tr-tm.h { justify-content: flex-end; text-align: right; }
.tr-tm .logo, .tr-tm .logo-fallback { width: 20px; height: 20px; flex: none; }
.tr-tm { overflow: hidden; }

.tr-sc, .tr-vs { text-align: center; font-variant-numeric: tabular-nums; }
.tr-vs { color: var(--muted); font-size: 12px; }
.tr-hint { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.tr-day { margin: 14px 2px 8px; font-size: 15px; text-transform: capitalize; }
.tr-done { margin-top: 8px; }
.tr-done > summary { cursor: pointer; padding: 10px 2px; font-weight: 700; color: var(--muted); }
.tr-fav { font-size: 12px; }
.today-more { margin: 14px 0; text-align: center; }
@media (max-width: 400px) {
  .tr-row { grid-template-columns: 42px minmax(0, 1fr) 34px minmax(0, 1fr); font-size: 13px; padding: 8px; }
  .tr-hint { display: none; }
  .tr-tm .logo, .tr-tm .logo-fallback { width: 18px; height: 18px; }
}

.more-list { display: grid; gap: 8px; }
.more-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; min-height: 56px; box-shadow: var(--card-shadow); }
.more-item .ico { font-size: 22px; }
.more-item .txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.more-item .go { font-size: 22px; color: var(--muted); }
.tr-tm .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-t { white-space: nowrap; }
.tr-t.live { color: var(--text); display: inline-flex; align-items: center; gap: 4px; }
.ld { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; animation: ldpulse 1.6s ease-in-out infinite; }
@keyframes ldpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ld { animation: none; } }
.tr-ev { padding: 0 10px 8px 62px; font-size: 12px; color: var(--muted); margin-top: -4px; border-bottom: 1px solid var(--line); background: var(--red-soft); }
.tr-group .tr-ev:last-child { border-bottom: 0; }
.tr-row.is-live:has(+ .tr-ev) { border-bottom: 0; }
@media (max-width: 400px) { .tr-ev { padding-left: 56px; } }

/* ===== 23/10 (noche 2): fechas, ayer, rankings, cambios, compartir, árbitros, comparador, bienestar ===== */
/* Tamaño de letra (⚙️): agranda o achica toda la pantalla */
:root { --ui-zoom: 1; }
main#app, .bottom-nav, .side-nav { zoom: var(--ui-zoom); }

.date-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 10px; }
.dn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 6px 4px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 800; font-size: 14px; text-decoration: none; cursor: pointer;
}
.dn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dn.cal span { font-size: 13px; }
.dn.cal input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.yday { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--card-shadow); }
.yd-big { font-size: 26px; font-weight: 900; min-width: 64px; text-align: center; color: var(--accent); font-variant-numeric: tabular-nums; }
.yd-big.low { color: var(--red); }
.yd-ic { font-size: 24px; }
.yd-t { display: grid; gap: 1px; min-width: 0; }
.tr-hint.low { color: var(--text); background: var(--red-soft); }

.rank-chips { margin: 6px 0; }
.rank-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.rank-list a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--surface-2); color: var(--text); text-decoration: none; min-height: 48px; }
.rank-list .rk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 900; font-size: 13px; flex: none; }
.rank-list .rn { flex: 1; min-width: 0; display: grid; }
.rank-list .rn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rank-list .rv { font-weight: 900; font-size: 17px; color: var(--accent); font-variant-numeric: tabular-nums; }

.chg-panel { border-left: 4px solid var(--yellow); }
.chg-why { margin: 4px 0 8px; padding-left: 4px; list-style: none; display: grid; gap: 4px; }
.chg-list { display: grid; gap: 4px; margin: 6px 0; }
.chg-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.chg-ba { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chg-ba s { color: var(--muted); }
.chg-ba .up { color: var(--accent); }
.chg-ba .down { color: var(--red); }
.chg-tag { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); color: var(--text); white-space: nowrap; }

.pick-r { display: inline-flex; align-items: center; gap: 6px; }
.share-btn { border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; min-width: 40px; min-height: 40px; font-size: 17px; cursor: pointer; color: var(--text); }
.share-btn:disabled { opacity: .5; }

.ref-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-height: 52px; }
.ref-row:last-child { border-bottom: 0; }
.ref-row .rn { display: grid; min-width: 0; }
.ref-row .rn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-row .rv { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.ref-eff { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); }
.ref-eff.up, .ref-eff-big.up b { background: var(--red-soft); color: var(--text); }
.ref-eff.down { background: var(--accent-soft); color: var(--text); }
.ref-eff-big { font-size: 16px; margin: 10px 0 4px; }
.ref-eff-big b { padding: 2px 8px; border-radius: 8px; }

.cmp-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.cmp-pick span { color: var(--muted); font-weight: 700; margin-top: 12px; }
.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; margin-bottom: 6px; }
.cmp-head a { display: grid; justify-items: center; gap: 4px; color: var(--text); text-decoration: none; min-width: 0; }
.cmp-head b { overflow-wrap: anywhere; }
.cmp-r { display: grid; grid-template-columns: 1fr minmax(110px, auto) 1fr; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cmp-r .l { text-align: center; color: var(--muted); font-size: 13px; }
.cmp-r .v { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 8px; }
.cmp-r .v.best { background: var(--accent-soft); color: var(--accent); }

.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 16px; }
.modal { max-width: 420px; width: 100%; background: var(--surface); color: var(--text); border-radius: 18px; padding: 18px; border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.modal-btns .btn + .btn { margin-left: 0; }
.zoom-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.zoom-pick button { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); color: var(--text); font-weight: 700; cursor: pointer; min-height: 48px; }
.zoom-pick button.on { border-color: var(--accent); }
.zoom-pick button span { font-weight: 900; }
.jr-pause { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-pause .btn + .btn { margin-left: 0; }
.help-links { padding-left: 18px; display: grid; gap: 6px; }
.help-links a { color: var(--accent); font-weight: 700; }
.hero.paused { margin-top: 20px; }
.rep-text { min-height: 120px; resize: vertical; font: inherit; }
.res-head { display: grid; gap: 2px; color: var(--text); text-decoration: none; margin-bottom: 6px; }
body.has-dock { padding-bottom: calc(110px * var(--ui-zoom) + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) { body.has-dock { padding-bottom: calc(52px + env(safe-area-inset-bottom)); } }
.cmp-r .fd { width: 17px; height: 17px; font-size: 9.5px; margin: 0 1px; }
.cmp-r .v .fd:first-child { margin-left: 0; }
.cmp-r > .v:has(.fd) { white-space: nowrap; padding: 2px 0; }

/* 📈 "acertó X% (N picks)" debajo de cada pick */
.rec-line { display: block; margin-top: 6px; color: var(--soft-text-2, var(--muted)); line-height: 1.35; overflow-wrap: anywhere; }
.rec-line:empty { display: none; }

/* 🏅 Ranking de ligas */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rk-pos { font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rk-logo { width: 28px; height: 28px; object-fit: contain; }
.rk-txt { display: grid; gap: 3px; min-width: 0; }
.rk-txt a { color: var(--text); text-decoration: none; }
.rk-txt .pbar-track { display: block; margin-top: 2px; }
.rk-txt .pbar-fill { display: block; }
.rk-val { display: grid; text-align: right; }
.rk-big { font-size: 1.25em; font-variant-numeric: tabular-nums; }

/* 👟 Rankings de jugadores */
.pr-row { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; min-height: 56px; }
.rank-list li:last-child .pr-row { border-bottom: 0; }
.pr-photo { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--surface-3); display: grid; place-items: center; }
.pr-photo::before { content: attr(data-ini); font-size: 13px; font-weight: 800; color: var(--muted); }
.pr-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-txt { display: grid; gap: 2px; min-width: 0; }
.pr-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-txt .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-team { display: inline-block; width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; margin-right: 4px; }
.pr-row .rk-val { white-space: nowrap; }

/* 🔮 Pronóstico en vivo */
.ip-head { font-size: 1.02em; line-height: 1.45; margin: 4px 0 8px; }
.ip-cols, .ip-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px 16px 44px 64px; align-items: center; gap: 6px; }
.ip-cols { margin-top: 6px; }
.ip-cols span:nth-child(2), .ip-cols span:nth-child(4) { text-align: right; }
.ip-row { padding: 6px 0; border-bottom: 1px solid var(--line); }
.ip-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-b, .ip-n { text-align: right; font-variant-numeric: tabular-nums; }
.ip-up { color: var(--neon); font-size: 11px; text-align: center; }
.ip-down { color: var(--red); font-size: 11px; text-align: center; }
.ip-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ip-bar span { display: block; height: 100%; width: var(--w); background: var(--neon); border-radius: 999px; }
@media (max-width: 360px) { .ip-cols, .ip-row { grid-template-columns: minmax(0, 1fr) 36px 14px 40px; } .ip-bar, .ip-cols span:last-child { display: none; } }
.ip-eq { text-align: center; }
.rank-row .rk-txt > a { display: inline; padding: 0; margin: 0; min-height: 0; background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--text); font-size: inherit; }