/* ===== sala de control · tubo encendido (oscuro por defecto) ===== */
:root{
  --bg:#050706; --room:#0A0F0C; --room-hi:#101816;
  --panel:#0A100D; --panel-2:#0A120F; --panel-3:#0C1613; --sunk:#070C0A;
  --line:#17261F; --line-2:#22382E; --edge:#1A2A22;
  --phos:#3BF08C; --phos-dim:#2A8557; --phos-soft:#1B4E34; --phos-hi:#9BFFCB;
  --amber:#FFB020; --amber-dim:#9A6A12;
  --tally:#FF4438; --cyan:#4FE8FF; --magenta:#FF4FD8;
  --bone:#D9D3BE; --mute:#5C7A6C;
  --on-phos:#04120A; --on-amber:#160C00;
  --scan:rgba(0,0,0,.34); --scan-gap:rgba(0,0,0,0);
  --inner:inset 0 0 70px rgba(59,240,140,.05);
  --glow-p:0 0 14px rgba(59,240,140,.42);
  --glow-a:0 0 14px rgba(255,176,32,.38);
  --glow-t:0 0 14px rgba(255,68,56,.5);
  --roll:rgba(155,255,203,.05);
  --noise-op:.045; --noise-blend:screen; --flick:rgba(155,255,203,.02);
  --vig:rgba(0,0,0,.62);
  --mine-bg:#0C1410; --sel-bg:#0D1A14; --shadow:0 20px 50px -34px #000;
  --logo-glow:rgba(59,240,140,.5); --cliply-pink:#ffb8d1; --ctl:34px;
  --z-verde:#3BF08C; --z-cyan:#4FE8FF; --z-ambar:#FFB020; --z-rojo:#FF4438;
}
/* ===== tubo de día: papel de planilla, fósforo apagado ===== */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#D9D6CA; --room:#E6E4D8; --room-hi:#F2F0E6;
    --panel:#F4F2EA; --panel-2:#EBE8DD; --panel-3:#E3E0D3; --sunk:#F0EDE3;
    --line:#D0CCBC; --line-2:#B4AF9E; --edge:#A9A492;
    --phos:#15503A; --phos-dim:#6A7F72; --phos-soft:#BCC8BE; --phos-hi:#0D3A29;
    --amber:#8F5307; --amber-dim:#B08F55;
    --tally:#A32B1D; --cyan:#155C6B; --magenta:#7E2C6E;
    --bone:#17241E; --mute:#6A796F;
    --on-phos:#F3F0E5; --on-amber:#F3F0E5;
    --scan:rgba(23,36,30,.07); --scan-gap:rgba(0,0,0,0);
    --inner:inset 0 0 60px rgba(11,115,67,.05);
    --glow-p:none; --glow-a:none; --glow-t:none;
    --roll:rgba(23,36,30,.03);
    --noise-op:.05; --noise-blend:multiply; --flick:rgba(23,36,30,.012);
    --vig:rgba(60,52,30,.22);
    --mine-bg:#EDE7D2; --sel-bg:#E4EDE5; --shadow:0 18px 44px -34px rgba(30,40,30,.55);
    --logo-glow:rgba(11,115,67,.22); --cliply-pink:#D4557F;
    /* sobre papel los cuatro del sistema quedaban casi iguales: acá van más
       separados en tono y en brillo, que es lo que hace legible una leyenda */
    --z-verde:#0E7A45; --z-cyan:#0B6FA8; --z-ambar:#C97A0A; --z-rojo:#C1291B;
  }
}
:root[data-theme="light"]{
  --bg:#D9D6CA; --room:#E6E4D8; --room-hi:#F2F0E6;
  --panel:#F4F2EA; --panel-2:#EBE8DD; --panel-3:#E3E0D3; --sunk:#F0EDE3;
  --line:#D0CCBC; --line-2:#B4AF9E; --edge:#A9A492;
  --phos:#15503A; --phos-dim:#6A7F72; --phos-soft:#BCC8BE; --phos-hi:#0D3A29;
  --amber:#8F5307; --amber-dim:#B08F55;
  --tally:#A32B1D; --cyan:#155C6B; --magenta:#7E2C6E;
  --bone:#17241E; --mute:#6A796F;
  --on-phos:#F3F0E5; --on-amber:#F3F0E5;
  --scan:rgba(23,36,30,.07); --scan-gap:rgba(0,0,0,0);
  --inner:inset 0 0 60px rgba(11,115,67,.05);
  --glow-p:none; --glow-a:none; --glow-t:none;
  --roll:rgba(23,36,30,.03);
  --noise-op:.05; --noise-blend:multiply; --flick:rgba(23,36,30,.012);
  --vig:rgba(60,52,30,.22);
  --mine-bg:#EDE7D2; --sel-bg:#E4EDE5; --shadow:0 18px 44px -34px rgba(30,40,30,.55);
  --logo-glow:rgba(11,115,67,.22); --cliply-pink:#D4557F;
    /* sobre papel los cuatro del sistema quedaban casi iguales: acá van más
       separados en tono y en brillo, que es lo que hace legible una leyenda */
    --z-verde:#0E7A45; --z-cyan:#0B6FA8; --z-ambar:#C97A0A; --z-rojo:#C1291B;
}

/* las lineas van SIEMPRE de fondo, nunca encima del contenido ni de los escudos */
:root{--scanlines:repeating-linear-gradient(to bottom, var(--scan) 0 1px, var(--scan-gap) 1px 3px)}

