:root{
  --bg: #0a0b0d;
  --panel: #121317;
  --panel-2: #17191e;
  --border: #24262d;
  --border-soft: #1b1d22;
  --divider: #2e3039;       
  --row-alt: #16181d;       
  --header-band: #20242c;   
  --header-band-border: #3a3d47;
  --cup-band: #241d10;      
  --cup-band-border: #5c4416;
  --text: #eae7e1;
  --text-dim: #90939c;
  --text-faint: #7c8089; 

  --accent: #e3a53d;        
  --accent-dim: #7a5e28;

  --good: #4ade80;          
  --bad: #f0645f;           

  --local: #5b9bd9;         
  --away: #d9705b;          
  --matchtotal: #9c8fd9;    
  --bothscore: #4fbfae;     

  --logo-bg: #eeece6;       

  --ball: #eae7e1;          
  --corner: #e2823f;        
  --card: #e8d23a;          
  --card-red: #d6543f;      

  --shadow: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--bg); color:var(--text); margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.5;
}
::selection{ background:var(--accent); color:#1a1305; }
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
img{ max-width:100%; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.dir{font-weight:700}
.dir.o{color:var(--good)}
.dir.u{color:var(--bad)}

.site-header{
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,var(--panel),var(--bg));
}
.site-inner{
  max-width:760px;margin:0 auto;padding:22px 20px 18px;
  display:flex;align-items:flex-start;justify-content:flex-start;gap:20px;flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; }
.mark{ flex-shrink:0; display:block; }
.wordmark{ display:flex; align-items:baseline; gap:2px; }
.wordmark .t1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.wordmark .t2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.wordmark.small .t1,.wordmark.small .t2{font-size:1.05rem}
.tagline{font-size:.82rem;color:var(--text-dim);margin:2px 0 0}

.header-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.donate-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--accent-dim);background:var(--panel-2);color:var(--accent);
  font-weight:700;font-size:.78rem;padding:7px 16px;border-radius:999px;white-space:nowrap;flex-shrink:0;
  min-height:44px;
}
.donate-btn svg{width:14px;height:14px;flex-shrink:0}
.donate-btn:hover{background:var(--panel);border-color:var(--accent)}
.info-wrap{position:relative}
.icon-btn{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{color:var(--text);border-color:var(--local);background:var(--panel)}
.popover{
  position:absolute;top:26px;right:0;z-index:10;width:280px;
  background:var(--panel);border:1px solid var(--border-soft);border-radius:10px;
  padding:12px 14px;font-size:.78rem;color:var(--text-dim);box-shadow:var(--shadow);
}
#info-pop{position:fixed;right:auto;max-width:calc(100vw - 24px)}
#nav-pop{position:fixed;right:auto;max-width:calc(100vw - 24px)}
.nav-menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  font-size:.86rem;font-weight:600;color:var(--text);
}
.nav-menu-item:hover{background:var(--panel-2)}
.nav-menu-item svg{width:18px;height:18px;flex-shrink:0;color:var(--text-dim)}
.nav-menu-item.disabled{color:var(--text-faint);cursor:default}
.nav-menu-item.disabled:hover{background:none}
.nav-menu-item.disabled svg{color:var(--text-faint)}
.nav-soon{
  margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:2px 7px;flex-shrink:0;
}

/* Con la marca completa (logomark+wordmark+tagline) + Donar/i/menu, el
   header no entra en una sola fila en movil -- el tagline es lo que
   ensancha .brand de mas (ya documentado como bug conocido). Bajo 640px
   se muestra solo el logomark (sin wordmark ni tagline) y se ajustan los
   espacios para que los 3 controles quepan siempre junto al logo. */
@media (max-width:640px){
  .tagline{display:none}
  .wordmark{display:none}
  .site-inner{align-items:center;gap:12px;padding-left:16px;padding-right:16px}
  .header-right{gap:6px}
  .donate-btn{padding:7px 12px}
}

.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 12px}
.legend-cell{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-dim)}
.tag-mini{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:16px;
  border-radius:4px;font-size:.6rem;font-weight:800;color:#0a0b0d;padding:0 4px;flex-shrink:0;
}
.popover-hr{border:none;border-top:1px solid var(--border-soft);margin:0 0 12px}
.legend-list{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.legend-list-item{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--text-dim)}
.legend-list-item .dir{width:16px;flex-shrink:0;text-align:center}
.star-inline{width:12px;height:12px;color:var(--accent);flex-shrink:0}
.popover-rule{font-size:.76rem;color:var(--text-dim);margin:0;line-height:1.55}

