/* Pizarra. Tinta azul marino sobre gris frío; azul = local, rojo = visitante, verde = valor.
   El elemento propio es el marcador oscuro de cada partido, como el de un pabellón. */
:root {
  --fondo: #EDF0F4; --papel: #FFFFFF; --tinta: #142033; --suave: #5B6577; --trazo: #98A1B0; --linea: #DCE1E8;
  --local: #2156D9; --local-c: #E8EEFC; --visit: #D93A30; --visit-c: #FCEBE9;
  --valor: #0B8457; --valor-c: #E2F3EB; --aviso: #A86400; --aviso-c: #FFF2DB;
  --cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 16px/1.45 var(--texto); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--local); outline-offset: 2px; border-radius: 6px; }
.envolt { max-width: 1200px; margin: 0 auto; padding: 0 20px 64px; }
.cargando, .vacio { color: var(--suave); }
.num { font-family: var(--cond); font-variant-numeric: tabular-nums; }

/* barra superior */
.barra { background: var(--tinta); color: #fff; }
.barra .envolt { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.logo { font: 700 30px/1 var(--cond); letter-spacing: .2px; }
.logo span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--visit); margin-left: 4px; vertical-align: 4px; }
.nav { display: flex; gap: 18px; font-weight: 500; }
.nav a { opacity: .7; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a.act, .nav a:hover { opacity: 1; border-color: #fff; }
.estado { margin-left: auto; font-size: 14px; opacity: .7; }

h1, h2, h3 { font-family: var(--cond); font-weight: 700; margin: 0; }
.seccion { margin-top: 34px; }
.seccion > h2 { font-size: 28px; margin-bottom: 4px; }
.seccion > .nota, .nota { color: var(--suave); font-size: 15px; margin: 0 0 14px; }
.volver { display: inline-block; color: var(--suave); padding: 18px 0 8px; font-weight: 500; }
.volver:hover { color: var(--tinta); }

/* escudos */
.escudo { width: 36px; height: 36px; object-fit: contain; flex: none; }
.inic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor;
  font: 700 11px/1 var(--cond); background: var(--papel); color: var(--tinta); }
.xl .escudo, .xl .inic { width: 76px; height: 76px; font-size: 20px; }
.l .escudo, .l .inic { width: 48px; height: 48px; font-size: 14px; }

/* tarjetas de partido (inicio) */
.dia { font: 600 18px var(--cond); color: var(--suave); margin: 22px 0 10px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tarjeta { background: var(--papel); border-radius: var(--radio); padding: 14px 16px 12px; display: block; border: 1px solid var(--linea);
  transition: border-color .15s, transform .15s; }
.tarjeta:hover { border-color: var(--tinta); }
.t-cab { display: flex; justify-content: space-between; color: var(--suave); font-size: 14px; margin-bottom: 8px; }
.t-eq { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 4px 0; }
.t-eq .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-eq .p { font: 700 22px var(--cond); }
.t-eq.loc .p { color: var(--local); } .t-eq.vis .p { color: var(--visit); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.chip { font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--fondo); color: var(--suave); }
.chip.valor { background: var(--valor-c); color: var(--valor); }
.chip.revisar, .chip.mov { background: var(--aviso-c); color: var(--aviso); }

/* tablas */
.tabla-env { overflow-x: auto; background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { font: 500 13px var(--texto); color: var(--suave); text-align: right; padding: 10px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--linea); text-align: right; font: 600 17px var(--cond); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th.izq, td.izq { text-align: left; }
td.izq { font: 500 15px var(--texto); }
tr.enl { cursor: pointer; } tr.enl:hover { background: #F6F8FB; }
.eqcel { display: flex; align-items: center; gap: 10px; }
.eqcel .escudo, .eqcel .inic { width: 26px; height: 26px; font-size: 9px; }
.npos { color: var(--trazo); width: 28px; }
.mini { font: 400 12px var(--texto); color: var(--suave); }
tr.dnp td { color: var(--trazo); }

/* marcador del partido: el elemento propio */
.marcador { background: var(--tinta); color: #fff; border-radius: 14px; padding: 26px 28px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.m-eq { display: flex; flex-direction: column; gap: 8px; }
.m-eq.vis { align-items: flex-end; text-align: right; }
.m-eq h1 { font-size: 34px; line-height: 1.05; }
.m-eq .rec { opacity: .75; font-size: 15px; }
.m-eq .barrita { height: 4px; width: 56px; border-radius: 2px; background: var(--local); }
.m-eq.vis .barrita { background: var(--visit); }
.m-centro { text-align: center; }
.m-centro .cuando { opacity: .75; font-size: 15px; }
.m-res { font: 700 76px/1 var(--cond); letter-spacing: -1px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.m-res i { font-style: normal; opacity: .4; margin: 0 6px; }
.m-pie { opacity: .8; font-size: 14px; }

/* veredicto */
.mercados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mercado { background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); padding: 14px 16px; }
.mercado.valor { border: 2px solid var(--valor); }
.mercado.revisar { border: 2px solid var(--aviso); }
.mc-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.mc-cab h3 { font-size: 21px; }
.pildora { font: 700 13px var(--texto); padding: 3px 10px; border-radius: 999px; background: var(--fondo); color: var(--suave); white-space: nowrap; }
.pildora.valor { background: var(--valor); color: #fff; }
.pildora.revisar { background: var(--aviso); color: #fff; }
.lado { padding: 9px 0; border-top: 1px solid var(--linea); }
.lado.top { }
.lado-1 { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.lado-1 .ev { font: 700 19px var(--cond); white-space: nowrap; }
.lado-1 > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado-1 .ev { flex: none; }
.ev.pos { color: var(--valor); } .ev.neg { color: var(--trazo); }
.lado-2 { display: flex; justify-content: space-between; font-size: 13px; color: var(--suave); margin-top: 4px; gap: 8px; flex-wrap: wrap; }
.prob { position: relative; height: 6px; background: var(--fondo); border-radius: 3px; margin-top: 6px; }
.prob b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); border-radius: 3px; }
.prob s { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--visit); }
.mc-nota { font-size: 13px; color: var(--aviso); margin-top: 6px; }
details.porque { margin-top: 12px; background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); padding: 12px 16px; }
details.porque summary { cursor: pointer; font-weight: 600; }
details.porque ul { margin: 10px 0 2px; padding-left: 20px; color: var(--suave); }

/* cara a cara */
.cara { background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); padding: 8px 18px; }
.cf { display: grid; grid-template-columns: 1fr 80px 170px 80px 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.cf:last-child { border-bottom: 0; }
.cf .et { text-align: center; font-weight: 500; font-size: 15px; }
.cf .et small { display: block; color: var(--trazo); font-size: 12px; font-weight: 400; }
.cf .v { font: 700 21px var(--cond); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-l, .barra-r { height: 12px; background: var(--fondo); border-radius: 6px; position: relative; overflow: hidden; }
.barra-l b, .barra-r b { position: absolute; top: 0; bottom: 0; border-radius: 6px; opacity: .35; }
.barra-l b { right: 0; background: var(--local); } .barra-r b { left: 0; background: var(--visit); }
.mejor .barra-l b, .barra-r.mejor b { opacity: 1; }
.cf .v.gana-l { color: var(--local); } .cf .v.gana-v { color: var(--visit); }

/* columnas */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.caja { background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); padding: 14px 16px; }
.caja.loc { border-top: 4px solid var(--local); } .caja.vis { border-top: 4px solid var(--visit); }
.caja h3 { font-size: 20px; margin-bottom: 8px; }
.par { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.par:last-child { border-bottom: 0; }
.par b { font: 700 18px var(--cond); }
.aviso { background: var(--aviso-c); color: #6B4200; border-radius: 8px; padding: 9px 12px; margin: 6px 0; font-size: 15px; }
.res { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.res:last-child { border-bottom: 0; }
.vd { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--cond); border: 2px solid var(--tinta); }
.vd.g { background: var(--tinta); color: #fff; }
.donde { font-size: 13px; } .donde.c { color: var(--local); } .donde.f { color: var(--visit); }

/* jugadores con opciones y calculadora */
.ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.op { background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); padding: 12px 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.op:hover { border-color: var(--tinta); }
.op .q { display: flex; justify-content: space-between; align-items: baseline; }
.op .q b { font: 700 26px var(--cond); color: var(--valor); }
.op .mot { font-size: 13px; color: var(--suave); margin-top: 4px; }
.calc { background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); padding: 16px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.calc label { min-width: 0; }
.calc select, .calc input { width: 100%; min-width: 0; }
.calc label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); font-weight: 500; }
.calc select, .calc input { font: 500 16px var(--texto); padding: 9px 10px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; color: var(--tinta); }
.calc-res { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cr { background: var(--fondo); border-radius: 8px; padding: 10px 12px; }
.cr span { display: block; font-size: 12px; color: var(--suave); }
.cr b { font: 700 26px var(--cond); }
.cr.valor { background: var(--valor-c); } .cr.valor b { color: var(--valor); }

/* equipo y jugador */
.cabecera { display: flex; align-items: center; gap: 18px; margin: 4px 0 18px; }
.cabecera h1 { font-size: 40px; line-height: 1.05; }
.cabecera .sub { color: var(--suave); margin-top: 4px; }
.gr { font: 700 64px/1 var(--cond); margin-left: auto; font-variant-numeric: tabular-nums; }
.met { padding: 10px 0 9px; border-bottom: 1px solid var(--linea); }
.met:last-child { border-bottom: 0; }
.met .c { display: flex; justify-content: space-between; align-items: baseline; }
.met .c small { display: block; color: var(--suave); font-size: 13px; }
.met .c b { font: 700 22px var(--cond); }
.tira { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 8px 0 3px; align-items: end; }
.tira i { height: 7px; background: var(--linea); border-radius: 1px; }
.tira i.yo { height: 15px; background: var(--tinta); }
.tira-pie { display: flex; justify-content: space-between; font-size: 12px; color: var(--trazo); }
.tira-pie b { color: var(--tinta); font-weight: 600; }
.cifras { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cifra { background: var(--papel); border-radius: var(--radio); border: 1px solid var(--linea); padding: 12px 6px; text-align: center; }
.cifra b { display: block; font: 700 34px/1 var(--cond); }
.cifra span { font-size: 13px; color: var(--suave); }
.foto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--linea); }
.etq { display: inline-block; font: 600 12px var(--texto); padding: 1px 7px; border-radius: 999px; background: var(--fondo); color: var(--suave); margin-left: 6px; }
.modelo-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
footer { margin-top: 44px; color: var(--trazo); font-size: 13px; }

@media (max-width: 900px) {
  .mercados, .modelo-res { grid-template-columns: 1fr; }
  .calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc > label:first-child { grid-column: 1 / -1; }
  .calc-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .envolt { padding: 0 14px 48px; }
  .marcador { grid-template-columns: 1fr 1fr; padding: 18px; }
  .m-centro { grid-column: 1 / -1; order: -1; }
  .m-res { font-size: 56px; }
  .m-eq h1 { font-size: 24px; }
  .dos { grid-template-columns: 1fr; }
  .cf { grid-template-columns: 1fr 58px 104px 58px 1fr; gap: 6px; } .cf .v { font-size: 17px; }
  .cf .et { font-size: 13px; } .cf .et small { display: none; }
  .cabecera h1 { font-size: 30px; } .gr { font-size: 44px; }
  .cifras { grid-template-columns: repeat(3, 1fr); }
  .estado { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }