/* Estilos propios de Fútbol Stats (sobre shared/css/base.css) */
:root { --accent: #0f7a4a; --p1: #1f8f5c; --px: #8e8e98; --p2: #d9662b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #30c27a; } }
:root[data-theme="dark"] { --accent: #30c27a; }

.logo { object-fit: contain; flex: none; }

/* Clasificación */
.standings td.pos { position: relative; width: 26px; font-weight: 600; color: var(--muted); }
.standings td.pos::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--zone); }
.standings tr[data-href] { cursor: pointer; }
.standings td:last-child { font-size: 15px; }
.tcell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tcell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.notes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 4px 12px; font-size: 12px; color: var(--muted); }
.notes i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* Partidos */
.datebar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.datebar-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-transform: capitalize; }
.match { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 2px; }
.match .teams { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.team { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
.team .tname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.team.winner .tname, .team.winner .score { font-weight: 700; }
.score { font-variant-numeric: tabular-nums; color: var(--text); min-width: 16px; text-align: right; }
.match .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; min-width: 92px; }
.live { color: var(--bad); font-weight: 700; }
.live::before { content: "● "; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.probmini { width: 92px; }
.probmini .stack { height: 8px; margin: 0; }
.probmini .stack b { display: none; }
.stack .p1 { background: var(--p1); } .stack .px { background: var(--px); } .stack .p2 { background: var(--p2); }

/* Forma */
.form { display: inline-flex; gap: 3px; vertical-align: middle; }
.form i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font: 700 11px/1 var(--font); color: #fff; background: var(--px); }
.form .r-W { background: var(--good); } .form .r-L { background: var(--bad); } .form .r-D { background: #9a9aa3; }
.form-pair { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.form-pair > span { display: flex; align-items: center; gap: 6px; }
.res-row { position: relative; }
.res-row::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; }
.res-row.r-W::before { background: var(--good); } .res-row.r-L::before { background: var(--bad); } .res-row.r-D::before { background: #9a9aa3; }

/* Detalle partido */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.scoreboard > a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.scoreboard .big { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: center; }
.scoreboard .big i { font-style: normal; color: var(--muted); margin: 0 6px; }
.scoreboard .big small { font-size: 13px; font-weight: 500; }
.scoreboard .full { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; text-transform: capitalize; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; }
.timeline li.a { flex-direction: row-reverse; text-align: right; }
.timeline .min { min-width: 34px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Equipo */
.team-head { display: flex; gap: 14px; align-items: center; }
.team-head h2 { margin: 0 0 2px; font-size: 20px; }
.team-head p { margin: 0 0 6px; }
.pname { display: flex; flex-direction: column; }
.pname small { color: var(--muted); }

/* Comparar / predicción */
.pickers { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-bottom: 12px; }
.pick { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pick small { color: var(--muted); padding-left: 4px; }
.pick.a .select { border-left: 3px solid var(--c1); }
.pick.b .select { border-left: 3px solid var(--c2); }
.vs-sep { color: var(--muted); font-weight: 700; padding-bottom: 10px; }
.players-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.players-head > div { display: flex; flex-direction: column; gap: 3px; }
.players-head > div:last-child { align-items: flex-end; text-align: right; }
.players-head small { color: var(--muted); }
.h2h { list-style: none; margin: 0; padding: 0; }
.h2h a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 14px; }

.pred-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 6px; }
.pred-head > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.pred-head .xg { flex-direction: row; gap: 8px; }
.pred-head .xg b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pred-head .xg small { color: var(--muted); max-width: 64px; line-height: 1.15; }
.table.kv { margin: 6px 0 12px; }

.pred-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t w" "p p"; gap: 6px 10px; padding: 10px 2px; }
.pr-teams { grid-area: t; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pr-teams span { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-when { grid-area: w; text-align: right; font-size: 12.5px; text-transform: capitalize; }
.pr-when small { font-weight: 700; color: var(--text); font-size: 13px; }
.pr-probs { grid-area: p; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pr-probs span { display: flex; justify-content: space-between; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 13px; }
.pr-probs b { color: var(--text); font-variant-numeric: tabular-nums; }
.pr-probs .fav { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.pr-probs .fav b { color: var(--accent); }