.tabbar-row{
  max-width:760px;margin:0 auto;padding:18px 20px 0;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.tabs{display:flex;gap:22px;position:relative}
.tab-btn{color:var(--text-dim);font-weight:700;font-size:.92rem;padding:6px 0 12px;position:relative}
.tab-btn.active{color:var(--text)}
.tab-underline{
  position:absolute;bottom:0;left:0;height:2px;width:1px;background:var(--accent);border-radius:2px;
  transform-origin:left center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.tab-date{font-size:.78rem;color:var(--text-dim);margin:0}
.tabbar-rule{border-bottom:1px solid var(--border-soft);max-width:760px;margin:0 auto 22px;padding:0 20px}

.persistent-legend{
  display:none;
  max-width:760px;margin:14px auto 0;padding:10px 20px;
  align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
  background:var(--panel-2);
}
@media (min-width:640px){ .persistent-legend{display:flex} }
.pl-group{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--text-dim)}
.pl-sep{width:1px;height:16px;background:var(--border)}

.compact-legend{
  display:flex;align-items:center;gap:14px;
  padding:10px 20px;border-bottom:1px solid var(--border-soft);
  background:var(--panel-2);
}
@media (min-width:640px){ .compact-legend{display:none} }
.cl-item{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-dim)}

.ad-banner{
  max-width:760px;margin:0 auto 20px;padding:0 20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ad-banner .ad-label{
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);
}
.ad-banner .ad-slot{width:100%;max-width:300px;min-height:250px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
@media (min-width:640px){ .ad-banner .ad-slot{max-width:728px;min-height:250px} }

.side-rail{
  display:none;
  position:fixed; top:110px;
  width:300px; min-height:250px;
}
.side-rail:empty{display:none!important}
#side-rail-left{ left:calc(50% - 724px); }
#side-rail-right{ left:calc(50% + 424px); }
@media (min-width:1520px){
  .side-rail{display:block}
}

.sort-toolbar{
  position:sticky;top:0;z-index:15;background:var(--bg);
  max-width:760px;margin:0 auto 14px;padding:10px 20px;
  border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.sort-toolbar-label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.sort-order-group{display:flex;align-items:center;gap:10px;margin-left:auto}
.sort-control{position:relative}
.sort-btn{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  border-radius:8px;padding:7px 12px;font-size:.82rem;font-weight:600;
  min-height:44px;
}
.sort-btn svg{width:15px;height:15px;flex-shrink:0}
.sort-btn svg:first-child{color:var(--text-dim)}
.sort-btn .sort-chev{width:10px;height:10px;color:var(--text-faint)}
.sort-btn:hover{border-color:var(--local)}
.sort-pop{top:calc(100% + 8px);width:200px;padding:6px}
.sort-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 8px;border-radius:7px;font-size:.84rem;color:var(--text);
}
.sort-opt:hover{background:var(--panel-2)}
.sort-opt .radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--text-faint);flex-shrink:0;position:relative}
.sort-opt[aria-pressed="true"] .radio{border-color:var(--accent)}
.sort-opt[aria-pressed="true"] .radio::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:var(--accent)}
.sort-opt-txt small{display:block;color:var(--text-dim);font-size:.72rem;font-weight:400;margin-top:1px}

.filter-pop{left:0;width:280px;padding:10px}
.sort-btn.filter-active{border-color:var(--accent-dim);background:var(--panel-2);color:var(--accent)}
.sort-btn.filter-active svg{color:var(--accent)}
.filter-clear{
  display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  background:var(--accent);margin-left:2px;flex-shrink:0;
}
.sort-btn.filter-active .filter-clear svg{width:9px;height:9px;color:#1a1305}
.filter-step-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:4px 6px 8px}
.filter-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 4px 10px}
.filter-cat{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:8px;
  background:var(--panel-2);border:1px solid transparent;font:inherit;cursor:pointer;color:var(--text-dim);
}
.filter-cat:hover{border-color:var(--divider)}
.filter-cat.active{border-color:var(--accent-dim);background:rgba(227,165,61,.1)}
.filter-cat span.lbl{font-size:.64rem;font-weight:600}
.filter-opts{display:flex;flex-direction:column;gap:4px;padding:2px 4px 4px;max-height:260px;overflow-y:auto}
.filter-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:7px 8px;border-radius:7px;background:none;border:none;font:inherit;cursor:pointer;
  color:var(--text);font-size:.84rem;
}
.filter-opt:hover{background:var(--panel-2)}
.filter-opt.active{background:rgba(227,165,61,.12)}
.filter-opt .radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--text-faint);flex-shrink:0;position:relative}
.filter-opt.active .radio{border-color:var(--accent)}
.filter-opt.active .radio::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:var(--accent)}
.filter-back{
  display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-dim);
  background:none;border:none;font:inherit;cursor:pointer;padding:6px 4px 10px;width:100%;
}
.filter-back svg{width:13px;height:13px;flex-shrink:0}
.filter-back:hover{color:var(--text)}
.filter-count-line{max-width:760px;margin:0 auto 14px;padding:0 20px;font-size:.76rem;color:var(--text-dim)}
.filter-count-line b{color:var(--text);font-family:'IBM Plex Mono',monospace}
.chip.filter-hit{outline:2px solid var(--accent);outline-offset:-2px}

