/* App LigaPro — sistema visual según el Manual de Marca 2024.
   Colores oficiales: amarillo #FFD000, azul #1A6CAC, rojo #DD2F31, negro y blanco. Tipografía: Arvo.
   El amarillo NO se usa como texto sobre blanco (no se lee): va como bloque de fondo con texto negro. */
@font-face{font-family:Arvo;src:url(/assets/fonts/arvo-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Arvo;src:url(/assets/fonts/arvo-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Arvo;src:url(/assets/fonts/arvo-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --amarillo:#FFD000;--amarillo-s:#FFF4BF;--azul:#1A6CAC;--azul-o:#135486;--azul-s:#E6F0F8;--marino:#12306B;
  --rojo:#DD2F31;--rojo-s:#FCE8E8;--negro:#131417;--blanco:#fff;
  --fondo:#F2F3F5;--tarjeta:#fff;--borde:#E2E5E9;--borde2:#EEF0F2;--mut:#6A717A;--dim:#454B53;
  --ok:#1A6CAC;--empate:#9AA1A9;--mal:#DD2F31;
  --radio:14px;--sombra:0 1px 2px rgba(19,20,23,.06),0 2px 8px rgba(19,20,23,.05);
  --nav:64px;--cab:60px;--seg:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:Arvo,Georgia,serif;font-size:14px;line-height:1.45;color:var(--negro);background:var(--fondo);min-height:100dvh;overscroll-behavior-y:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--azul);text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.oculto{display:none!important}

/* ---------- armazón ---------- */
#app{max-width:560px;margin:0 auto;min-height:100dvh;background:var(--fondo);position:relative;padding-bottom:calc(var(--nav) + var(--seg) + 12px)}
.cab{position:sticky;top:0;z-index:30;height:var(--cab);background:var(--blanco);display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--borde)}
.cab .logo{height:42px;width:auto}             /* manual: mínimo digital 156×40 px */
.cab .mieq{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border-radius:99px;background:var(--fondo);font-size:12px;font-weight:700}
.cab .mieq img{width:28px;height:28px;object-fit:contain}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;z-index:40;background:var(--blanco);border-top:1px solid var(--borde);
  display:grid;grid-template-columns:repeat(5,1fr);padding:6px 6px calc(6px + var(--seg));height:calc(var(--nav) + var(--seg))}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;color:var(--mut);font-size:10.5px;font-weight:700;letter-spacing:.01em}