*{box-sizing:border-box}
html{background:var(--bg); height:100%; overflow:hidden}
body{
  margin:0; height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  color:var(--bone); font-size:14px; line-height:1.5;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  background-image:var(--scanlines), radial-gradient(120% 80% at 50% 0%, var(--room-hi) 0%, var(--room) 45%, var(--bg) 100%);
  background-attachment:fixed;
}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.01em}
button,input,select{font:inherit; color:inherit; background:none; border:0}
button{cursor:pointer; -webkit-tap-highlight-color:transparent}
img{max-width:100%}
:focus-visible{outline:1px solid var(--phos); outline-offset:2px}
.mono,.n{font-variant-numeric:tabular-nums}
.lab{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim)}
.seg7{font-family:VT323,"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:.02em}

/* ===== capas CRT (sin lineas: solo barrido, grano y viñeta) ===== */
.fx,.vig,.noise{position:fixed; inset:0; pointer-events:none}
.fx{z-index:200; overflow:hidden}
.fx::after{content:""; position:absolute; left:0; right:0; height:34%;
  background:linear-gradient(var(--roll), transparent 70%); animation:roll 9s linear infinite}
@keyframes roll{from{transform:translateY(-40%)} to{transform:translateY(300%)}}
.vig{z-index:190; background:radial-gradient(125% 95% at 50% 42%, transparent 52%, var(--vig) 100%)}
.noise{z-index:195; opacity:var(--noise-op); mix-blend-mode:var(--noise-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
body::after{content:""; position:fixed; inset:0; z-index:185; pointer-events:none;
  background:var(--flick); animation:flick 5.2s steps(1) infinite}
@keyframes flick{0%,96%{opacity:0} 97%{opacity:1} 98%{opacity:0} 99%{opacity:.6} 100%{opacity:0}}

/* ===== barras SMPTE ===== */
.bars{height:4px; display:grid; grid-template-columns:repeat(7,1fr)}
.bars i{display:block}
.bars i:nth-child(1){background:#C9C9C9} .bars i:nth-child(2){background:#C9C900}
.bars i:nth-child(3){background:#00C9C9} .bars i:nth-child(4){background:#00C900}
.bars i:nth-child(5){background:#C900C9} .bars i:nth-child(6){background:#C90000}
.bars i:nth-child(7){background:#0000C9}

/* ===== deck ===== */
.deck{flex:none; z-index:60; border-bottom:1px solid var(--line-2);
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel-2), var(--sunk));
  box-shadow:0 10px 30px -22px rgba(0,0,0,.8)}
.deck-in{display:flex; align-items:center; gap:12px; padding:9px 16px}
.wm{display:flex; align-items:center; gap:10px; white-space:nowrap}
.logo{width:31px; height:31px; flex:none; color:var(--phos-hi); filter:drop-shadow(0 0 7px var(--logo-glow))}
.logo .slits{animation:slit 5.5s linear infinite}
@keyframes slit{from{transform:translateY(0)} to{transform:translateY(9px)}}
.wm .nm{display:flex; align-items:baseline; gap:11px}
.byline{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--mute); opacity:.9;
  padding-right:11px; margin-right:2px; border-right:1px solid var(--line-2)}
.byline:hover{opacity:1; color:var(--bone)}
.byline span{font-size:9px; letter-spacing:.16em; text-transform:uppercase}
/* Lockup de Cliply con el hover de su web: glitch RGB-split en el wordmark
   (bx-glitch) + tres ondas que suben del iso (bx-signal). Portado de
   cliply/components/broadcast/{chrome.tsx,broadcast.css}. */
.cliply{position:relative; display:inline-block; line-height:0}
.cliply .lockup{display:block; width:auto; height:100%}
.cliply.sm{height:13px}
.cliply.md{height:17px}
/* un <svg> con viewBox e inset:0 resuelve el ancho por su ratio, no estirado:
   la capa quedaba de 29px y el glitch no llegaba a las letras */
.cliply .gl{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none;
  --cliply-pink:currentColor}
.cliply .ga{color:#ff4d6d}
.cliply .gb{color:#00d0ff}
.cliply .ondas{position:absolute; left:-3.18%; top:-16.7%; width:25.4%; height:133.3%; overflow:visible}
.onda{opacity:0; transform-box:fill-box; transform-origin:50% 100%}

@keyframes cliply-glitch{
  0%,100%{transform:translate(0); clip-path:inset(0)}
  20%{transform:translate(-2px,1px); clip-path:inset(20% 0 40% 0)}
  40%{transform:translate(2px,-1px); clip-path:inset(60% 0 10% 0)}
  60%{transform:translate(-1px,0); clip-path:inset(10% 0 70% 0)}
  80%{transform:translate(1px,1px); clip-path:inset(40% 0 30% 0)}
}
@keyframes cliply-signal{
  0%{opacity:0; transform:translateY(7px) scale(.55)}
  25%{opacity:.9}
  100%{opacity:0; transform:translateY(-7px) scale(1.15)}
}
.byline:hover .ga, .sign-cliply:hover .ga{opacity:1; animation:cliply-glitch .4s steps(2) infinite}
.byline:hover .gb, .sign-cliply:hover .gb{opacity:1; animation:cliply-glitch .4s steps(2) infinite reverse}
.byline:hover .onda, .sign-cliply:hover .onda{animation:cliply-signal .5s ease-out infinite}
.byline:hover .o2, .sign-cliply:hover .o2{animation-delay:.13s}
.byline:hover .o3, .sign-cliply:hover .o3{animation-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .byline:hover .gl, .sign-cliply:hover .gl{opacity:0; animation:none}
}
.wm .nm b{font-size:26px; line-height:1}
.wm b{font-family:VT323,monospace; font-weight:400; font-size:27px; color:var(--phos-hi);
  text-shadow:var(--glow-p); letter-spacing:.04em}
.wm span{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--phos-dim)}
@keyframes blip{0%,100%{opacity:1} 50%{opacity:.15}}
.reloj{display:inline-flex; align-items:center; gap:8px; height:var(--ctl); padding:0 2px}
.rec{width:8px; height:8px; border-radius:50%; background:var(--line-2); flex:none}
.rec.on{background:var(--tally); box-shadow:var(--glow-t); animation:blip 1.3s ease-in-out infinite}
.clock{font-family:VT323,monospace; font-size:22px; line-height:1; color:var(--amber); letter-spacing:.06em;
  text-shadow:var(--glow-a); font-variant-numeric:tabular-nums}

/* los tres controles del deck comparten alto, borde y fondo */
.kbtn, .clubbtn, .clubx, .deck .arrow{height:var(--ctl); display:inline-flex; align-items:center;
  border:1px solid var(--line-2); background:var(--sunk); color:var(--mute)}
.kbtn:hover, .clubbtn:hover, .deck .arrow:hover{border-color:var(--phos-dim); color:var(--phos)}
.kbtn{margin-left:auto; gap:9px; padding:0 11px; font-size:12px}
.kbtn .ico{width:14px; height:14px; display:none; flex:none}
.kbtn kbd{font-size:10px; border:1px solid var(--line-2); padding:1px 5px; color:var(--phos-dim); line-height:1.4}
.deck .arrow{width:var(--ctl); justify-content:center; padding:0}
.deck .arrow svg{width:16px; height:16px}
/* el tema vive en el pie: en la barra de arriba le comía el lugar al club */
.temabtn{display:inline-flex; align-items:center; gap:7px; padding:5px 10px; margin-left:auto;
  border:1px solid var(--line-2); background:var(--sunk); color:var(--mute);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase}
.temabtn:hover{border-color:var(--phos-dim); color:var(--phos)}
.temabtn .ico{font-size:13px; line-height:1}
.temabtn.reporte{margin-left:0; text-decoration:none}
@media (max-width:640px){ .temabtn .txt{display:none} }
.clubbtn{gap:8px; padding:0 11px 0 5px; font-size:12px; max-width:210px; min-width:0}
.clubwrap{display:inline-flex; align-items:center}
/* sin club no hay ×: el borde derecho es del botón; con club, del × pegado al lado */
.clubwrap .clubbtn:has(+ .clubx:not([hidden])){border-right:0}
.clubx{width:var(--ctl); justify-content:center; padding:0; font-size:15px}
.clubx:hover{color:var(--tally); border-color:var(--tally)}
.clubbtn .cn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}

/* escudos: fondo transparente, sin lineas, sin marco */
.cr{width:22px; height:22px; object-fit:contain; flex:none; background:none; border:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.cr.ph{width:22px; height:22px; display:grid; place-items:center; font-size:9px; color:var(--phos-dim);
  font-family:VT323,monospace; border:1px solid var(--line); filter:none}

/* ===== layout ===== */
.shell{flex:1; min-height:0; position:relative; display:grid; grid-template-columns:272px minmax(0,1fr)}
aside{height:100%; min-height:0; display:flex; flex-direction:column;
  border-right:1px solid var(--line-2);
  background-image:var(--scanlines), linear-gradient(180deg, var(--sunk), var(--bg))}
.aside-h{padding:12px 12px 10px; display:grid; gap:9px; border-bottom:1px solid var(--line)}
#modoTorneos{display:grid; gap:9px}
.modeseg button[aria-pressed="true"]{background:var(--amber); color:var(--on-amber); box-shadow:var(--glow-a)}
.clubcard{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 9px; align-items:center;
  padding:9px 10px; border:1px solid var(--line-2); background:var(--panel-2)}
.clubcard .cr{width:28px; height:28px}
.clubcard .txt{min-width:0}
.clubcard b{display:block; font-size:12.5px; color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.clubcard .acciones{grid-column:1/-1; display:flex; gap:6px}
.clubcard .cambiar{flex:1; border:1px solid var(--line); padding:5px 4px; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--phos-dim); text-align:center}
.clubcard .cambiar:hover{color:var(--phos); border-color:var(--phos-dim)}
.clubcard .quitar{color:var(--mute)}
.clubcard .quitar:hover{color:var(--tally); border-color:var(--tally)}
.trow .pos{font-family:VT323,monospace; font-size:15px; color:var(--amber); flex:none}
.rackname{display:flex; align-items:center; gap:8px}
.rackname::after{content:""; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 8px)}
.seg{display:flex; border:1px solid var(--line-2)}
.seg button{flex:1; padding:7px 0; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
.seg button + button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--phos); color:var(--on-phos); font-weight:600; box-shadow:var(--glow-p)}
/* años: el en curso primero, los cerrados en gris hasta que se eligen */
.seasons{margin-bottom:8px}
.seasons .anios{display:flex; gap:4px}
.seasons .aviso{margin:6px 0 0; font-size:10px; line-height:1.4; color:var(--amber); letter-spacing:.04em}
.seasons button{flex:1; padding:5px 0; font-family:VT323,monospace; font-size:15px; line-height:1;
  color:var(--mute); border:1px solid var(--line); background:var(--sunk); letter-spacing:.02em}
.seasons button:hover{color:var(--phos-dim); border-color:var(--line-2)}
.seasons button[aria-pressed="true"]{color:var(--on-phos); background:var(--phos); border-color:var(--phos);
  box-shadow:var(--glow-p)}
.seasons button.hist{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase}
.seasons button.hist[aria-pressed="true"]{background:var(--cyan); border-color:var(--cyan); color:var(--on-phos);
  box-shadow:0 0 14px -4px var(--cyan)}

/* selector de categoría propio: el <select> nativo dibuja el menú del sistema
   y rompe el tubo */
.pickcat{position:relative; display:block}
.catbtn{display:flex; align-items:center; gap:8px; width:100%; background:var(--sunk);
  border:1px solid var(--line-2); color:var(--phos); padding:7px 10px; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; text-align:left}
.catbtn:hover{border-color:var(--phos-dim)}
.catbtn[aria-expanded="true"]{border-color:var(--phos); box-shadow:0 0 0 1px var(--phos-soft)}
.catbtn .catnom{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.catbtn .catn{font-family:VT323,monospace; font-size:16px; letter-spacing:0; color:var(--amber); line-height:1}
.catbtn .flecha{color:var(--phos-dim); font-size:10px; transition:transform .15s ease}
.catbtn[aria-expanded="true"] .flecha{transform:rotate(180deg)}

.catmenu{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; max-height:min(52vh,340px);
  overflow-y:auto; border:1px solid var(--phos-soft); scrollbar-width:thin;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel-2), var(--sunk));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85), var(--inner)}
.catopt{display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; text-align:left;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); position:relative}
.catopt + .catopt{border-top:1px solid var(--line)}
.catopt:hover, .catopt[data-foco="1"]{background:var(--panel-3); color:var(--phos)}
.catopt[aria-selected="true"]{color:var(--phos-hi); text-shadow:var(--glow-p)}
.catopt[aria-selected="true"]::before{content:"›"; position:absolute; left:2px; color:var(--phos)}
.catopt .n{margin-left:auto; font-family:VT323,monospace; font-size:16px; letter-spacing:0; color:var(--amber-dim)}
.catopt[aria-selected="true"] .n{color:var(--amber)}

/* ===== vista transversal del club ===== */
.xhead{display:flex; align-items:center; gap:14px; padding:16px 16px}
.xhead .cr{width:44px; height:44px}
.xhead h2{font-family:VT323,monospace; font-size:32px; line-height:1; color:var(--phos-hi); text-shadow:var(--glow-p);
  text-transform:uppercase; font-weight:400}
.xhead .sub{color:var(--mute); font-size:11.5px; margin-top:3px}
.xhead .pick-otro{margin-left:auto}
.day{display:flex; align-items:center; gap:9px; padding:8px 13px; background:var(--panel-2);
  border-top:1px solid var(--line); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber)}
.day .n{margin-left:auto; color:var(--mute); letter-spacing:.12em}
.x{display:grid; grid-template-columns:56px 96px minmax(0,1fr) 78px 124px; gap:11px; align-items:center;
  padding:7px 12px; width:100%; text-align:left; border-top:1px solid var(--line); position:relative}
.x:hover{background:var(--panel-3)}
.x .hora{font-family:VT323,monospace; font-size:17px; color:var(--amber); line-height:1}
.x .catchip, .xpos .catchip{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--phos-dim);
  border:1px solid var(--line-2); padding:3px 6px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.x .rival{display:flex; align-items:center; gap:9px; min-width:0}
.x .rival .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px}
.x .loc{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); text-align:center}
.x .loc.casa{color:var(--phos)}
.x .cancha{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right}
.x .res{font-family:VT323,monospace; font-size:20px; text-align:center; color:var(--amber); text-shadow:var(--glow-a)}
.x .res.w{color:var(--phos-hi); text-shadow:var(--glow-p)}
.x .res.l{color:var(--mute); text-shadow:none}
.xpos{display:grid; grid-template-columns:104px minmax(0,1fr) 52px 52px 78px; gap:11px; align-items:center;
  padding:7px 12px; border-top:1px solid var(--line); font-size:12.5px; width:100%; text-align:left}