.country-tag{font-size:.74rem;color:var(--text-dim);font-weight:400;margin-left:6px}

.highlights-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.highlights-wrap:empty{display:none}
.highlights{
  border:1px solid var(--accent-dim);border-radius:12px;background:var(--panel);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;
}
.highlights.fade-in{animation:highlightsFadeIn .22s ease}
@keyframes highlightsFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .highlights.fade-in{animation:none} }
.highlights-head{padding:16px 18px 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.highlights-head h3{font-size:.9rem;font-weight:800;color:var(--text);margin:0;display:flex;align-items:center;gap:7px}
.highlights-head h3 svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.highlights-head p{font-size:.76rem;color:var(--text-dim);margin:0}
.highlights-scroll{position:relative}
.highlights-row{
  display:flex;gap:12px;padding:14px 18px 18px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.highlights-row::-webkit-scrollbar{display:none}
.hl-card{
  flex:1 1 0;min-width:200px;background:var(--panel-2);border:1px solid var(--border-soft);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;
  text-decoration:none;color:inherit;transition:border-color .15s;scroll-snap-align:start;
}
.hl-card:hover{border-color:var(--accent-dim)}
.hl-card .chip-wrap{align-self:flex-start}
.hl-league{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}
.hl-league img{width:13px;height:13px;border-radius:50%;background:var(--logo-bg);flex-shrink:0}
.hl-teams{display:flex;flex-direction:column;gap:2px}
.hl-teams .tm{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--text)}
.hl-teams .tm img{width:14px;height:14px;border-radius:50%;background:var(--logo-bg);flex-shrink:0}
.hl-time{font-size:.7rem;color:var(--text-dim)}
.hl-time .live{color:var(--accent);font-weight:700}
.hl-time .in-play{font-size:.7rem}
.hl-time .sep{color:var(--text-faint)}
.hl-time .score{color:var(--text);font-weight:700}
.highlights-fade{
  position:absolute;top:14px;bottom:18px;right:0;width:28px;pointer-events:none;
  background:linear-gradient(to right, transparent, var(--panel));
  border-radius:0 10px 10px 0;
}

.league-grid{max-width:760px;margin:0 auto;padding:0 20px 60px;display:flex;flex-direction:column;gap:28px}
.league-group{ }
.panel{
  background:var(--panel);border:1px solid var(--divider);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;gap:8px;padding:0;
  background:var(--header-band);border-bottom:2px solid var(--header-band-border);
  width:100%;text-align:left;
}
.panel-head-inner{display:flex;align-items:center;gap:8px;padding:12px 16px;flex:1;min-width:0}
.panel-head img{height:32px;width:32px;object-fit:contain;flex-shrink:0}
.panel-head img.logo-bg{background:var(--logo-bg);border-radius:50%;padding:3px}
.panel-head h3{font-size:.86rem;font-weight:700;color:var(--text);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.league-count{
  font-size:.72rem;font-weight:600;color:var(--text-dim);
  background:var(--panel-2);border:1px solid var(--border);border-radius:999px;
  padding:2px 8px;flex-shrink:0;
}
.chevron{color:var(--text-dim);flex-shrink:0;margin-right:14px;transition:transform .18s}
.chevron.collapsed{transform:rotate(-90deg)}
.cup-section-label{
  display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin:0 0 -14px;padding:0 2px;
}
.cup-section-label svg{width:14px;height:14px;flex-shrink:0}
.panel.cup .panel-head{background:var(--cup-band);border-bottom-color:var(--cup-band-border)}

.match-block{
  border-bottom:1px solid var(--divider);scroll-margin-top:74px;
  cursor:pointer;position:relative;transition:background-color .12s ease;
}
.match-block:hover{background:var(--panel-2)}
.match-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background-color .12s ease}
.match-block:hover::before{background:var(--accent)}
.match-block:last-child{border-bottom:none}
.match-block:nth-child(even){background:var(--row-alt)}
.match-row{
  display:flex;align-items:center;gap:12px;padding:12px 16px 8px;
}
.row-status{width:64px;flex-shrink:0;font-size:.76rem;color:var(--text-dim);text-align:left}
.row-status .live{color:var(--accent);font-weight:700}
.in-play{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.68rem;letter-spacing:.02em;white-space:nowrap}
.in-play-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim);flex-shrink:0;animation:in-play-pulse 1.6s ease-in-out infinite}
@keyframes in-play-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .in-play-dot{animation:none} }
.row-status-stack{display:flex;flex-direction:column;gap:1px}
.in-play-sub{font-size:.66rem;color:var(--text-dim)}
.row-teams{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-teams .tm{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-teams img{height:15px;width:15px;object-fit:contain;flex-shrink:0;background:var(--logo-bg);border-radius:50%;padding:1.5px}
.row-score{flex-shrink:0;text-align:right;font-size:.85rem;font-weight:700;color:var(--text-dim)}
.row-score div{line-height:1.65}
.row-score .finished{color:var(--text)}
.row-score .live-score{color:var(--text)}

.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:0 16px 14px}
.chip-row:empty{display:none}
.chip-toggle{
  order:99;
  display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:700;color:var(--text-dim);
  border:1px dashed var(--border);border-radius:6px;
  padding:8px 11px;
  min-height:44px;
}
.chip-toggle .chevron{color:var(--text-dim);flex-shrink:0;margin-right:0}
.chip-toggle:hover{color:var(--text);border-color:var(--text-faint)}

.chip-wrap{position:relative;display:inline-flex}
.chip{
  display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;
  font-size:.68rem;font-weight:600;box-shadow:0 0 0 1px var(--border) inset;
  white-space:nowrap;
}
.chip .tag{
  font-weight:800;font-size:.62rem;padding:3px 6px;display:flex;align-items:center;
  letter-spacing:.01em;color:#0a0b0d;
}
.chip .body{background:var(--panel-2);color:var(--text);padding:3px 6px;display:flex;align-items:center;gap:4px}
.chip .rate{color:var(--text-dim);font-weight:500;padding-left:4px;margin-left:2px;border-left:1px solid var(--border)}
.chip .rate.tier-strong{color:var(--accent);font-weight:700}
.chip .body svg{width:18px;height:18px;fill:none;stroke-width:1.8;flex-shrink:0}
.tag-local{background:var(--local)}
.tag-away{background:var(--away)}
.tag-mt{background:var(--matchtotal)}
.tag-aa{background:var(--bothscore)}

@media (max-width:640px){
  .chip-row.expanded{flex-direction:column;align-items:flex-start;gap:6px}
  .chip-row.expanded .chip-toggle{width:100%;justify-content:center}
}
.icon-ball .ball-base{fill:var(--ball);stroke:none}
.icon-ball .ball-patch{fill:var(--panel-2);stroke:none}
.icon-corner .corner-pole{stroke:var(--corner)}
.icon-corner .corner-flag{fill:var(--corner);stroke:none}
.icon-card .card-back{fill:var(--card-red)}
.icon-card .card-front{fill:var(--card)}

.hit-badge{
  position:absolute;top:-5px;right:-5px;z-index:1;
  width:12px;height:12px;border-radius:50%;
  background:var(--bg);box-shadow:0 0 0 1px var(--border);
  display:flex;align-items:center;justify-content:center;
}
.hit-badge svg{width:8px;height:8px;fill:var(--accent);stroke:none}

.empty-state{
  border:1px dashed var(--border);border-radius:12px;background:var(--panel-2);
  padding:24px;font-size:.85rem;color:var(--text-dim);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}

.retry-btn, .empty-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:8px;
  border:1px solid var(--accent-dim);
  background:var(--panel);color:var(--accent);
  font-weight:700;font-size:.78rem;
  transition:background .15s,border-color .15s,opacity .15s;
}
.retry-btn:hover:not(:disabled), .empty-cta:hover{background:var(--panel-2);border-color:var(--accent)}
.retry-btn:disabled{opacity:.65;cursor:default}
.retry-btn svg, .empty-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.retry-btn.is-loading svg{animation:retry-spin .8s linear infinite;transform-origin:50% 50%}
@keyframes retry-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .retry-btn.is-loading svg{animation:none} }

