/* =====================================================================
   MASTER VISUAL — única fuente de colores, tipografía y formas del sitio.
   Cambiar la marca = editar este archivo + site/brand/brand.js + favicon.svg.
   Formato de color: light-dark(CLARO, OSCURO).
   Valores ≈ = estimados de capturas; confirmar con DevTools (guía §0).
   ===================================================================== */
html{color-scheme:light dark}
html[data-theme=light]{color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
:root{
  /* Marca */
  --brand:#3f51b5;                      /* barra de navegación; borde del aviso de cobertura */
  --brand-on:#fff;                      /* texto sobre --brand */
  --brand-line:rgba(255,255,255,.25);   /* divisores dentro del menú móvil */

  /* Neutros */
  --bg:light-dark(#fff,#1c1c1e);        /* fondo de página (dark confirmado) */
  --surface:light-dark(#f1f1f1,#2c2c2e);/* cajas de estadística, chips, tarjetas */
  --surface2:light-dark(#e5e5e5,#3a3a3c);/* encabezado de etapa, filas total */
  --text:light-dark(#212121,#fff);
  --muted:light-dark(#6b6b6b,#9a9aa0);
  --border:light-dark(#ddd,#38383a);
  --link:light-dark(#2a3eb1,#4c9aff);

  /* Alianzas: w = saturado (ganadora / fila total), l = tenue (perdedora / fila detalle) */
  --rw:light-dark(#f6a79b,#b23a35);     /* red win   */
  --rl:light-dark(#ffd9d4,#5a2420);     /* red lose  */
  --bw:light-dark(#a8c8f7,#3354b8);     /* blue win  */
  --bl:light-dark(#d3e2fb,#1f2d5c);     /* blue lose */

  /* Miniaturas de video */
  --overlay:rgba(0,0,0,.65);            /* círculo del botón play */
  --overlay-on:#fff;                    /* triángulo y texto sobre la miniatura */
  --thumb-bg:#4a4a4a;                   /* marcador de posición sin imagen */

  /* Tipografía: pila del sistema (no se cargan fuentes web) */
  --font:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Formas */
  --r-box:8px;                          /* cajas, marcos, selectores */
  --r-cell:6px;                         /* filas del marcador, encabezados de tabla */
  --r-pill:999px;                       /* chips y medallas */
  /* Premios por lugar (≈ tomados de la imagen de referencia de premios) */
  --gold:light-dark(#fff2cc,#5a4a14);--silver:light-dark(#eeeeee,#3a3a3c);--bronze:light-dark(#fce5cd,#5a3a1c);--tier:light-dark(#c9daf8,#1f3157);
  /* En vivo */
  --live:light-dark(#d32f2f,#ef5350);--live-bg:light-dark(#ffebee,#3b1818);
}

/* =====================================================================
   COMPONENTES — estilo de todos los bloques. Extraído del demo, no reescribir.
   REGLA: aquí NO hay colores literales ni tipografías literales: solo var(--…).
   Para añadir un color, primero se añade el token en brand/tokens.css.
   ===================================================================== */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--font)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link);outline-offset:1px}
h1{font-size:30px;line-height:1.15;margin:0;font-weight:500}
h2{font-size:24px;margin:0 0 8px;font-weight:500}
h3{font-size:16px;margin:20px 0 8px}
.nav{background:var(--brand);color:var(--brand-on);display:flex;align-items:center;gap:20px;padding:0 16px;min-height:46px;position:relative}
.nav a,.nav summary{color:var(--brand-on)}
.nav .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.nav .links{display:flex;gap:18px;flex:1}
.nav input{border:0;border-radius:var(--r-box);padding:6px 10px;font:inherit;width:200px;background:var(--bg);color:var(--text)}
.menu{display:none;margin-left:auto}
.menu summary{cursor:pointer;list-style:none;padding:12px 4px;user-select:none}
.menu div{position:absolute;top:100%;left:0;right:0;z-index:100;background:var(--brand);padding:4px 16px 12px;border-radius:0 0 24px 24px;border-bottom:2px solid var(--brand-line)}
.menu a{display:block;padding:12px 0;font-size:18px;border-top:1px solid var(--brand-line)}
/* El buscador del menú (solo móvil: en escritorio .menu está oculto y el campo va en la
   cabecera). Ocupa el ancho del desplegable; .nav input le fija 200px, así que esta regla
   va después para poder ganarle. */
.menu form{padding:12px 0 0}
.menu input{width:100%}
.subbar{display:none;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border)}
.subbar details a{display:block;padding:6px 0;color:var(--muted)}
.subbar summary{cursor:pointer;font-weight:700}
select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-box);padding:8px 10px;width:100%}
.wrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;max-width:1140px;margin:0 auto;padding:20px 16px}
.side{position:sticky;top:12px;align-self:start}
.side a{display:block;padding:5px 0;color:var(--muted)}
.side a.on{color:var(--text);font-weight:700}
.side select{margin-bottom:14px}
.hd{display:grid;grid-template-columns:1fr 300px;gap:24px}
.title{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.title .fl{width:42px;height:28px}
.kv div{margin:3px 0}
.kv span{color:var(--muted)}
.photo{aspect-ratio:4/3;border:2px solid var(--border);border-radius:var(--r-box);display:grid;place-items:center;color:var(--muted);text-align:center;padding:8px;position:relative;overflow:hidden}
/* La foto se contiene en el marco (contain) y se recorta en las esquinas redondeadas.
   Va posicionada, no en el flujo: con `place-items:center` la pista del grid es
   automática y un width/height en % caería contra una pista indefinida. */
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sum{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;margin:20px 0}
.cov{background:var(--surface);border-left:3px solid var(--brand);padding:8px 12px;margin-bottom:20px;color:var(--muted)}
.pip{display:inline-block;background:var(--surface);border-radius:var(--r-pill);padding:1px 9px;font-weight:700;font-size:13px;white-space:nowrap}
.fl{display:inline-block;width:16px;height:11px;border:1px solid var(--border);flex:none}
.fl.none{background:var(--surface2)}
.ev{display:grid;grid-template-columns:1fr 2fr;gap:32px;border-top:1px solid var(--border);padding-top:20px}
.when,.lbl{color:var(--muted)}
.lbl{font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 6px}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.box{background:var(--surface);border-radius:var(--r-box);padding:10px;text-align:center}
.box small{color:var(--muted);display:block}
.box b{font-size:24px;display:block;line-height:1.2}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.chip{display:inline-block;background:var(--surface);border-radius:var(--r-pill);padding:1px 10px;font-weight:700;font-size:13px;color:var(--text)}
.kvr{display:flex;justify-content:space-between;padding:2px 0}
.kvr.tot{border-top:1px solid var(--border);margin-top:4px;padding-top:4px;font-weight:700}
.stg{display:grid;grid-template-columns:1fr auto 1fr;background:var(--surface2);padding:5px 10px;border-radius:var(--r-cell) var(--r-cell) 0 0;margin-top:10px;font-size:13px}
.stg:first-child{margin-top:0}
.stg a{justify-self:end;color:var(--muted)}
.eod{background:var(--surface2);text-align:center;font-size:12px;color:var(--muted)}
.m{display:grid;grid-template-columns:34px 130px 1fr 1fr 52px 52px;grid-template-areas:"pl lb ra ba rs bs";font-size:13.5px}
.m>*{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--bg);padding:5px 4px;min-height:28px}
.m .c-pl{grid-area:pl}
.lb{grid-area:lb;flex-direction:column;color:var(--text);text-align:center}
.lb small{color:var(--muted);font-size:11px;font-weight:400;line-height:1.3}
.eta{color:var(--live);font-weight:700}
.m .ra{grid-area:ra}
.m .ba{grid-area:ba}
.m .rs{grid-area:rs}
.m .bs{grid-area:bs}
.ra,.ba{display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;padding:0!important}
.ra>*,.ba>*{padding:5px 2px}
.t{display:inline-flex;align-items:center;justify-content:center;gap:4px;color:inherit}
.t.me,.w{font-weight:700;text-decoration:underline}
.win.ra,.win.rs{background:var(--rw)}
.lose.ra,.lose.rs{background:var(--rl)}
.win.ba,.win.bs{background:var(--bw)}
.lose.ba,.lose.bs{background:var(--bl)}
.neu{background:var(--surface)}
.neu.ra{background:var(--rl)}
.neu.ba{background:var(--bl)}
.pl{width:18px;height:18px;border:1.5px solid var(--link);border-radius:50%;position:relative}
.pl::before{content:"";position:absolute;left:5px;top:3px;border:4px solid transparent;border-left:7px solid var(--link);border-right:0}
.mh{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:28px;align-items:start}
.sb{display:grid;grid-template-columns:1fr 56px;gap:6px;text-align:center}
.sb .ra,.sb .ba{border-radius:var(--r-cell)}
.sb .rs,.sb .bs{border-radius:var(--r-cell);min-height:28px;display:flex;align-items:center;justify-content:center}
.sb .hd2{font-weight:700;margin:12px 0 4px}
table.bd{width:100%;border-collapse:collapse;margin-top:14px}
.bd td{text-align:center;padding:8px 4px;border-top:1px solid var(--bg)}
.bd td:nth-child(odd){width:27%}
.bd .rw{background:var(--rw)}
.bd .rl{background:var(--rl)}
.bd .bw{background:var(--bw)}
.bd .bl{background:var(--bl)}
.bd .lb{display:flex;justify-content:space-between;align-items:center;gap:6px;border:0;flex-direction:row;padding:8px}
.bd td.lb.tot{background:var(--surface2);font-weight:700}
.bd tr td.lb{display:table-cell;}
.bd .ar{display:inline-block;width:18px}
.bd td.lb span:nth-child(2){display:inline-block;text-align:center}
.tall{padding:12px 4px!important}
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;align-content:start}
/* La miniatura ES el enlace (§3.16), así que es un <a> con la caja de .thumb: se le quita
   el subrayado del navegador (el color ya lo fija .thumb con --overlay-on). */
.thumb{aspect-ratio:16/9;background:var(--thumb-bg);border-radius:var(--r-box);position:relative;display:grid;place-items:end start;color:var(--overlay-on);font-size:12px;padding:8px;text-decoration:none}
.thumb::after{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--overlay)}
.thumb::before{content:"";position:absolute;left:50%;top:50%;margin:-9px 0 0 -6px;border:9px solid transparent;border-left:15px solid var(--overlay-on);border-right:0;z-index:1}
/* La miniatura va detrás del botón de play, que dibujan los dos ::before/::after de arriba
   (el ::before lleva z-index:1; el ::after va después en el orden de pintado). */
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-box)}
.cap small{display:block;color:var(--muted)}
/* Hover: subrayar el título, nada más (§3.16). El enlace es la miniatura, así que el
   subrayado se dispara desde ella — son hermanos dentro de la tarjeta — y apunta solo al
   título: subrayar también la línea gris del pie quedaba mal. */
.thumb:hover + .cap > span{text-decoration:underline}
.vb{aspect-ratio:16/9;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box);padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.vb .sc{display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:center}
.vb .sc div{border-radius:var(--r-cell);padding:4px}
.vb .sc b{font-size:24px;display:block;line-height:1.2}
.vb .sc small{font-size:11px}
.vb .go{align-self:flex-end;display:inline-flex;gap:6px;align-items:center}
.vb .go::before{content:"";border:5px solid transparent;border-left:8px solid var(--link);border-right:0}
.note{color:var(--muted);font-size:12px;margin:8px 0}
footer{max-width:1140px;margin:20px auto 0;padding:16px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
footer .row{flex-wrap:wrap}
footer a+a::before{content:"/";color:var(--muted);margin:0 8px}
.seg button{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);padding:3px 10px;cursor:pointer}
.seg button:first-child{border-radius:var(--r-box) 0 0 var(--r-box)}
.seg button:last-child{border-radius:0 var(--r-box) var(--r-box) 0;border-left:0}
.logo{width:22px;height:22px;fill:currentColor;stroke:none}
.span-all{grid-column:1/-1}
.tn-rl{background:var(--rl)}
.tn-bw{background:var(--bw)}
.sprite{position:absolute;width:0;height:0}
#match-filter{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-box);padding:6px 12px;font-size:14px;width:220px;max-width:100%}
@media(max-width:900px){

.nav .links,.nav>form input,.side{display:none}
.nav .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 120px)}
.menu{display:block}
.subbar{display:flex}
.subbar select{width:auto}
.wrap{grid-template-columns:minmax(0,1fr);padding:14px 12px}
.hd,.ev,.mh{grid-template-columns:1fr}
h1{font-size:26px}
.m{grid-template-columns:30px 90px 1fr 46px;grid-template-areas:"pl lb ra rs" "pl lb ba bs"}
.m .c-pl,.m .lb{grid-row:span 2}
.bd td:nth-child(odd){width:24%}
#match-filter{width:100%;font-size:16px}
.boxes.c3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* --- páginas (v3) --- */
.fl{object-fit:cover}.wrap.one{grid-template-columns:minmax(0,1fr)}.sec{margin-top:24px}.muted{color:var(--muted)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.nav form{margin:0}.nav a[aria-current]{text-decoration:underline}
.boxes.c3{grid-template-columns:repeat(3,1fr)}.map{aspect-ratio:2/1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box);display:grid;place-items:center;color:var(--muted)}
.dd{position:relative}.dd summary{border:1px solid var(--border);border-radius:var(--r-box);padding:6px 12px;cursor:pointer;list-style:none;width:max-content}.dd summary::after{content:" ▾"}
.dd div{position:absolute;right:0;z-index:2;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-box);padding:4px 0;max-height:260px;overflow:auto;min-width:150px}.dd a{display:block;padding:5px 12px;color:var(--text)}.dd a:hover{background:var(--surface)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.dt{width:100%;border-collapse:collapse}.dt th{background:var(--surface2);text-align:left;padding:6px 8px;font-size:13px}.dt td{padding:6px 8px;border-top:1px solid var(--border)}.dt .n{text-align:right;font-variant-numeric:tabular-nums}.dt.s th{cursor:pointer}
.tn-rw{background:var(--rw)}.tn-bl{background:var(--bl)}.ev+.ev{margin-top:20px}

/* --- v4: hero, premios --- */
.hero{text-align:center;padding:48px 0 32px}.hero .logo{width:96px;height:96px}.hero h1{font-size:44px;margin:12px 0 6px}.hero p{font-size:18px;margin:0}
.t-gold{background:var(--gold)}.t-silver{background:var(--silver)}.t-bronze{background:var(--bronze)}.t-awarded{background:var(--tier)}
.key{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 14px}.key span{padding:2px 10px;border-radius:var(--r-pill);font-size:13px}
.aws{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.aw{border:1px solid var(--border);border-radius:var(--r-cell);overflow:hidden;text-align:center}
.aw b{display:block;padding:8px 10px 2px}.aw i{display:block;padding:0 12px 8px;color:var(--muted);font-size:13px}.aw-r{display:flex;flex-wrap:wrap;border-top:1px solid var(--border)}
.aw-r span{flex:1 1 30%;padding:6px 8px;border-left:1px solid var(--border)}.aw-r span:first-child{border-left:0}
@media(max-width:900px){.aws{grid-template-columns:1fr}.hero h1{font-size:32px}.hero{padding:28px 0 20px}}
.live-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--live);background:var(--live-bg);padding:2px 8px;border-radius:var(--r-pill);letter-spacing:.05em}
.player-wrap{position:relative;aspect-ratio:16/9;background:var(--thumb-bg);border-radius:var(--r-box);overflow:hidden;margin:16px 0}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stream-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.stream-bar span{color:var(--muted);font-weight:700;font-size:13px}
.stream-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px;color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-decoration:none}
.stream-btn:hover{background:var(--surface2);text-decoration:none}
.stream-btn.on{background:var(--brand);color:var(--brand-on);border-color:var(--brand);font-weight:700}
.gameday-grid{display:grid;gap:14px;margin:16px 0}
.gameday-grid[data-count="1"]{grid-template-columns:1fr}
.gameday-grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.gameday-grid[data-count="3"]{grid-template-columns:repeat(3,1fr)}
.gameday-grid[data-count="4"]{grid-template-columns:repeat(2,1fr)}
.gameday-grid[data-count="5"]{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media(max-width:900px){
.gameday-grid,.gameday-grid[data-count="1"],.gameday-grid[data-count="2"],.gameday-grid[data-count="3"],.gameday-grid[data-count="4"],.gameday-grid[data-count="5"]{grid-template-columns:1fr}
}
.player-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-box);overflow:hidden;display:flex;flex-direction:column}
.player-head{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:13px;font-weight:700}
.player-head span{display:flex;align-items:center;gap:6px}
.player-close{background:transparent;border:0;color:var(--muted);font-size:18px;line-height:1;padding:4px 10px;cursor:pointer;border-radius:var(--r-cell);display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}
.player-close:hover{background:var(--surface);color:var(--text)}
.player-frame{position:relative;aspect-ratio:16/9;background:var(--thumb-bg);width:100%}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:480px){
.wrap{padding:10px 8px}
.nav{padding:0 10px}
.m{grid-template-columns:26px 80px 1fr 40px;font-size:12.5px}
.m .lb small{font-size:10px}
.t{gap:2px}
.fl{width:14px;height:10px}
.title h1{font-size:22px}
.hero h1{font-size:26px}
.hero{padding:24px 0 16px}
.boxes{gap:8px}
.boxes.c3{grid-template-columns:1fr 1fr}
.stream-btn{padding:5px 9px;font-size:12px}
.stream-bar{gap:6px}
}