/* ============================================================
   Vistas de detalle (partido, GP, cartelera, jugador) y el
   repaso de legibilidad.

   La tipografía de píxeles es linda para títulos y pésima para
   leer. Acá se queda sólo en rótulos cortos: todo lo que hay que
   leer de verdad pasa a una fuente normal, más grande y aireada.
   ============================================================ */

body{font-size:17px;line-height:1.5}

.ev .cuerpo .t{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.ev .cuerpo .s{font-family:var(--sans);font-size:12.5px;color:#5a5a5a;letter-spacing:0}
.ev .dia i{font-size:7px}
.ev .hora{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:-.02em}

.tabla{font-family:var(--sans);font-size:14.5px}
.tabla td{padding:9px 4px}
.tabla th{font-size:7.5px;padding:8px 4px}

.destacado .meta{font-family:var(--sans);font-size:14px;color:#b9c6e8;line-height:1.5}
.nota p{font-family:var(--sans);font-size:13.5px;color:#4a4a4a}
.jug .info span{font-family:var(--sans);font-size:12px}
.obra span{font-family:var(--sans);font-size:14px}
#pie-txt{font-family:var(--sans);font-size:13px}
.vacio{font-family:var(--sans);font-size:15px;color:#666}

/* ---------- botón volver ---------- */
.volver{
  font-family:var(--pixel);font-size:8px;
  background:var(--tinta);color:var(--papel);
  border:2px solid var(--papel);padding:9px 12px;margin:2px 0 14px;
  cursor:inherit;box-shadow:3px 3px 0 var(--magenta);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease);
}
.volver:active{transform:translate(3px,3px);box-shadow:0 0 0}

/* ---------- esperando datos ---------- */
.cargando-caja{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:34px 16px;font-family:var(--sans);font-size:15px;color:#666;
}
.spin{
  width:16px;height:16px;border:3px solid #ccc;border-top-color:#111;
  border-radius:50%;animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- marcador grande del detalle ---------- */
.marcador-partido{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  background:#000;color:var(--papel);padding:16px 12px;
  border:3px solid var(--c);margin-bottom:14px;
}
.mp-lado{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.mp-logo{width:52px;height:52px;object-fit:contain}
.mp-nom{font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.25}
.mp-cifras{
  display:flex;align-items:center;justify-content:center;
  gap:6px;flex-wrap:wrap;
}
.mp-cifras b{font-family:var(--sans);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.mp-cifras i{font-style:normal;font-size:26px;opacity:.5}
.mp-estado{flex-basis:100%;text-align:center;margin-top:8px}

.chip,.chip-vivo{
  font-family:var(--pixel);font-size:7px;padding:5px 8px;
  background:var(--chrome2);color:#000;display:inline-block;
}
.chip-vivo{background:var(--f1);color:#fff;display:inline-flex;align-items:center;gap:5px}
.punto-vivo{
  width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block;
  animation:latido 1.2s var(--ease) infinite;
}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.ficha-partido{
  font-family:var(--sans);font-size:13px;color:#555;
  margin-bottom:14px;line-height:1.6;
}

/* ---------- goles, tarjetas y cambios ---------- */
.jugadas{list-style:none;margin-bottom:6px}
.jugada{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;border-bottom:2px solid rgba(0,0,0,.09);
}
.jugada.gol{background:#eaffef}
.jugada.cambio{opacity:.75}
.j-min{font-family:var(--sans);font-size:13px;font-weight:800;min-width:44px;color:#333}
.j-ico{font-size:17px;line-height:1}
.j-txt{font-family:var(--sans);font-size:14.5px;line-height:1.3}
.j-txt small{color:#777;font-size:12px;font-weight:400}

/* ---------- estadísticas comparadas ---------- */
.stats-comp{margin-bottom:6px}
.sc-fila{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:7px 2px 11px;
}
.sc-a,.sc-b{font-family:var(--sans);font-size:15px;font-weight:750}
.sc-b{text-align:right}
.sc-nom{font-family:var(--sans);font-size:12px;color:#666;text-align:center}
.sc-barra{
  grid-column:1/-1;height:6px;background:#d8cfb8;display:block;position:relative;
  border:1px solid rgba(0,0,0,.25);
}
.sc-barra i{display:block;height:100%;background:var(--c);transition:width .6s var(--ease)}

/* ---------- formaciones ---------- */
.once{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.once.banca{opacity:.82}
.sub-rotulo{font-family:var(--sans);font-size:12px;color:#777;margin:12px 0 6px;font-weight:700}
.jm{
  display:flex;align-items:center;gap:8px;text-align:left;
  background:#fff;border:2px solid #000;padding:8px;cursor:inherit;
  font-family:inherit;box-shadow:2px 2px 0 rgba(0,0,0,.28);
  transition:transform .13s var(--ease), box-shadow .13s var(--ease);
}
.jm:active{transform:translate(2px,2px);box-shadow:0 0 0}
.jm[data-jug]:hover{background:#fffbe8}
.jm-dor{
  font-family:var(--sans);font-size:15px;font-weight:800;
  background:#000;color:var(--amarillo);min-width:28px;text-align:center;padding:3px 4px;
}
.jm-nom{
  flex:1;font-family:var(--sans);font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jm-pos{font-family:var(--sans);font-size:11px;color:#777;white-space:nowrap}
.jm.entro{border-color:#0a8c3c;background:#f2fff6}
.jm.salio{opacity:.6}

/* ---------- cartelera de UFC ---------- */
.pelea{background:#fff;border:2px solid #000;margin-bottom:9px;box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.pelea.estelar{border-width:3px;box-shadow:5px 5px 0 var(--ufc)}
.pelea-cat{font-family:var(--pixel);font-size:7px;background:#000;color:var(--ufc);padding:6px 8px}
.pelea-cuerpo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 10px}
.pel{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.pel-bandera{width:30px;height:20px;object-fit:cover;border:1px solid rgba(0,0,0,.2)}
.pel-nom{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.2}
.pel-rec{font-family:var(--sans);font-size:11.5px;color:#777}
.pel.gana .pel-nom{color:#0a7c33}
.pel.gana::after{content:"GANO";font-family:var(--pixel);font-size:6px;color:#0a7c33}
.pelea-vs{font-family:var(--pixel);font-size:8px;color:#999}
.pelea-res{font-family:var(--sans);font-size:12.5px;padding:8px 10px;background:var(--papel2);border-top:2px solid #000}
.pelea-res.pendiente{color:#777}

/* ---------- ficha de jugador ---------- */
.ficha-cabeza{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.fc-foto{width:76px;height:76px;object-fit:cover;border:3px solid #000;background:#ddd}
.fc-dorsal{
  width:76px;height:76px;display:grid;place-items:center;
  background:#000;color:var(--amarillo);
  font-family:var(--sans);font-size:32px;font-weight:800;border:3px solid #000;
}
.fc-datos h3{font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.fc-sub{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13.5px;color:#555;margin-top:5px}
.fc-bandera{width:26px;height:18px;object-fit:cover;border:1px solid rgba(0,0,0,.2)}
.fc-eq{font-family:var(--sans);font-size:13px;color:#777;margin-top:3px}

.datos-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:7px}
.dg{background:#fff;border:2px solid #000;padding:8px 10px}
.dg span{display:block;font-family:var(--sans);font-size:11px;color:#777;margin-bottom:2px}
.dg b{font-family:var(--sans);font-size:15px;font-weight:750}

.nota-fuente{
  font-family:var(--sans);font-size:12px;color:#888;
  margin-top:14px;padding-top:10px;border-top:2px dashed rgba(0,0,0,.15);
}

/* ---------- lo que se está jugando, en la portada ---------- */
.destacado.envivo{border-color:var(--f1);box-shadow:0 0 0 3px #000, 8px 8px 0 var(--f1)}
.destacado.envivo .etiqueta{color:var(--f1);display:flex;align-items:center;gap:7px}
.destacado-link{
  background:none;border:none;padding:0;text-align:left;color:inherit;
  font-family:inherit;cursor:inherit;width:100%;
}
.destacado-link h2{display:flex;align-items:center;gap:8px}
/* Sólo el texto se estira. Antes esta regla agarraba también al
   escudo —que es un <span>— y lo inflaba a 157px de ancho. */
.destacado-link h2 > span:not(.escudo){flex:1}
.vivo-marcador{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:14px 0;padding:12px;background:rgba(255,255,255,.06);border:2px solid var(--f1);
}
.vivo-marcador b{font-family:var(--sans);font-size:34px;font-weight:800;letter-spacing:-.03em}
.vivo-marcador i{font-style:normal;opacity:.5;font-size:22px}
.vm-eq{font-family:var(--sans);font-size:13px;font-weight:650;max-width:110px;line-height:1.2}
.toca{font-family:var(--sans);font-size:12.5px;color:var(--cian);margin-top:10px}

.ev.envivo{border-color:var(--f1);box-shadow:3px 3px 0 var(--f1);background:#fff6f6}
.marc.vivo{background:var(--f1);color:#fff;border-color:#fff}
.marc small{display:block;font-family:var(--sans);font-size:9.5px;font-weight:400;margin-top:2px}

/* las filas de evento ahora son botones */
.ev{width:100%;text-align:left;cursor:inherit;font-family:inherit}
.escudos{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.escudo.rival{opacity:.9}
.mono{font-family:var(--term);font-size:16px}
.vr{background:var(--magenta);color:#fff;font-size:9px;padding:1px 4px;font-weight:700}

@media (max-width:420px){
  .once{grid-template-columns:1fr}
  .mp-cifras b{font-size:32px}
  .marcador-partido{gap:6px;padding:13px 8px}
  .mp-logo{width:42px;height:42px}
}