/* Pagina de detalle de liga (liga.html) -- mockup "Tabla de Posiciones"
   aprobado 2026-09-17. */
.league-head{display:flex;align-items:center;gap:12px;margin:14px 0 20px}
.league-head img{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.league-head h1{font-size:1.3rem;font-weight:800;margin:0}
.league-head p{font-size:.82rem;color:var(--text-dim);margin:2px 0 0}

.page-tabs{display:flex;gap:22px;position:relative;border-bottom:1px solid var(--border-soft);margin-bottom:18px}
.page-tab{color:var(--text-dim);font-weight:700;font-size:.92rem;padding:6px 0 12px;position:relative}
.page-tab.active{color:var(--text)}
.page-tab-underline{position:absolute;bottom:0;left:0;height:2px;width:1px;background:var(--accent);border-radius:2px;transform-origin:0 0;transition:transform .25s cubic-bezier(.4,0,.2,1)}

.standings-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.standings-note{font-size:.78rem;color:var(--text-faint)}
.group-select{position:relative}
.group-select-btn{
  display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:10px;padding:9px 14px;font-size:.84rem;font-weight:600;color:var(--text);min-height:44px;
}
.group-select-btn:hover{border-color:var(--accent-dim)}
.group-select-btn svg{color:var(--text-dim);flex-shrink:0;transition:transform .18s}
.group-select-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.group-select-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:220px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow);overflow:hidden;
}
.group-select-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;font-size:.84rem;font-weight:600;color:var(--text-dim);width:100%;text-align:left}
.group-select-item:hover{background:var(--panel)}
.group-select-item.active{color:var(--accent)}
.group-select-item.active svg{display:inline-block}
.group-select-item svg{width:14px;height:14px;display:none;flex-shrink:0}