.xpos:hover{background:var(--panel-3)}
.xpos .p{font-family:VT323,monospace; font-size:20px; color:var(--phos); text-align:center}
.xpos .pts{font-family:VT323,monospace; font-size:20px; color:var(--amber); text-align:center}
.xpos .tn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}
.xriv{display:grid; grid-template-columns:minmax(0,1fr) 58px 94px 108px 66px; gap:11px; align-items:center;
  padding:7px 12px; border-top:1px solid var(--line); font-size:12.5px; width:100%; text-align:left}
.xriv:hover{background:var(--panel-3)}
.xriv .rival{display:flex; align-items:center; gap:9px; min-width:0}
.xriv .rival .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}
.xriv .pj{font-family:VT323,monospace; font-size:20px; color:var(--amber); text-align:right}
.xriv .pj small{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.12em; color:var(--mute)}
.xriv .ged{font-variant-numeric:tabular-nums; text-align:center; letter-spacing:.02em; white-space:nowrap}
.xriv .ged em{font-style:normal; font-weight:700}
.xriv .gol{font-variant-numeric:tabular-nums; color:var(--mute); text-align:right; font-size:11px; white-space:nowrap}
@media (max-width:640px){ .nomob{display:none} }
.xriv .barra{display:flex; height:6px; gap:1px; overflow:hidden}
.xriv .barra i{display:block; min-width:0}
.xriv .g, .xriv .barra i.g{color:var(--z-verde)} .xriv .barra i.g{background:var(--z-verde)}
.xriv .e, .xriv .barra i.e{color:var(--z-ambar)} .xriv .barra i.e{background:var(--z-ambar)}
.xriv .p, .xriv .barra i.p{color:var(--z-rojo)}  .xriv .barra i.p{background:var(--z-rojo)}
@media (max-width:900px){
  .xriv{grid-template-columns:minmax(0,1fr) auto auto; row-gap:6px; gap:9px;
    grid-template-areas:"riv pj ged" "bar bar gol"}
  .xriv .rival{grid-area:riv} .xriv .pj{grid-area:pj} .xriv .ged{grid-area:ged}
  .xriv .barra{grid-area:bar; height:5px; align-self:center} .xriv .gol{grid-area:gol}
}

.filter{display:flex; align-items:center; gap:8px; border:1px solid var(--line-2); padding:6px 9px; background:var(--sunk)}
.filter input{width:100%; font-size:12.5px; color:var(--phos)}
.filter input::placeholder{color:var(--mute)}
.tlist{overflow-y:auto; padding:6px 8px 30px; counter-reset:ch; scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
.tgroup{padding:14px 6px 6px; position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:7px;
  background:linear-gradient(180deg, var(--sunk) 70%, transparent)}
.tgroup::after{content:""; flex:1; height:1px; background:var(--line)}
.trow{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; width:100%;
  text-align:left; padding:6px 9px 6px 36px; counter-increment:ch; border:1px solid transparent}
.trow::before{content:counter(ch,decimal-leading-zero); position:absolute; left:8px; top:50%;
  transform:translateY(-50%); font-family:VT323,monospace; font-size:17px; color:var(--phos-soft)}
.trow:hover{background:var(--panel-2); border-color:var(--line)}
.trow[aria-current="true"]{background:var(--sel-bg); border-color:var(--phos-soft)}
.trow[aria-current="true"]::before{color:var(--amber)}
.trow[aria-current="true"] .tn{color:var(--phos-hi); text-shadow:var(--glow-p)}
.trow .tn{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}
/* el rojo queda reservado para lo que está pasando ahora (el tally del vivo):
   un torneo en curso es verde, uno terminado un punto apagado */
.st{width:7px; height:7px; border-radius:50%; background:var(--line-2); flex:none;
  border:1px solid transparent}
.st.on{background:var(--z-verde); box-shadow:0 0 8px -2px var(--z-verde)}
.st.fin{background:transparent; border-color:var(--line-2)}
main{min-width:0; height:100%; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 18px 26px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
main > *{flex:none; min-width:0}
main section > *{min-width:0}
.scrim{position:absolute; inset:0; z-index:65; background:rgba(3,6,5,.6); opacity:0; pointer-events:none;
  transition:opacity .18s ease}
.scrim[data-open="1"]{opacity:1; pointer-events:auto}

/* ===== pantalla ===== */
.screen{position:relative; border:1px solid var(--edge); border-radius:10px; overflow:hidden;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk));
  box-shadow:var(--inner), var(--shadow)}
.mon{display:flex; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid var(--line);
  background:var(--panel-2); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim)}
.mon .r{margin-left:auto; color:var(--mute)}

/* ===== ident ===== */
.ident{position:relative; padding:16px 18px 0}

/* CTA a la videoteca: vive en el corner, con el rosa de Cliply y su glitch */
.videoteca{position:absolute; top:14px; right:18px; z-index:3; display:flex; align-items:center; gap:12px;
  padding:9px 14px 9px 11px; text-decoration:none; color:var(--bone);
  border:1px solid var(--cliply-pink); background:var(--panel-2);
  box-shadow:0 0 0 3px rgba(255,184,209,.07), inset 0 0 22px -12px var(--cliply-pink)}
.videoteca:hover{background:var(--panel-3); box-shadow:0 0 0 3px rgba(255,184,209,.14), 0 0 22px -8px var(--cliply-pink)}
.videoteca .play{width:26px; height:26px; flex:none; display:grid; place-items:center; font-size:10px;
  color:var(--cliply-pink); border:1px solid var(--cliply-pink); border-radius:50%}
.videoteca:hover .play{background:var(--cliply-pink); color:#170A02}
.videoteca .vt{display:flex; flex-direction:column; gap:3px; line-height:1}
.videoteca .vt b{font-size:12.5px; font-weight:500}
.videoteca .vt .lab{font-size:8.5px; letter-spacing:.14em}
.videoteca .cliply.sm{height:14px; margin-left:2px}
.ident .eyebrow{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.glitch{position:relative; display:inline-block; font-family:VT323,monospace; font-weight:400;
  font-size:clamp(28px,3.8vw,46px); line-height:1; letter-spacing:.01em; color:var(--phos-hi);
  text-shadow:var(--glow-p); text-transform:uppercase}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; left:0; top:0; pointer-events:none; opacity:0}
.glitch::before{color:var(--cyan); animation:g1 7s steps(1) infinite}
.glitch::after{color:var(--magenta); animation:g2 7s steps(1) infinite}
@keyframes g1{0%,90%{opacity:0; transform:none}
  91%{opacity:.85; transform:translate(-3px,1px); clip-path:inset(0 0 58% 0)}
  93%{opacity:0} 95%{opacity:.7; transform:translate(2px,-2px); clip-path:inset(62% 0 0 0)} 96%,100%{opacity:0}}
@keyframes g2{0%,90%{opacity:0; transform:none}
  91.5%{opacity:.8; transform:translate(3px,-1px); clip-path:inset(48% 0 22% 0)}
  93.5%{opacity:0} 95.5%{opacity:.6; transform:translate(-2px,2px); clip-path:inset(10% 0 70% 0)} 97%,100%{opacity:0}}
.caret{display:inline-block; width:.5em; height:1em; background:var(--phos); vertical-align:-.08em;
  margin-left:.12em; animation:caret 1.05s steps(1) infinite; box-shadow:var(--glow-p)}
@keyframes caret{0%,50%{opacity:1} 51%,100%{opacity:0}}
.meta{display:flex; gap:14px; flex-wrap:wrap; margin-top:11px; font-size:11px; color:var(--mute)}
.meta b{color:var(--phos); font-weight:500}
.chipline{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.chip{border:1px solid var(--line-2); padding:5px 10px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); background:var(--sunk)}
.chip:hover{border-color:var(--phos-dim); color:var(--phos)}
.chip[aria-pressed="true"]{background:var(--phos); border-color:var(--phos); color:var(--on-phos); font-weight:600}
.tabs{display:flex; margin:14px 0 0; border-top:1px solid var(--line); counter-reset:chsel;
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative; padding:10px 14px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); border-right:1px solid var(--line)}
.tabs button::before{content:"CH0" counter(chsel) " "; counter-increment:chsel; color:var(--phos-soft)}
.tabs button:hover{color:var(--phos); background:var(--panel-2)}
.tabs button[aria-selected="true"]{color:var(--on-phos); background:var(--phos); font-weight:600}
.tabs button[aria-selected="true"]::before{color:var(--on-phos); opacity:.65}

/* ===== franja mi club — OJO: .mine la usa la fila de la tabla, no reusar ===== */
.clubstrip{display:flex; flex-direction:column; gap:9px; padding:12px 14px; border:1px solid var(--line-2);
  border-left:2px solid var(--amber); background-image:var(--scanlines), linear-gradient(var(--panel-2), var(--panel-2))}