.nav a svg{width:23px;height:23px}
.nav a.on{background:var(--amarillo);color:var(--negro)}
.pant{padding:14px 14px 8px;animation:entra .18s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- tipografía ---------- */
.h1{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.h2{font-size:17px;font-weight:700;line-height:1.2}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 9px}
.sec h2{font-size:15px;font-weight:700}
.sec a,.sec span{font-size:12px;font-weight:700;color:var(--azul)}
.eti{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.mut{color:var(--mut)}.dim{color:var(--dim)}
.peq{font-size:12px}.mini{font-size:11px}

/* ---------- piezas ---------- */
.tarj{background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.tarj.pad{padding:14px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--fondo);color:var(--dim);white-space:nowrap}
.chip.am{background:var(--amarillo);color:var(--negro)}.chip.az{background:var(--azul);color:#fff}.chip.ro{background:var(--rojo);color:#fff}
.chip.azs{background:var(--azul-s);color:var(--azul-o)}.chip.ros{background:var(--rojo-s);color:#a51f21}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:12px;background:var(--negro);color:#fff;font-weight:700;font-size:15px;width:100%}
.boton.az{background:var(--azul)}.boton.am{background:var(--amarillo);color:var(--negro)}.boton.linea{background:transparent;color:var(--negro);box-shadow:inset 0 0 0 1.5px var(--borde)}
.boton:disabled{opacity:.45}
.esc{width:28px;height:28px;object-fit:contain;flex-shrink:0}
.esc.g{width:56px;height:56px}.esc.xg{width:84px;height:84px}.esc.p{width:20px;height:20px}
.aviso{display:flex;gap:10px;align-items:flex-start;background:var(--amarillo-s);border-left:4px solid var(--amarillo);border-radius:0 10px 10px 0;padding:10px 12px;font-size:12.5px;line-height:1.4}
.aviso b{display:block;font-size:13px}
.aviso.azul{background:var(--azul-s);border-color:var(--azul)}
.aviso.rojo{background:var(--rojo-s);border-color:var(--rojo)}
.segm{display:flex;background:#E4E7EB;border-radius:12px;padding:3px;gap:3px;margin-bottom:12px}
.segm button{flex:1;height:36px;border-radius:9px;font-size:13px;font-weight:700;color:var(--dim)}
.segm button.on{background:var(--blanco);color:var(--negro);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.forma{display:inline-flex;gap:3px}
.forma i{width:18px;height:18px;border-radius:4px;font-style:normal;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.forma i.G{background:var(--ok)}.forma i.E{background:var(--empate)}.forma i.P{background:var(--mal)}
.vacio{padding:34px 18px;text-align:center;color:var(--mut)}
.cargando{padding:60px 0;display:flex;justify-content:center}
.cargando i{width:28px;height:28px;border-radius:50%;border:3px solid var(--borde);border-top-color:var(--azul);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.dato{display:flex;align-items:center;gap:9px;background:var(--amarillo-s);border-left:4px solid var(--amarillo);border-radius:0 9px 9px 0;padding:8px 10px;font-size:12px}
.dato img{width:22px;height:22px;object-fit:contain}
.dato b{font-weight:700}
.scrollx{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px}
.scrollx::-webkit-scrollbar{display:none}

/* ---------- filas de partido ---------- */
.pts-dia{padding:9px 14px 5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);background:var(--fondo)}
.partido{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:11px 12px;border-top:1px solid var(--borde2);color:var(--negro)}
.partido:first-child{border-top:0}
.partido .eq{display:flex;align-items:center;gap:8px;min-width:0;font-weight:700;font-size:13.5px}
.partido .eq span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.2;word-break:break-word}
.partido .eq.v{flex-direction:row-reverse;text-align:right}
.partido .mar{min-width:64px;text-align:center;font-weight:700;font-size:18px;letter-spacing:.02em}
.partido .mar small{display:block;font-size:10px;font-weight:700;color:var(--mut);letter-spacing:.04em;margin-top:1px}
.partido .mar.hora{font-size:14px}
.partido .mar.tbd{font-size:14px;color:var(--mut)}
.partido .gana{color:var(--negro)}.partido .pierde{color:var(--mut);font-weight:400}
.partido .etq{grid-column:1/-1;margin-top:-2px;text-align:center}
.vivo{color:var(--rojo)!important}
.vivo-punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rojo);margin-right:4px;animation:late 1.2s infinite}
@keyframes late{50%{opacity:.25}}

/* ---------- tablas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);text-align:center;padding:9px 4px;border-bottom:1px solid var(--borde)}
.tabla th.i{text-align:left;padding-left:12px}
.tabla td{padding:8px 4px;text-align:center;border-bottom:1px solid var(--borde2)}
.tabla tr:last-child td{border-bottom:0}
.tabla td.pos{width:34px;font-weight:700;position:relative}
.tabla td.pos::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:0 3px 3px 0;background:var(--z,transparent)}
.tabla td.eq{text-align:left}
.tabla td.eq div{display:flex;align-items:center;gap:8px;font-weight:700}
.tabla td.pts{font-weight:700;font-size:14px}
.tabla tr.mia td{background:var(--amarillo-s)}
.tabla tr.clic{cursor:pointer}
.z-campeon,.z-hex1{--z:var(--amarillo)}.z-libertadores,.z-repechaje{--z:var(--azul)}.z-sudamericana,.z-cuad{--z:#5FA3D6}.z-descenso,.z-hex2{--z:var(--rojo)}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 12px;font-size:11px;color:var(--dim);border-top:1px solid var(--borde2)}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:10px;height:10px;border-radius:3px;background:var(--z)}
.grupo-cab{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px;border-bottom:1px solid var(--borde)}
.grupo-cab .h2{font-size:16px}

/* ---------- barras ---------- */
.barra{height:8px;border-radius:5px;background:var(--borde2);overflow:hidden}
.barra i{display:block;height:100%;border-radius:5px;background:var(--azul);transition:width .6s ease}
.cmp{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:9px 0}
.cmp .nom{grid-column:1/-1;text-align:center;font-size:11.5px;color:var(--mut);margin-bottom:-4px}
.cmp .val{font-weight:700;font-size:14px}.cmp .val.d{text-align:right}
.cmp .dob{display:flex;height:8px;gap:3px}
.cmp .dob i{display:block;height:100%;border-radius:5px}
.cmp .dob i.l{background:var(--azul)}.cmp .dob i.v{background:var(--rojo)}