.standings-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
table.standings{border-collapse:collapse;width:100%;min-width:520px}
table.standings th{
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);
  text-align:center;padding:10px 8px;background:var(--header-band);border-bottom:1px solid var(--header-band-border);
  white-space:nowrap;
}
table.standings th.th-team{text-align:left}
table.standings td{padding:10px 8px;text-align:center;font-size:.84rem;border-bottom:1px solid var(--border-soft)}
table.standings tr:last-child td{border-bottom:none}
table.standings tr:nth-child(even) td{background:var(--row-alt)}
table.standings td.td-pos{font-weight:700;color:var(--text-dim);width:28px}
table.standings td.td-team{text-align:left;font-weight:600;white-space:nowrap}
.td-team-inner{display:flex;align-items:center;gap:8px}
table.standings td.td-team img{width:20px;height:20px;object-fit:contain;flex-shrink:0;background:var(--logo-bg);border-radius:50%;padding:1.5px}
table.standings td.td-pts{font-weight:800;color:var(--text)}
table.standings td.td-dif{font-weight:700}
table.standings td.td-dif.pos{color:var(--good)}
table.standings td.td-dif.neg{color:var(--bad)}
/* Pos + Equipo fijos al hacer scroll horizontal en movil */
table.standings th.sticky,table.standings td.sticky{position:sticky;background-color:var(--panel)}
table.standings th.sticky{background-color:var(--header-band)}
table.standings tr:nth-child(even) td.sticky{background-color:var(--row-alt)}
table.standings th.th-pos,table.standings td.td-pos{left:0}
table.standings th.th-team,table.standings td.td-team{left:28px}

/* Tendencias por liga -- version con 3 selectores independientes (mockup
   "Tendencias por liga -- 3 dropdowns" aprobado 2026-09-17: Contexto/Tipo/
   Linea, cada uno un group-select suelto, en vez de 1 dropdown con 23
   opciones agrupadas en una lista plana). */
.trend-filter-row{display:flex;gap:8px;flex-wrap:wrap}
/* 3 botones angostos en fila -- el popover con "right:0" de .group-select-pop
   (pensado para 1 solo boton pegado a la derecha) se saldria de pantalla
   para el 1ro/2do boton de esta fila. Mismo fix ya usado en #info-pop:
   position:fixed + left calculado a mano con getBoundingClientRect(). */
#trendFilterRow .group-select-pop{position:fixed;left:0;right:auto;min-width:150px}

.hits-wrap{display:inline-flex;align-items:center;gap:4px;color:var(--text-dim);font-weight:700}
.hits-wrap svg{width:11px;height:11px;stroke:var(--good);stroke-width:3;fill:none;flex-shrink:0}
.pct-num{font-weight:800;color:var(--text)}

/* Tabla de tendencias: a diferencia de table.standings (sticky + scroll
   horizontal, pensada para 10 columnas), esta tiene solo 5 columnas
   angostas y SIEMPRE debe entrar sin scroll -- #/PJ/Cumplio/% con ancho
   fijo, Equipo se queda con el resto y trunca con "..." si un nombre no
   entra (nunca se parte en 2 lineas ni estira la tabla, mismo criterio ya
   usado para el rival en el historial del modal de detalle de partido). */