.clubstrip .cab{display:flex; align-items:center; gap:12px}
.clubstrip.mirando{border-left-color:var(--cyan)}
.clubstrip .cerrar{color:var(--mute); font-size:13px; line-height:1; padding:2px 4px}
.clubstrip .cerrar:hover{color:var(--tally)}
/* ojo: .rec ya es el testigo REC del header — esto es otra cosa */
.rachas{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--mute)}
.rachas .lab{font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); font-weight:400}
.rachas b{color:var(--bone); font-weight:600}
.rachas b.g{color:var(--z-verde)} .rachas b.e{color:var(--z-ambar)} .rachas b.p{color:var(--z-rojo)}
.rachas i{font-style:normal; color:var(--line-2)}
.clubstrip .lu{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}
.clubstrip .cr{width:32px; height:32px}
.clubstrip .txt{min-width:0; font-size:12.5px; color:var(--bone)}
.clubstrip .txt b{color:var(--amber); font-weight:500}
.clubstrip .go{margin-left:auto; color:var(--phos); font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.clubstrip .go:hover{text-shadow:var(--glow-p)}

/* ===== scrubber ===== */
.scrub{position:sticky; top:-16px; z-index:25; display:flex; align-items:center; gap:9px; padding:8px 10px;
  border:1px solid var(--line-2); background-image:var(--scanlines), linear-gradient(var(--sunk), var(--sunk));
  box-shadow:0 12px 24px -20px rgba(0,0,0,.8)}
.scrub .rail{display:flex; gap:4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
  padding:2px 0; min-width:0; flex:1}
.scrub .rail::-webkit-scrollbar{display:none}
.fk{flex:none; min-width:32px; height:30px; padding:0 6px; display:inline-flex; align-items:center;
  justify-content:center; font-family:VT323,monospace; font-size:16px; line-height:1;
  color:var(--phos-soft); border:1px solid var(--line); background:var(--panel)}
.fk:hover{color:var(--phos); border-color:var(--phos-dim)}
.fk.played{color:var(--phos-dim)}
.fk.ancho{min-width:auto; padding:0 12px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase}
.fk[aria-current="true"]{background:var(--amber); border-color:var(--amber); color:var(--on-amber); box-shadow:var(--glow-a)}
.arrow{flex:none; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); color:var(--mute); background:var(--panel); line-height:1}
.arrow:hover:not(:disabled){border-color:var(--phos-dim); color:var(--phos)}
.arrow:disabled{opacity:.3}

/* ===== video en la videoteca de Cliply ===== */
.mrow{position:relative}
/* el botón de video se cuelga de la línea del partido, no de la fila entera:
   con el historial abierto la fila mide cinco veces más */
.mrow .cabeza{position:relative}
.mrow .m{padding-right:44px}
.verlo{position:absolute; right:9px; top:50%; transform:translateY(-50%); width:26px; height:26px;
  display:grid; place-items:center; font-size:10px; line-height:1; text-decoration:none;
  color:var(--cliply-pink); border:1px solid var(--line-2); background:var(--sunk)}
.verlo:hover{border-color:var(--cliply-pink); box-shadow:0 0 14px -4px var(--cliply-pink)}
.videoteca:hover .ga{opacity:1; animation:cliply-glitch .4s steps(2) infinite}
.videoteca:hover .gb{opacity:1; animation:cliply-glitch .4s steps(2) infinite reverse}
.videoteca:hover .onda{animation:cliply-signal .5s ease-out infinite}
.videoteca:hover .o2{animation-delay:.13s}
.videoteca:hover .o3{animation-delay:.26s}

/* ===== partidos ===== */
.card{border:1px solid var(--edge); border-radius:10px; overflow:hidden;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk)); box-shadow:var(--inner)}
.card + .card{margin-top:14px}
.card-h{display:flex; align-items:center; gap:10px; padding:7px 12px; border-bottom:1px solid var(--line);
  background:var(--panel-2); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim)}
.m{display:grid; grid-template-columns:88px minmax(0,1fr) 84px minmax(0,1fr) 140px; gap:11px; align-items:center;
  padding:7px 12px; width:100%; text-align:left; position:relative}
.card .m{border-top:1px solid var(--line)}
.card-h + .m{border-top:0}
.m::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent}
.m:hover{background:var(--panel-3)}
.m:hover::before{background:var(--phos-soft)}
.m .time{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.m .side{display:flex; align-items:center; gap:9px; min-width:0}
.m .side.h{flex-direction:row-reverse; text-align:right}
.m .nm{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}
.m.done .win .nm{color:var(--phos-hi); text-shadow:var(--glow-p); font-weight:600}
.m.done .lose .nm{color:var(--mute)}
.m .res{font-family:VT323,monospace; font-size:25px; line-height:.9; text-align:center; color:var(--amber);
  text-shadow:var(--glow-a); font-variant-numeric:tabular-nums}
.m .res small{font-size:13px; color:var(--amber-dim)}
.m .res.soon{font-size:15px; color:var(--mute); text-shadow:none; letter-spacing:.06em}
.m.live .res{color:var(--tally); text-shadow:var(--glow-t)}
.m.live::before{background:var(--tally)}
.m .venue{font-size:10px; letter-spacing:.06em; color:var(--mute); text-align:right; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m.ismine{background:var(--mine-bg)}
.m.ismine::before{background:var(--amber)}
.livetag{display:inline-flex; align-items:center; gap:6px; color:var(--tally); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:var(--glow-t);
  animation:blip 1.3s ease-in-out infinite}
.sheet{display:flex; gap:10px 16px; flex-wrap:wrap; align-items:center; padding:9px 13px; margin:0;
  border-top:1px dashed var(--line-2); background:var(--sunk); font-size:11px; color:var(--mute)}
.sheet .donde{opacity:.85}
.sheet .h2hbox{flex-basis:100%}
/* la fila se abre: sin esta flecha nadie se enteraba de que abajo había algo */
.m.abre{padding-right:30px}
.mrow:has(.verlo) .m.abre{padding-right:62px}
.m.abre::after{content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:11px; line-height:1; color:var(--mute); pointer-events:none; transition:transform .15s, color .15s}
.mrow:has(.verlo) .m.abre::after{right:44px}
.m.abre:hover::after{color:var(--phos)}
.m.abre[aria-expanded="true"]::after{transform:translateY(-50%) rotate(180deg); color:var(--phos)}
@media (max-width:640px){ .mrow:has(.verlo) .m.abre::after{right:40px} }
.sheet a{color:var(--phos); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; font-size:10px}
.sheet a:hover{text-shadow:var(--glow-p)}

/* historial entre los dos equipos, dentro del detalle del partido */
.cruces{display:flex; flex-direction:column; gap:2px; width:100%; max-width:540px;
  list-style:none; padding:0; margin:0}
.cruces li{display:grid; grid-template-columns:74px 52px 60px minmax(0,1fr); gap:10px; align-items:center;
  padding:4px 8px; border-left:2px solid var(--line-2); background:var(--panel-3); font-size:11px}
.cruces li.g{border-left-color:var(--z-verde)}
.cruces li.e{border-left-color:var(--z-ambar)}
.cruces li.p{border-left-color:var(--z-rojo)}
.cruces .f{font-variant-numeric:tabular-nums; color:var(--mute); letter-spacing:.02em}
.cruces .lv{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.cruces .lv.casa{color:var(--phos-dim)}
.cruces .mk{font-family:VT323,monospace; font-size:18px; line-height:1; color:var(--bone); letter-spacing:.04em}
.cruces .mk i{font-style:normal; color:var(--mute); margin:0 1px}
.cruces li.g .mk{color:var(--z-verde)} .cruces li.p .mk{color:var(--z-rojo)} .cruces li.e .mk{color:var(--z-ambar)}
.cruces .dato{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mute); font-size:10.5px;
  letter-spacing:.04em; text-transform:uppercase}
@media (max-width:640px){
  .cruces li{grid-template-columns:66px 46px 54px minmax(0,1fr); gap:7px; padding:4px 6px}
  .cruces .dato{font-size:9.5px}
}

.h2h{display:flex; flex-direction:column; gap:7px; width:100%; font-size:11px}
.h2h .cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.h2h .quien{margin-left:auto; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.h2h .quien i{font-style:normal}
.mascruces{align-self:flex-start; color:var(--phos); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:2px 0}
.mascruces:hover{text-shadow:var(--glow-p)}
.h2h .lab{color:var(--mute); letter-spacing:.18em; text-transform:uppercase; font-size:9.5px; font-weight:400}
.h2h .tot{font-variant-numeric:tabular-nums; color:var(--bone)}
.h2h em{font-style:normal; font-weight:700}
.h2h .g, .h2h i.g{color:var(--z-verde)}
.h2h .e, .h2h i.e{color:var(--z-ambar)}
.h2h .p, .h2h i.p{color:var(--z-rojo)}
.h2h.vacio{color:var(--mute); font-size:10px; letter-spacing:.08em}


/* la tabla general de la tira: una columna por categoría */
.tiratab{min-width:640px}
.tiratab tbody tr{cursor:default}
.tiratab tbody tr:hover td, .tiratab tbody tr:hover td.club{background:var(--panel)}
.tiratab tr.mine:hover td, .tiratab tr.mine:hover td.club{background:var(--mine-bg)}
.tiratab .catpts{text-align:center; font-variant-numeric:tabular-nums; color:var(--bone)}
.tiratab .catpts .vacio{color:var(--mute)}
.tiratab thead th{white-space:nowrap}
.tiratab .pts{font-family:VT323,monospace; font-size:19px; color:var(--amber); text-align:center}
@media (max-width:640px){ .tiratab{min-width:560px} }

/* ===== tabla ===== */
.tw{border:1px solid var(--edge); border-radius:10px; overflow-x:auto;
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk))}
table{border-collapse:collapse; width:100%; min-width:660px}
th,td{height:34px; padding:0 8px; text-align:right; font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums}
th{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:400; height:32px;
  border-bottom:1px solid var(--line-2); background:var(--panel-2); position:sticky; top:0; z-index:2}
th.club,td.club{text-align:left; position:sticky; left:0; background:var(--panel); min-width:210px;
  max-width:340px; box-shadow:8px 0 10px -10px rgba(0,0,0,.55)}
th.club{background:var(--panel-2); z-index:3}
tbody tr{cursor:pointer}
tbody tr + tr td{border-top:1px solid var(--line)}
tbody tr:hover td, tbody tr:hover td.club{background:var(--panel-3)}
tr.mine td, tr.mine td.club{background:var(--mine-bg)}
tr.mine td.club{color:var(--amber)}
/* la fila que estás mirando: no es tu club, es la que abriste */
tr.mirando td{background:color-mix(in srgb, var(--cyan) 10%, transparent)}
tr.mirando td.club{color:var(--cyan)}
td.p{width:44px; text-align:center; font-family:VT323,monospace; font-size:17px; color:var(--phos-soft); position:relative}
td.p::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px; background:transparent}
tr.z-verde td.p{color:var(--z-verde)} tr.z-verde td.p::before{background:var(--z-verde)}
tr.z-cyan td.p{color:var(--z-cyan)} tr.z-cyan td.p::before{background:var(--z-cyan)}
tr.z-ambar td.p{color:var(--z-ambar)} tr.z-ambar td.p::before{background:var(--z-ambar)}
tr.z-rojo td.p{color:var(--z-rojo)} tr.z-rojo td.p::before{background:var(--z-rojo)}
td.pts{font-family:VT323,monospace; font-size:20px; color:var(--amber); text-shadow:var(--glow-a)}
.cc{display:flex; align-items:center; gap:10px; color:var(--bone); min-width:0}
.cc .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.cc .cr{width:22px; height:22px}

.dg.pos{color:var(--phos)} .dg.neg{color:var(--tally)}
.form{display:flex; gap:3px; justify-content:flex-end}
.form i{width:8px; height:8px; font-style:normal}
/* el promedio solo aparece en el histórico, donde cada equipo jugó lo suyo */
th.prom, td.prom{display:none}
table.conProm th.prom, table.conProm td.prom{display:table-cell}
.tiratab th.prom, .tiratab td.prom{display:table-cell}
td.prom{font-variant-numeric:tabular-nums; color:var(--phos-dim); text-align:center}
.temps{display:inline-flex; align-items:baseline; gap:5px; font-variant-numeric:tabular-nums; color:var(--bone)}
.temps small{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.fG{background:var(--phos); box-shadow:var(--glow-p)}
.fE{background:var(--amber-dim)} .fP{background:var(--tally)}

.legend{display:flex; flex-wrap:wrap; gap:18px; margin:0 2px; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute)}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend i{width:14px; height:4px; display:inline-block; border-radius:1px}
.legend i.z-verde{background:var(--z-verde)}
.legend i.z-cyan{background:var(--z-cyan)}
.legend i.z-ambar{background:var(--z-ambar)}
.legend i.z-rojo{background:var(--z-rojo)}

/* ===== goleadores ===== */
.filtragol{display:flex; align-items:center; gap:7px; margin-left:auto; margin-right:14px;
  border:1px solid var(--line-2); background:var(--sunk); padding:4px 8px; min-width:0; max-width:260px; flex:1}
.filtragol input{width:100%; font-size:11.5px; color:var(--phos); background:none; border:0; min-width:0}
.filtragol input::placeholder{color:var(--mute); text-transform:none; letter-spacing:0}
.filtragol:focus-within{border-color:var(--phos-dim)}
@media (max-width:640px){ .filtragol{max-width:none; margin-right:8px} }

/* .gl ya son las capas del glitch del logo de Cliply: la fila de goleador es .gol */
.gol{display:grid; grid-template-columns:40px 22px minmax(0,1fr) 90px 44px 78px; gap:11px; align-items:center;
  padding:7px 12px}
.gol + .gol{border-top:1px solid var(--line)}
.gol:hover{background:var(--panel-3)}
.gol .rk{font-family:VT323,monospace; font-size:18px; color:var(--phos-soft); text-align:center}
.gol.first .rk{color:var(--amber); text-shadow:var(--glow-a)}
.gol .who b{font-weight:500; color:var(--bone); font-size:13px}
.gol .who span{color:var(--mute); font-size:10.5px; margin-left:9px; text-transform:uppercase; letter-spacing:.08em}
.gol .bar{height:6px; background:var(--sunk); border:1px solid var(--line); overflow:hidden}
.gol .bar i{display:block; height:100%; background:var(--phos-soft)}
.gol.first .bar i{background:var(--phos); box-shadow:var(--glow-p)}
.gol .g{font-family:VT323,monospace; font-size:21px; line-height:1; text-align:right; color:var(--phos-hi)}
.gol .det{font-size:9.5px; color:var(--mute); letter-spacing:.06em; text-align:right; white-space:nowrap;
  text-transform:uppercase}

/* cartel de instalación: vive arriba de la barra de canales del celular */
.instalar{position:fixed; left:10px; right:10px; z-index:70; display:flex; align-items:center; gap:11px;
  padding:11px 12px; border:1px solid var(--phos-soft); border-left:2px solid var(--phos);
  background-color:var(--panel); /* tapa lo que haya abajo: es un cartel flotante */
  background-image:var(--scanlines), linear-gradient(180deg, var(--panel-2), var(--sunk));
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9); animation:subeInstalar .35s ease-out;
  bottom:calc(var(--pie, calc(50px + env(safe-area-inset-bottom))) + 8px)}
@keyframes subeInstalar{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .instalar{animation:none} }
.instalar .ico{flex:none; width:28px; height:28px; color:var(--phos); display:grid; place-items:center}
.instalar .ico svg{width:22px; height:22px}
.instalar .txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:var(--mute)}
.instalar .txt b{font-size:12.5px; font-weight:500; color:var(--bone)}
.instalar .ok{flex:none; padding:7px 12px; border:1px solid var(--phos);
  color:var(--on-phos); background:var(--phos); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; box-shadow:var(--glow-p)}
.instalar .no{flex:none; color:var(--mute); font-size:13px; padding:4px 2px}
.instalar .no:hover{color:var(--tally)}
@media (min-width:901px){ .instalar{display:none} }

.minitab{min-width:520px}
.minitab tr.gana td{background:color-mix(in srgb, var(--amber) 9%, transparent)}
.minitab tr.gana td.club{color:var(--amber)}

/* ===== cuadro de play off ===== */
.cuadro{position:relative; display:flex; gap:28px; align-items:stretch; justify-content:flex-start; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.ronda-col{flex:0 0 min(300px, 78vw); display:flex; flex-direction:column; gap:8px}
.rc-h{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); padding:0 2px 4px;
  border-bottom:1px solid var(--line)}
/* el cuadro partido: las dos ramas entran hacia la final, que queda al medio */
.cuadro.doble{align-items:center}
/* las dos ramas miden lo mismo: si no, la semi de un lado queda más arriba que la del otro */
.cuadro.doble .rama{display:flex; gap:28px; align-items:stretch; align-self:stretch; flex:1}
.cuadro.doble .ronda-col.centro{align-self:stretch}
.cuadro.doble .rama.der{flex-direction:row-reverse}
.cuadro.doble .ronda-col{flex:1 1 180px; min-width:180px}
.cuadro.doble .ronda-col.centro{flex:0 0 220px; min-width:220px}

.cuadro.doble .rama.der .rc-h{text-align:right}
.llaves{display:flex; flex-direction:column; justify-content:space-around; gap:12px; flex:1}
.llaves.sueltas{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); padding:10px 12px 12px}

.llave{position:relative; border:1px solid var(--line-2); background-image:var(--scanlines),
  linear-gradient(180deg, var(--panel-2), var(--sunk)); background-color:var(--panel); padding:2px 0 0}
.llave.abierta{border-style:dashed}
/* los hilos entre rondas los dibuja dibujarHilos() en un SVG encima del cuadro */
.cuadro svg.hilos{position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:0}
.cuadro svg.hilos path{fill:none; stroke:var(--line-2); stroke-width:1.5}
.cuadro svg.hilos path.gana{stroke:var(--phos-dim); stroke-width:1.5}
.cuadro .ronda-col{position:relative; z-index:1}
.llave .lado{display:grid; grid-template-columns:20px minmax(0,1fr) 42px; gap:8px; align-items:center;
  padding:7px 9px; font-size:12px}
.llave .lado + .lado{border-top:1px solid var(--line)}
.llave .lado .cr{width:20px; height:20px}
.llave .lado .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--mute)}
.llave .lado .gg{font-family:VT323,monospace; font-size:19px; line-height:1; text-align:right; color:var(--mute)}
.llave .lado .gg small{font-family:"IBM Plex Mono",monospace; font-size:9px; margin-left:3px; color:var(--mute)}
.llave .lado.pasa{background:color-mix(in srgb, var(--phos) 8%, transparent)}
.llave .lado.pasa .nm{color:var(--phos-hi); font-weight:600}
.llave .lado.pasa .gg{color:var(--phos-hi); text-shadow:var(--glow-p)}
.llave .lado.cae{opacity:.62}
.llave .piernas{display:flex; gap:6px; justify-content:flex-end; padding:4px 9px 6px; font-size:9.5px;
  color:var(--mute); letter-spacing:.06em; border-top:1px dashed var(--line)}
.llave .piernas i{font-style:normal; color:var(--line-2)}
.llave .piernas .pos{margin-right:auto; color:var(--amber); letter-spacing:.1em; text-transform:uppercase}
@media (max-width:640px){
  .cuadro{gap:10px}
  .ronda-col{flex:0 0 min(260px, 82vw)}
  .llaves.sueltas{grid-template-columns:1fr}
}

/* el campeón: lo único del sitio que se permite una vuelta de honor */
.campeon{position:relative; display:flex; align-items:center; gap:18px; padding:18px 20px; overflow:hidden;
  border:1px solid var(--amber); border-left:3px solid var(--amber);
  background-color:var(--panel);
  background-image:var(--scanlines), radial-gradient(120% 180% at 12% 50%, rgba(255,176,32,.18), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--sunk))}
.campeon .cinta{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,176,32,.06) 26px 30px);
  animation:brilla 6s linear infinite}
@keyframes brilla{from{transform:translateX(-30px)} to{transform:translateX(30px)}}
@media (prefers-reduced-motion:reduce){ .campeon .cinta{animation:none} }
.campeon .cr.big{width:54px; height:54px; flex:none; filter:drop-shadow(0 0 12px rgba(255,176,32,.35))}
.campeon .txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.campeon .lab{font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--amber)}
.campeon b{font-family:VT323,monospace; font-weight:400; font-size:clamp(26px,3.4vw,40px); line-height:1;
  color:var(--phos-hi); text-shadow:var(--glow-p)}
.campeon .fin{font-size:11px; color:var(--mute)}
.campeon .fin em{font-style:normal; color:var(--bone); font-weight:600}
.campeon .copa{margin-left:auto; font-size:34px; line-height:1; filter:saturate(.85)}
/* el ascenso no es un título: verde en vez de oro, y una flecha en vez de la copa */
.campeon.ascenso{border-color:var(--phos-dim); border-left-color:var(--phos);
  background-image:var(--scanlines), radial-gradient(120% 180% at 12% 50%, rgba(59,240,140,.16), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--sunk))}