table.trend-table{width:100%;border-collapse:collapse;background:var(--panel);table-layout:fixed}
table.trend-table th{
  text-align:left;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint);
  padding:10px 8px;border-bottom:1px solid var(--header-band-border);background:var(--header-band);white-space:nowrap;
}
table.trend-table th.mono,table.trend-table td.mono{text-align:right}
table.trend-table td{padding:10px 8px;border-bottom:1px solid var(--border-soft);font-size:.84rem}
table.trend-table tr:last-child td{border-bottom:none}
table.trend-table tr:nth-child(even) td{background:var(--row-alt)}
table.trend-table .th-pos,table.trend-table td.td-pos{width:22px;font-weight:700;color:var(--text-dim)}
table.trend-table th.mono:nth-child(3),table.trend-table td.mono:nth-child(3){width:44px}
table.trend-table th.mono:nth-child(4),table.trend-table td.mono:nth-child(4){width:62px}
table.trend-table th.mono:nth-child(5),table.trend-table td.mono:nth-child(5){width:46px}
table.trend-table .td-team-inner{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
table.trend-table .td-team-inner img{
  width:20px;height:20px;object-fit:contain;flex-shrink:0;background:var(--logo-bg);border-radius:50%;padding:1.5px;
}
table.trend-table .td-team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* PJ con fase extra (Regla 1, 2026-09-18): el "*" vive en un carril de ancho
   FIJO (.pj-mark-slot, siempre presente, vacio si no aplica) para que el
   numero mismo (.pj-num, unico que crece) quede en la misma posicion exacta
   tenga o no marca -- ver mockup "Nota de Fase Extra" aprobado. */
table.trend-table td.pj-cell{display:flex;align-items:center;padding:10px 8px}
.pj-num{flex:1 1 auto;text-align:right}
.pj-mark-slot{flex:0 0 8px;width:8px;text-align:left;color:var(--accent);font-weight:800;font-size:.72rem;line-height:1}
.trend-legend{font-size:.72rem;color:var(--text-faint);margin:8px 2px 0}

.site-footer{border-top:1px solid var(--border-soft);margin-top:8px}
.footer-inner{
  max-width:760px;margin:0 auto;padding:26px 20px;
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:600px){ .footer-inner{flex-direction:row;align-items:center;justify-content:space-between} }
.footer-sub{font-size:.76rem;color:var(--text-dim);margin:2px 0 0}
.footer-disclaimer{font-size:.76rem;color:var(--text-dim);max-width:340px;margin:0}
.footer-meta{font-size:.74rem;color:var(--text-dim);margin:0}
.footer-meta a{color:var(--text-dim);text-decoration:underline;text-decoration-color:var(--border)}
.footer-meta a:hover{color:var(--text);text-decoration-color:var(--text-dim)}

.popup-backdrop{
  position:fixed;inset:0;background:rgba(5,6,8,.72);z-index:30;
  display:flex;align-items:center;justify-content:center;padding:20px;
  overflow-y:auto;
}
.popup-card{
  background:var(--panel);border:1px solid var(--accent-dim);border-radius:14px;
  max-width:320px;width:100%;padding:22px 20px 18px;position:relative;text-align:center;
  box-shadow:var(--shadow);
  margin:auto;
}
.popup-close{
  position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
}
.popup-close svg{width:16px;height:16px}
.popup-close:hover{color:var(--text);border-color:var(--text-faint)}
.popup-icon{
  width:38px;height:38px;border-radius:50%;background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.popup-icon svg{width:18px;height:18px}
.popup-card h3{font-size:1rem;margin:0 0 8px;color:var(--text)}
.popup-card p{font-size:.82rem;color:var(--text-dim);line-height:1.5;margin:0 0 16px}
.popup-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--accent);color:#1a1305;font-weight:700;font-size:.85rem;
  padding:10px 20px;border-radius:9px;text-decoration:none;
}
.popup-cta:hover{background:#ecb35c}
.popup-later{
  display:block;margin:10px auto 0;font-size:.76rem;color:var(--text-faint);
  text-decoration:underline;text-decoration-color:var(--border);background:none;border:none;
}
.popup-later:hover{color:var(--text-dim)}

.detail-modal{
  max-width:640px;width:100%;text-align:left;padding:0;overflow:hidden;
  max-height:min(85vh, 720px);display:flex;flex-direction:column;
}
.detail-modal .panel-head{
  border-radius:16px 16px 0 0;flex-shrink:0;position:sticky;top:0;z-index:2;
}
.detail-modal .panel-head .popup-close{position:static;flex-shrink:0;margin-right:12px}
.detail-modal.capturing .panel-head .popup-close{display:none!important}
.detail-modal.capturing .panel-head{position:static!important}
#match-detail-content{overflow-y:auto;flex:1;min-height:0}

.match-hero{display:flex;align-items:center;gap:18px;padding:22px 22px 16px;justify-content:center}
.hero-team{display:flex;flex-direction:column;align-items:center;gap:8px;width:150px;text-align:center}
.hero-team img{width:40px;height:40px;border-radius:50%;background:var(--logo-bg);object-fit:contain;padding:3px}
.hero-name{font-size:.9rem;font-weight:700;color:var(--text)}
.hero-ctx{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.hero-ctx.local{color:var(--local);background:rgba(91,155,217,.12)}
.hero-ctx.away{color:var(--away);background:rgba(217,112,91,.12)}
.hero-mid{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-dim);font-size:.8rem}
.hero-mid .live{color:var(--accent);font-weight:700}
.hero-mid .in-play{font-size:.78rem}
.hero-mid .score{font-size:1.1rem;font-weight:700;color:var(--text)}

/* Penales/tiempo extra: el marcador FT no alcanza para contar la historia
   completa (una llave a 2 partidos puede definirse por penales sin que se
   note en el resultado de este partido puntual) -- una linea chica arriba,
   reusando .in-play-sub, ya establecido como el tratamiento para texto de
   contexto secundario junto al estado del partido. */
.finish-extra-stack{display:flex;flex-direction:column;gap:1px}
.hero-mid .finish-extra-stack{align-items:center}

.detail-section{padding:2px 22px 20px}
.detail-label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:0 0 10px}