.campeon.ascenso .cinta{background:repeating-linear-gradient(115deg, transparent 0 26px, rgba(59,240,140,.06) 26px 30px)}
.campeon.ascenso .lab{color:var(--phos)}
.campeon.ascenso .cr.big{filter:drop-shadow(0 0 12px rgba(59,240,140,.35))}
.campeon.ascenso .copa{font-size:26px; color:var(--phos); text-shadow:var(--glow-p)}
/* quedarse tampoco es un título: ni oro ni verde, y una barra en vez de la flecha */
.campeon.queda{border-color:color-mix(in srgb, var(--cyan) 45%, transparent); border-left-color:var(--cyan);
  background-image:var(--scanlines), radial-gradient(120% 180% at 12% 50%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--sunk))}
.campeon.queda .cinta{background:repeating-linear-gradient(115deg, transparent 0 26px, color-mix(in srgb, var(--cyan) 6%, transparent) 26px 30px)}
.campeon.queda .lab{color:var(--cyan)}
.campeon.queda .cr.big{filter:drop-shadow(0 0 12px color-mix(in srgb, var(--cyan) 30%, transparent))}
.campeon.queda b{color:var(--bone); text-shadow:none}
.campeon.queda .copa{font-size:26px; color:var(--cyan)}
.ronda .card-h .lab:last-child{color:var(--mute)}
@media (max-width:640px){
  .campeon{gap:12px; padding:14px}
  .campeon .cr.big{width:40px; height:40px}
  .campeon .copa{font-size:26px}
}

/* barra de carga: el único indicador de que algo está viajando */
.cargabar{position:fixed; left:0; right:0; top:0; height:2px; z-index:200; opacity:0; pointer-events:none;
  transition:opacity .15s; background:linear-gradient(90deg, transparent, var(--phos), transparent);
  background-size:38% 100%; background-repeat:no-repeat}
.cargabar.on{opacity:1; animation:cargaCorre 1.1s linear infinite}
@keyframes cargaCorre{from{background-position:-40% 0} to{background-position:140% 0}}
/* cambiando de torneo: lo viejo se apaga y pasa el barrido, como al cambiar de canal.
   Con retardo: si la señal llega al toque (snapshot), no parpadea nada */
main{position:relative}
body.cargando main{pointer-events:none}
body.cargando main > *{opacity:.35; filter:saturate(.5); transition:opacity .15s .12s, filter .15s .12s}
main::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:20; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, var(--phos) 30%, var(--phos-hi) 50%, var(--phos) 70%, transparent);
  box-shadow:0 0 14px var(--phos)}
body.cargando main::before{opacity:1; animation:barrido 1.1s linear .12s infinite}
@keyframes barrido{from{top:0} to{top:100%}}
/* fijo a la ventana: main scrollea y el cartel tiene que verse esté donde esté uno */
main::after{content:"● sintonizando"; position:fixed; left:50%; top:38vh; transform:translate(-50%,0) scale(.96); z-index:21; pointer-events:none; white-space:nowrap;
  opacity:0; padding:10px 18px; border:1px solid var(--phos-dim); background:color-mix(in srgb, var(--panel) 92%, transparent);
  color:var(--phos); font-family:VT323,"IBM Plex Mono",monospace; font-size:22px; letter-spacing:.12em; text-transform:uppercase;
  text-shadow:var(--glow-p); box-shadow:0 0 24px color-mix(in srgb, var(--phos) 25%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--phos) 12%, transparent);
  transition:opacity .15s .12s, transform .15s .12s}
body.cargando main::after{opacity:1; transform:translate(-50%,0) scale(1); animation:titila 1s steps(2) .12s infinite}
@keyframes titila{50%{color:var(--phos-hi)}}
@media (prefers-reduced-motion:reduce){ body.cargando main::before{animation:none; opacity:0} body.cargando main::after{animation:none} }
@media (prefers-reduced-motion:reduce){ .cargabar.on{animation:none; background-position:50% 0} }

/* ===== paleta ⌘K ===== */
.pal{position:fixed; inset:0; z-index:210; background:rgba(3,6,5,.6); display:none;
  align-items:flex-start; justify-content:center; padding:10vh 16px 16px}
:root[data-theme="light"] .pal{background:rgba(60,55,40,.34)}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .pal{background:rgba(60,55,40,.34)} }
.pal[open]{display:flex}
.palbox{width:min(640px,100%); border:1px solid var(--phos-soft); display:flex; flex-direction:column;
  max-height:72vh; overflow:hidden; background-image:var(--scanlines), linear-gradient(180deg, var(--panel), var(--sunk));
  box-shadow:var(--shadow), var(--inner)}
.palhead{display:flex; align-items:stretch; border-bottom:1px solid var(--line-2); background:var(--sunk)}
.palbox input{flex:1; min-width:0; padding:15px 16px; font-size:15px; color:var(--phos); background:none}
/* en el celular no hay esc ni afuera donde tocar: la salida es este botón */
.palx{flex:none; padding:0 18px; font-size:15px; color:var(--mute); border-left:1px solid var(--line)}
.palx:hover{color:var(--tally); background:var(--panel-2)}
.palbox input::placeholder{color:var(--mute)}
.palres{overflow-y:auto; padding:4px}
.pgroup{padding:10px 12px 4px}
.pitem{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:11px; align-items:center; width:100%;
  padding:8px 11px; text-align:left; font-size:12.5px; color:var(--bone); position:relative}
.pitem[data-sel="1"]{background:var(--sel-bg); color:var(--phos-hi)}
.pitem[data-sel="1"]::before{content:"›"; position:absolute; left:2px; color:var(--phos)}
.pitem .sub{font-size:9.5px; color:var(--mute); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.pitem .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.palfoot{border-top:1px solid var(--line-2); padding:8px 14px; display:flex; gap:18px; background:var(--sunk)}

/* ===== sin señal ===== */
.empty{position:relative; padding:46px 16px; text-align:center; color:var(--mute); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; overflow:hidden}
.empty::before{content:""; position:absolute; inset:0; opacity:.16; background-size:120px 120px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23s)'/></svg>")}
.empty::after{content:"NO SIGNAL"; position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font-family:VT323,monospace; font-size:15px; letter-spacing:.3em; color:var(--tally); opacity:.75}

.sign{flex:none; display:flex; align-items:center; gap:14px; padding:0 18px; height:48px;
  border-top:1px solid var(--line-2); z-index:58;
  background-image:var(--scanlines), linear-gradient(var(--panel-2), var(--sunk))}
.sign .ahba{width:28px; height:auto; flex:none; opacity:.75; filter:grayscale(.35)}
.sign .note a{color:var(--phos); text-decoration:none}
.sign .note a:hover{text-decoration:underline}
.sign .note{flex:1; min-width:0; border:0; padding:0; font-size:10.5px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sign-cliply{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--bone); flex:none;
  border-left:1px solid var(--line); padding-left:16px; height:26px}
.sign-cliply .cliply.md{height:17px}

.sign .ahba{width:42px; height:auto; flex:none; opacity:.72; filter:grayscale(.35)}
.sign .note{flex:1}
:root[data-theme="dark"] .sign .ahba, :root:not([data-theme="light"]) .sign .ahba{filter:grayscale(.4) brightness(1.15)}
.note{margin:0; padding:12px 14px; border:1px dashed var(--line-2); color:var(--mute); font-size:11px; line-height:1.7}
.note b{color:var(--phos-dim)}
[hidden]{display:none !important}

/* ===== encendido ===== */
.screen{animation:power .42s cubic-bezier(.2,.9,.3,1) backwards; transform-origin:center}
.card,.tw{animation:power .26s cubic-bezier(.2,.9,.3,1) backwards; transform-origin:center}
@keyframes power{0%{transform:scaleY(.006); filter:brightness(2.6); opacity:.9}
  55%{transform:scaleY(.06); filter:brightness(1.6)} 100%{transform:none; filter:none; opacity:1}}

@media (max-width:1000px){
  .shell{grid-template-columns:minmax(0,1fr)}
  aside{position:absolute; inset:0 auto 0 0; width:min(290px,86vw); z-index:70; transform:translateX(-101%);
    transition:transform .2s ease; box-shadow:24px 0 60px -30px rgba(0,0,0,.7)}
  aside[data-open="1"]{transform:none}
  .menubtn{display:inline-flex !important}
  main{padding:14px 12px 90px}
  .m{grid-template-columns:74px minmax(0,1fr) 78px minmax(0,1fr); row-gap:4px}
  .m .venue{grid-column:2/-1; text-align:left}
  .x{grid-template-columns:56px minmax(0,1fr) 76px; row-gap:5px}
  .x .catchip{grid-column:1/3} .x .cancha{grid-column:1/-1; text-align:left}
  .xpos{grid-template-columns:76px minmax(0,1fr) 44px 44px; row-gap:4px}
  .xpos .racha{grid-column:2/-1}
  .clock{display:none}
}
@media (min-width:1001px){ .deck .menubtn{display:none} }
@media (max-width:760px){
  /* deck compacto: marca + tally + accesos */
  .deck-in{gap:8px; padding:8px 12px}
  .wm .nm b{font-size:22px} .wm .nm span{display:none}
  .logo{width:26px; height:26px}
  .kbtn{padding:8px 11px} .kbtn .txt{display:none} .kbtn kbd{display:none} .kbtn .ico{display:block}
  .clubbtn{padding:4px 8px 4px 4px} .clubbtn .cn{display:none}
  .arrow{width:34px; height:34px}

  /* la barra de canales crece si un nombre se parte en dos líneas (app.js mide --canales) */
  :root{--pie:var(--canales, calc(50px + env(safe-area-inset-bottom)))}
  main{padding:12px 12px calc(var(--pie) + 46px); gap:12px}
  .scrub{top:-12px}
  .ident{padding:16px 14px 0}
  .videoteca{position:static; margin:0 0 14px; justify-content:flex-start}
  .glitch{font-size:32px}
  .meta{gap:10px; font-size:11px}

  /* canales al pie: alcance del pulgar.
     .screen no puede animar transform acá: crearía containing block para la barra fixed */
  .screen{animation:none}
  .tabs{position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0; border-top:1px solid var(--line-2);
    background-image:var(--scanlines), linear-gradient(180deg, var(--panel-2), var(--sunk));
    padding-bottom:env(safe-area-inset-bottom); overflow:visible}
  .tabs button{flex:1; padding:13px 4px 12px; font-size:10.5px; line-height:1.2; letter-spacing:.08em; border-right:1px solid var(--line);
    border-bottom:2px solid transparent}
  .tabs button:last-child{border-right:0}
  .tabs button::before{content:""; display:block; height:0}
  .tabs button[aria-selected="true"]{background:transparent; color:var(--phos); font-weight:600;
    border-bottom-color:var(--phos); text-shadow:var(--glow-p)}

  /* partido como marcador apilado */
  .m{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"time venue" "home score" "away score";
    gap:6px 12px; padding:11px 13px}
  .m .time{grid-area:time} .m .venue{grid-area:venue; text-align:right}
  .m .side.h{grid-area:home} .m .side.a{grid-area:away}
  .m .side.h{flex-direction:row; text-align:left}
  .m .res{grid-area:score; align-self:center; font-size:34px; min-width:64px}
  /* sin resultado todavía: la hora arriba, con la fecha, y los equipos abajo */
  .m.soon{grid-template-areas:"time score" "home home" "away away" "venue venue"}
  .mrow .m{padding-right:40px}
  .verlo{right:7px; width:24px; height:24px}
  .m.soon .res{font-size:19px; align-self:start; justify-self:end}
  .m.soon .venue{text-align:left}
  .m .nm{font-size:15px}
  .m .cr{width:26px; height:26px}

  /* scrubber con targets de dedo */
  .scrub{padding:8px; gap:8px}
  .scrub .rail{gap:6px; scroll-snap-type:x proximity}
  .fk{min-width:46px; height:38px; font-size:19px; scroll-snap-align:center}
  .scrub .arrow{width:38px; height:38px}

  /* tabla en el celular: en hockey el primer desempate son partidos ganados,
     así que G entra antes que la racha de 5. Las reglas van por posición de
     columna, así que se acotan a cada tabla: la de la tira tiene otras. */
  table{min-width:0}
  #panel-tabla th:nth-child(n+5):nth-child(-n+8),
  #panel-tabla td:nth-child(n+5):nth-child(-n+8){display:none}
  #panel-tabla th:last-child, #panel-tabla td:last-child{display:none}
  /* en la tira caen PJ y DG: las categorías y el total son lo que se mira */
  .tiratab th:nth-child(n+8):nth-child(-n+9), .tiratab td:nth-child(n+8):nth-child(-n+9){display:none}
  th.club, td.club{min-width:104px; max-width:44vw}
  th, td{height:42px; padding:0 7px; font-size:13px}
  td.pts{font-size:20px}

  .gol{grid-template-columns:32px 22px minmax(0,1fr) 44px; gap:9px; padding:9px 11px}
  .gol .bar, .gol .det{display:none}

  /* vista transversal apilada */
  .x{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"hora rival" "chip cancha"; gap:5px 10px; padding:11px 13px}
  .x .hora{grid-area:hora; font-size:22px} .x .res{grid-area:hora; font-size:24px}
  .x .rival{grid-area:rival} .x .rival .nm{font-size:15px}
  .x .catchip{grid-area:chip; justify-self:start} .x .cancha{grid-area:cancha; text-align:right}
  .x .loc{display:none}
  .xhead{padding:14px} .xhead h2{font-size:26px}
  .xpos{grid-template-columns:auto minmax(0,1fr) 46px 46px; gap:8px; padding:11px 13px}
  .xpos .racha{display:none}

  /* buscador a pantalla completa */
  .pal{padding:0; align-items:stretch}
  .palbox{max-height:100%; height:100%; width:100%; border:0}
  .palbox input{padding:18px 16px; font-size:16px}
  .pitem{padding:12px 11px; font-size:14px}

  .clubstrip{flex-wrap:wrap; row-gap:8px}
  .clubstrip .txt{flex:1 1 100%; order:3}
  .clubstrip .go{margin-left:auto; order:2}
  .sign{position:fixed; left:0; right:0; bottom:var(--pie); height:34px;
    gap:10px; padding:0 12px}
  .sign .ahba{width:21px}
  .sign .note{font-size:9.5px}
  .sign-cliply{padding-left:11px; gap:8px} .sign-cliply .cliply.md{height:13px}
  .sign-cliply .lab{display:none}
  .byline{display:none}
  .note{font-size:11px; line-height:1.6}
}
@media (max-width:400px){
  .m .res{font-size:28px; min-width:54px}
  .glitch{font-size:26px}
  .tabs button{font-size:9.5px; letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .fx::after, body::after{display:none}
}

/* el play out no reparte título: va aparte del cuadro del campeón */
.playout { margin-top: 26px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.playout .po-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.playout .po-h .lab:first-child { color: var(--cyan); letter-spacing: .22em; }
.playout .po-h .lab:last-child { color: var(--mute); }
.playout .cruce + .cruce { margin-top: 18px; }
.pasaron {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
/* sólidos: en contorno verde sobre un panel verde no se veían */
.pas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 5px;
  border: 1px solid var(--phos);
  background: var(--phos);
  color: var(--bg);
  font: 600 12px/1.2 "IBM Plex Mono",ui-monospace,monospace;
  border-radius: 2px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--phos) 35%, transparent);
}
.pas .cr { width: 16px; height: 16px; background: var(--bg); border-radius: 2px; padding: 1px; }
.pas i { font-style: normal; font-size: 11px; }
.pas small { color: color-mix(in srgb, var(--bg) 70%, var(--phos)); font-size: 10px; letter-spacing: .08em; font-weight: 500; }
.pas.oro { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 35%, transparent); }
.pas.oro small { color: color-mix(in srgb, var(--bg) 70%, var(--amber)); }
.pas.queda { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 35%, transparent); }
.pas.queda small { color: color-mix(in srgb, var(--bg) 70%, var(--cyan)); }
.pas.nodef {
  border: 1px dashed var(--line-2);
  background: none;
  color: var(--mute);
  box-shadow: none;
  font-weight: 500;
  padding-left: 9px;
}

/* ===== stats: los números del torneo · la AHBA en números ===== */
.stats{display:grid; gap:14px}
.stats .card + .card{margin-top:0}
.kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px; background:var(--line)}
.kpi{display:flex; flex-direction:column; padding:14px 14px 12px; background:var(--panel); min-width:0}
.kpi b{font-family:VT323,monospace; font-size:38px; line-height:.9; font-weight:400; color:var(--amber); text-shadow:var(--glow-a);
  font-variant-numeric:tabular-nums}
.kpi:first-child b{color:var(--phos-hi); text-shadow:var(--glow-p)}
.kpi span{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim); margin-top:6px}
.kpi small{font-size:10.5px; color:var(--mute); margin-top:2px; overflow:hidden; text-overflow:ellipsis}
.reparto{display:grid; gap:10px; padding:14px}
.reparto .barra{display:flex; height:10px; gap:2px; overflow:hidden}
.reparto .barra i{display:block; min-width:0}
.reparto i.g{background:var(--z-verde)} .reparto i.e{background:var(--z-ambar)} .reparto i.p{background:var(--z-rojo)}
.reparto .ley{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:11px; color:var(--mute)}
.reparto .ley span{display:inline-flex; align-items:center; gap:8px}
.reparto .ley i{width:14px; height:4px; display:inline-block}
.reparto .ley b{color:var(--bone); font-weight:600}
.reparto .ley small{font-size:10px; color:var(--phos-dim)}
/* hitos de la tabla: qué, quién, cuánto */
.hito{display:grid; grid-template-columns:172px minmax(0,1fr) auto; gap:11px; align-items:center; padding:8px 12px;
  border-top:1px solid var(--line); font-size:12.5px}