.detail-split{display:none;grid-template-columns:1fr 1fr;gap:18px}
@media (min-width:640px){ .detail-split{display:grid} .team-tabs{display:none} .team-panel{display:none} }
.team-col-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.team-col-head img{width:20px;height:20px;border-radius:50%;background:var(--logo-bg);object-fit:contain;padding:2px}
.team-col-head .nm{font-size:.86rem;font-weight:700;color:var(--text)}

.team-tabs{padding:0 22px;margin:0 0 4px;gap:32px}
.team-tabs .tab-btn{padding:10px 16px 12px}
.team-tabs .tab-btn.home.active{box-shadow:inset 0 -2px 0 var(--local)}
.team-tabs .tab-btn.away.active{box-shadow:inset 0 -2px 0 var(--away)}
.team-panel[hidden]{display:none}

.form-strip{display:flex;gap:4px;margin:0 0 12px}
.form-dot{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800}
.form-dot.w{background:rgba(74,222,128,.14);color:var(--good)}
.form-dot.d{background:var(--panel-2);color:var(--text-dim);border:1px solid var(--border)}
.form-dot.l{background:rgba(240,100,95,.14);color:var(--bad)}

.hist-table{width:100%;border-collapse:collapse;font-size:.78rem;table-layout:fixed}
.hist-table th:nth-child(1),.hist-table td:nth-child(1){width:40%}
.hist-table th:nth-child(2),.hist-table td:nth-child(2){width:20%}
.hist-table th:nth-child(3),.hist-table td:nth-child(3),
.hist-table th:nth-child(4),.hist-table td:nth-child(4),
.hist-table th:nth-child(5),.hist-table td:nth-child(5){width:13.33%}
.hist-table th{text-align:left;font-weight:600;color:var(--text-faint);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;padding:0 6px 6px;border-bottom:1px solid var(--border-soft)}
.hist-table th.num,.hist-table td.num{text-align:center}
.hist-table th svg{width:13px;height:13px;vertical-align:-2px}
.hist-table td{padding:7px 6px;border-bottom:1px solid var(--border-soft);color:var(--text-dim)}
.hist-table td.opp{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-table td.hit{color:var(--good);font-weight:700}
.hist-table td.miss{color:var(--text-faint)}
.hist-table tr:last-child td{border-bottom:none}
.hist-legend{font-size:.72rem;color:var(--text-faint);margin:6px 0 0}

.methodology{margin:0 22px 22px;padding:14px 16px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;font-size:.78rem;color:var(--text-dim);line-height:1.6}
.methodology b{color:var(--text)}

.data-source-note{margin:0 22px 20px;text-align:center;font-size:.7rem;color:var(--text-faint);line-height:1.5}

.share-actions{
  display:flex;gap:10px;position:sticky;bottom:0;z-index:2;
  padding:14px 22px;margin:0;background:var(--panel);border-top:1px solid var(--border-soft);
}
.share-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;flex:1;
  padding:10px 16px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  font-weight:600;font-size:.82rem;text-decoration:none;
}
.share-btn:hover{border-color:var(--local)}
.share-btn svg{width:15px;height:15px;flex-shrink:0}
.share-btn[disabled]{opacity:.6}

.share-foot{
  display:none;align-items:center;justify-content:space-between;
  padding:12px 22px;background:var(--bg);border-top:1px solid var(--border-soft);
}
.share-foot .wordmark{font-size:.8rem;font-weight:800;letter-spacing:-.02em}
.share-foot .wordmark .t1{color:var(--text)}
.share-foot .wordmark .t2{color:var(--accent)}
.share-foot .tagline{font-size:.7rem;color:var(--text-faint)}

.detail-modal.capturing{max-height:none!important;overflow:visible!important}
.detail-modal.capturing #match-detail-content{overflow:visible!important;flex:none!important;max-height:none!important}
.detail-modal.capturing .detail-split{display:grid!important}
.detail-modal.capturing .team-tabs,
.detail-modal.capturing .team-panel{display:none!important}
.detail-modal.capturing .share-actions{display:none!important}
.detail-modal.capturing .share-foot{display:flex!important}

.image-lightbox{max-width:480px;padding:20px 20px 18px}
.image-lightbox img{width:100%;border-radius:10px;display:block;background:var(--panel-2)}
.lightbox-hint{font-size:.78rem;color:var(--text-dim);margin:14px 0 16px}
.image-lightbox .share-actions{position:static;background:none;border-top:none;padding:0;margin:0}

#share-capture-stage{position:fixed;left:-9999px;top:0;width:640px}

/* Explorador de Ligas (ligas.html) -- buscador con autocompletado, Copas
   Internacionales arriba, resto agrupado por continente y pais. */
.search-wrap{position:relative;margin-bottom:28px}
.search-box{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;
}
.search-box:focus-within{border-color:var(--accent-dim)}
.search-box svg{flex-shrink:0;color:var(--text-dim)}
.search-box input{
  flex:1;background:none;border:none;color:var(--text);font-size:.92rem;font-family:inherit;
  min-width:0;
}
.search-box input::placeholder{color:var(--text-faint)}
.search-kbd{
  font-size:.7rem;color:var(--text-faint);border:1px solid var(--border);border-radius:5px;
  padding:2px 6px;flex-shrink:0;
}
.suggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:var(--panel-2);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.suggest-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--border-soft);
}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover,.suggest-item.active{background:var(--panel)}
.suggest-item img{width:20px;height:20px;object-fit:contain;border-radius:50%;flex-shrink:0}
.suggest-item img.logo-bg{background:var(--logo-bg);padding:2px}
.suggest-name{font-size:.86rem;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-name mark,.suggest-meta mark{background:none;color:var(--accent);font-weight:800}
.suggest-meta{font-size:.72rem;color:var(--text-dim);flex-shrink:0}
.suggest-empty{padding:16px 14px;font-size:.82rem;color:var(--text-dim);text-align:center}

.cups-section{margin-bottom:32px}
.section-label{
  display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px;
}
.cups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cup-card{
  display:flex;align-items:center;gap:10px;background:var(--cup-band);
  border:1px solid var(--cup-band-border);border-radius:10px;padding:10px 12px;
  color:inherit;text-decoration:none;
}
.cup-card img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.cup-card img.logo-bg{background:var(--logo-bg);border-radius:50%;padding:3px}
.cup-card span{font-size:.82rem;font-weight:600}

.continent{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px;background:var(--panel)}
.continent-head{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px 16px;background:var(--header-band);border-bottom:1px solid var(--header-band-border);
}
.continent-head h2{font-size:.95rem;font-weight:700;margin:0;flex:1}
.continent-count{font-size:.72rem;color:var(--text-dim);flex-shrink:0}
.continent-chevron{color:var(--text-dim);flex-shrink:0;transition:transform .18s}
.continent.collapsed .continent-chevron{transform:rotate(-90deg)}
.continent.collapsed .country-list{display:none}
.country-list{padding:6px 0}

.country{padding:10px 16px 12px}
.country + .country{border-top:1px solid var(--border-soft)}
.country-name{font-size:.76rem;font-weight:700;color:var(--text-dim);letter-spacing:.02em;margin:2px 0 8px}
.league-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:8px;margin:0 -8px;color:inherit;text-decoration:none}
.league-row:hover{background:var(--panel-2)}
.league-row img{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.league-row img.logo-bg{background:var(--logo-bg);border-radius:50%;padding:3px}
.league-name{font-size:.86rem;font-weight:600;flex:1;min-width:0}
.row-chevron{color:var(--text-faint);flex-shrink:0}


@media (max-width:480px){
  .cups-grid{grid-template-columns:1fr 1fr}
}