.hito .quien{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; min-width:0; color:var(--bone)}
.hito .quien .cr{width:20px; height:20px; flex:none}
.hito .quien .nm{margin-right:6px}
.hito .val{font-family:VT323,monospace; font-size:21px; line-height:1; color:var(--amber); white-space:nowrap; text-align:right}
.hito .val small{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-left:6px}
.stats .card .tw{border:0; border-radius:0}
/* dos mitades en una tarjeta: marcadores y goles, tabla de local y de visitante */
.mitades{display:grid; grid-template-columns:repeat(2, minmax(0,1fr))}
.mitades > div{min-width:0}
.mitades > div + div{border-left:1px solid var(--line)}
/* forma, proyección, local y visitante: una fila por equipo */
.forma, .proy, .lv{display:grid; gap:11px; align-items:center; padding:7px 12px; border-top:1px solid var(--line); font-size:12.5px}
.forma{grid-template-columns:34px minmax(0,1fr) auto minmax(0,1fr)}
.proy{grid-template-columns:34px 58px minmax(0,1fr) 64px 20px 64px 76px 230px; position:relative}
.proy.sinzonas{grid-template-columns:34px 58px minmax(0,1fr) 64px 20px 64px 76px}
.forma.mine, .proy.mine, .lv.mine{background:var(--mine-bg)}
.forma .p, .proy .p, .lv .p{font-family:VT323,monospace; font-size:17px; color:var(--phos-soft); text-align:center}
.forma .quien, .proy .quien, .lv .quien{display:flex; align-items:center; gap:8px; min-width:0; color:var(--bone)}
.forma .quien .cr, .proy .quien .cr, .lv .quien .cr{width:20px; height:20px; flex:none}
.forma .quien .nm, .proy .quien .nm, .lv .quien .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.forma .form{justify-content:flex-start}
.forma .form i{width:10px; height:10px}
.forma .racha, .proy .faltan{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.proy .ahora, .proy .fin{font-family:VT323,monospace; font-size:21px; line-height:1; text-align:right; white-space:nowrap}
.proy .ahora{color:var(--bone)}
.proy .fin{color:var(--amber); text-shadow:var(--glow-a)}
.proy small{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-left:4px}
.proy .flecha{color:var(--phos-dim); text-align:center}
/* de dónde viene: sube, baja o queda, y el puesto de hoy debajo */
.proy .mov{display:flex; flex-direction:column; line-height:1.15; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--mute); white-space:nowrap}
.proy .mov.sube{color:var(--z-verde)} .proy .mov.baja{color:var(--z-rojo)}
.proy .mov small{font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin:0}
/* la misma marca de zona que la tabla: barra a la izquierda y el puesto en color */
.proy::before{content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px; background:transparent}
.proy.z-verde::before{background:var(--z-verde)} .proy.z-verde .p{color:var(--z-verde)}
.proy.z-cyan::before{background:var(--z-cyan)} .proy.z-cyan .p{color:var(--z-cyan)}
.proy.z-ambar::before{background:var(--z-ambar)} .proy.z-ambar .p{color:var(--z-ambar)}
.proy.z-rojo::before{background:var(--z-rojo)} .proy.z-rojo .p{color:var(--z-rojo)}
/* local y visitante: dos lados de una misma barra */
.lv{grid-template-columns:34px minmax(0,1fr) 128px 220px 128px}
.lv.cab{padding:8px 12px 2px; border-top:0}
.lv.cab .lab.der{text-align:right}
.lv .lado{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.lv .lado.l{text-align:right} .lv .lado.v{text-align:left}
.lv .lado b{font-family:VT323,monospace; font-size:21px; font-weight:400; color:var(--bone)}
.lv .lado.mejor b{color:var(--amber); text-shadow:var(--glow-a)}
.lv .lado.vacio b{color:var(--mute)}
.lv .lado small{font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lv .lado small em{font-style:normal}
.lv .doble{position:relative; height:8px; background:var(--sunk); border:1px solid var(--line)}
.lv .doble::before{content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line-2)}
.lv .doble i{position:absolute; top:0; bottom:0; display:block}
.lv .doble i.l{right:50%; background:var(--phos)}
.lv .doble i.v{left:50%; background:var(--cyan)}
/* probabilidad de cada zona: barra apilada y el destino más probable */
.proy .prob{display:flex; flex-direction:column; gap:4px; min-width:0}
.proy .prob .apilada{display:flex; height:7px; gap:1px; overflow:hidden; background:var(--sunk); border:1px solid var(--line)}
.proy .prob .apilada i{display:block; height:100%; min-width:0}
.proy .prob small{font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.proy .prob small b{font-family:VT323,monospace; font-size:15px; letter-spacing:0; font-weight:400; margin-right:4px}
.z-media{color:var(--mute)} i.z-media{background:var(--line-2)}
.proy .prob small b.z-verde{color:var(--z-verde)} .proy .prob small b.z-cyan{color:var(--z-cyan)}
.proy .prob small b.z-ambar{color:var(--z-ambar)} .proy .prob small b.z-rojo{color:var(--z-rojo)}
.proy .prob .apilada i.z-verde{background:var(--z-verde)} .proy .prob .apilada i.z-cyan{background:var(--z-cyan)}
.proy .prob .apilada i.z-ambar{background:var(--z-ambar)} .proy .prob .apilada i.z-rojo{background:var(--z-rojo)}
.legend i.z-media{background:var(--line-2)}
/* la explicación de la proyección, en prosa */
.card-h .chips{display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-left:auto}
.card-h .chips .chip{padding:3px 7px; font-size:9px}
.card-h .chips + .comolink{margin-left:12px}
.card-h .cargando{color:var(--amber); margin-left:8px}
.comolink{margin-left:auto; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--phos); text-decoration:none; white-space:nowrap}
.comolink:hover{text-shadow:var(--glow-p); text-decoration:underline}
.ficha .palres.prosa{padding:14px 18px 16px; font-size:13px; line-height:1.65; color:var(--bone)}
/* la explicación ocupa la pantalla entera, con el texto en una columna que se pueda leer */
.ficha.full{padding:0; align-items:stretch}
.ficha.full .palbox{width:100%; max-width:none; height:100%; max-height:100%; border:0}
.ficha.full .palhead .titulo{max-width:900px; margin:0 auto; width:100%; padding:0 24px}
.ficha.full .palres.prosa{max-width:900px; margin:0 auto; width:100%; padding:28px 24px 48px; font-size:14.5px; line-height:1.7}
.ficha.full .prosa h3{margin-top:26px; font-size:10.5px}
/* a pantalla entera las tarjetas vuelven a ser tarjetas, en la misma columna que el texto */
.ficha.full .palres:not(.prosa){padding:24px 24px 48px}
.ficha.full .palres:not(.prosa) > *{max-width:900px; margin-left:auto; margin-right:auto}
.ficha.full .palres:not(.prosa) .card{border:1px solid var(--edge); border-radius:10px}
.ficha.full .palres:not(.prosa) .card + .card{margin-top:14px; border-top:1px solid var(--edge)}
.ficha.full .palres:not(.prosa) .note{margin-top:14px; border:1px dashed var(--line-2)}
.ficha.full .prosa p{margin-bottom:12px}
.prosa p{margin:0 0 10px}
.prosa b{color:var(--phos); font-weight:600}
.prosa h3{margin:18px 0 6px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--phos-dim); font-weight:400}
.prosa .tw{margin-top:8px}
.prosa .pie{margin:10px 0 0; font-size:11px; color:var(--mute)}
.legend.enCard{padding:10px 12px; border-top:1px solid var(--line); margin:0}
/* partido en una línea: marcador, fecha, los dos equipos alrededor del "vs", día */
.stats .x .rival .vs{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); flex:none}
.stats .x .rival .nm{flex:1 1 0}
/* barras con etiqueta: canchas, días, fechas */
.fbs{padding:6px 0}
.fb{display:grid; grid-template-columns:minmax(0,1fr) 40% 96px; gap:11px; align-items:center; padding:5px 12px; font-size:12px}
.fb + .fb{border-top:1px solid var(--line)}
.fb .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--bone)}
.fb .bar{height:6px; background:var(--sunk); border:1px solid var(--line); overflow:hidden}
.fb .bar i{display:block; height:100%; background:var(--phos-soft)}
.fb.top .bar i{background:var(--phos); box-shadow:var(--glow-p)}
.fb .n{font-family:VT323,monospace; font-size:19px; text-align:right; color:var(--amber); white-space:nowrap}
/* muchas filas cortas —las fechas de una liga— van a dos columnas */
@media (min-width:901px){
  .fbs.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:14px}
  .fbs.grid .fb{border-top:1px solid var(--line)}
  .fbs.grid .fb:nth-child(-n+2){border-top:0}
}
.fb .n small{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-left:6px}
/* la ficha de la AHBA: un diálogo con la caja de la paleta */
.ficha .palbox{width:min(760px,100%); max-height:86vh}
.ficha .palres{padding:0}
.ficha .kpis{grid-template-columns:repeat(3, minmax(0,1fr))}
.ficha .card{border:0; border-radius:0; animation:none}
.ficha .card + .card{margin-top:0; border-top:1px solid var(--edge)}
.ficha .note{margin:0; border:0; border-top:1px dashed var(--line-2)}
.ficha .tw{border:0; border-radius:0}
.palhead .titulo{flex:1; display:flex; align-items:center; gap:12px; padding:0 16px; font-size:14px; color:var(--bone); min-width:0}
.palhead .titulo b{font-weight:500; white-space:nowrap}
.statstab td.club{overflow:hidden; text-overflow:ellipsis}
.statstab.quieta tbody tr{cursor:default}
.statstab.quieta tbody tr:hover td, .statstab.quieta tbody tr:hover td.club{background:var(--panel)}
.statstab tr.rama td, .statstab tr.rama td.club{background:var(--panel-2); color:var(--cyan); font-weight:600}
.statstab tr.rama td.club{letter-spacing:.14em; text-transform:uppercase; font-size:10.5px}
@media (min-width:761px){
  .stats .x{grid-template-columns:56px 72px minmax(0,1fr) 110px}
  .stats .x .rival .nm.h{text-align:right} /* marcador: local a la izquierda del "vs", visita a la derecha */
}
@media (max-width:760px){
  .kpi b{font-size:32px}
  .ficha .kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ficha .palbox{max-height:100%} /* en el celular la ficha es la pantalla entera, como la paleta */
  .stats .card-h, .ficha .card-h{flex-wrap:wrap}
  .card-h .chips{margin-left:0; flex:1 1 100%; order:3}
  .card-h .chips + .comolink{margin-left:auto}
  .hito{grid-template-columns:minmax(0,1fr) auto; row-gap:4px}
  .hito .lab{grid-column:1/-1}
  .mitades{grid-template-columns:minmax(0,1fr)}
  .mitades > div + div{border-left:0; border-top:1px solid var(--line)}
  .forma{grid-template-columns:30px minmax(0,1fr) auto}
  .forma .racha{display:none}
  .proy{grid-template-columns:28px 42px minmax(0,1fr) 40px 14px 40px; gap:6px 8px}
  .proy .prob{grid-column:1/-1; order:9}
  .proy .ahora small, .proy .fin small{display:none} /* el nombre importa más que decir "pts" dos veces */
  .proy .faltan{display:none}
  .lv{grid-template-columns:28px minmax(0,1fr) 78px 78px; gap:8px}
  .lv .doble{grid-column:1/-1; order:9}
  .lv.cab{grid-template-columns:28px minmax(0,1fr) 78px 78px}
  .lv.cab span:nth-child(4){display:none}
  .lv .lado small{font-size:8px}
  .lv .lado small em{display:none} /* G E P alcanza: los goles no entran */
  .fb{grid-template-columns:minmax(0,1fr) 30% 84px}
  /* un equipo por línea: los dos no entran en el ancho de un celular */
  .stats .x{grid-template-areas:"hora rival" "chip cancha"}
  .stats .x .rival{display:grid; grid-template-columns:22px minmax(0,1fr); gap:4px 8px}
  .stats .x .rival .vs{display:none}
  .stats .x .rival .nm{flex:none}
  .stats .x .rival .cr.h{order:0} .stats .x .rival .nm.h{order:1}
  .stats .x .rival .cr.a{order:2} .stats .x .rival .nm.a{order:3}
}