*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;-webkit-text-size-adjust:100%}
/* Con el tema elegido a mano, casillas y listas siguen ese tema y no el del celular. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
img{max-width:100%}
[hidden]{display:none!important}

/* Paleta "noche de cancha": tinta azul noche, voltio (amarillo limón) y
   azul eléctrico. El marcador de arriba es oscuro en los dos temas.
   Los nombres --grama* se conservan: ahora son el azul de acento. */
:root{
  --fondo:#F3F2EC; --panel:#FFFFFF; --panel-2:#F2F1EA;
  --tinta:#0F1526; --tinta-2:#525A70; --tinta-3:#868C9E;
  --linea:#E2E0D6; --linea-fuerte:#CDCBBF;
  --grama:#2747E0; --grama-fuerte:#1C34B5; --grama-suave:#E7EBFD;
  --volt:#D4F53C; --volt-tinta:#0F1526; --azul-vivo:#3D5BFF;
  --noche:#0D1224; --noche-2:#1A2446;
  --marcador-tinta:#F4F6FB; --marcador-suave:#9EA7C4; --marcador-linea:rgba(255,255,255,.12);
  --alerta:#C2410C; --alerta-suave:#FDEDE3;
  --sombra:0 1px 2px rgba(15,21,38,.06),0 10px 28px -18px rgba(15,21,38,.4);
  --e1a:#E4B93B; --e1b:#1E8A4C;
  --e2a:#C8342F; --e2b:#2B5FAE;
  --e3a:#F0F0EA; --e3b:#22221F;
  --r-s:7px; --r-m:12px; --r-l:20px;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --texto:"Barlow","Segoe UI",system-ui,sans-serif;
  --dato:"IBM Plex Mono",ui-monospace,"Consolas",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#090D19; --panel:#11172A; --panel-2:#172036;
    --tinta:#EEF1F8; --tinta-2:#A2AAC3; --tinta-3:#6E7793;
    --linea:#212A44; --linea-fuerte:#323C5C;
    --grama:#7E96FF; --grama-fuerte:#A5B5FF; --grama-suave:#1A2349;
    --noche:#111933; --noche-2:#1F2B55;
    --alerta:#FF8F57; --alerta-suave:#2E1C14;
    --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 28px -18px rgba(0,0,0,.8);
    --e3a:#E9E9E4; --e3b:#3A3A34;
  }
}
:root[data-theme="dark"]{
  --fondo:#090D19; --panel:#11172A; --panel-2:#172036;
  --tinta:#EEF1F8; --tinta-2:#A2AAC3; --tinta-3:#6E7793;
  --linea:#212A44; --linea-fuerte:#323C5C;
  --grama:#7E96FF; --grama-fuerte:#A5B5FF; --grama-suave:#1A2349;
  --noche:#111933; --noche-2:#1F2B55;
  --alerta:#FF8F57; --alerta-suave:#2E1C14;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 28px -18px rgba(0,0,0,.8);
  --e3a:#E9E9E4; --e3b:#3A3A34;
}

body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:880px; margin:0 auto; padding-block:14px 64px; padding-left:16px; padding-right:16px;}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:800; text-wrap:balance; letter-spacing:.005em}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--grama); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- cabecera con escudo ---------- */
.cabecera{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.club{display:flex; align-items:center; gap:10px; min-width:0}
.escudo{width:30px; height:34px; flex:0 0 auto; color:var(--tinta)}
.club-n{font-family:var(--display); font-size:22px; font-weight:800; font-style:italic; line-height:1; letter-spacing:.02em}
.club-s{font-family:var(--dato); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); margin-top:3px; white-space:nowrap}

/* ---------- marcador de la jornada (arriba) ---------- */
/* Siempre oscuro, como un tablero de estadio de noche: un foco de luz
   arriba a la derecha, las líneas de la cancha y dos bandas en diagonal. */
.marcador,.portada{
  position:relative; overflow:hidden; border-radius:var(--r-l);
  color:var(--marcador-tinta);
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(212,245,60,.17), transparent 55%),
    linear-gradient(165deg,var(--noche-2),var(--noche) 70%);
  border:1px solid rgba(255,255,255,.07);
  padding:20px 20px 18px; box-shadow:0 18px 40px -24px rgba(13,18,36,.75);
}
.marcador::before,.portada::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='white' stroke-opacity='.075' stroke-width='2'%3E%3Ccircle cx='150' cy='150' r='78'/%3E%3Cpath d='M150 0v300'/%3E%3Ccircle cx='150' cy='150' r='4' fill='white' fill-opacity='.1'/%3E%3C/svg%3E") no-repeat right -150px center / 300px 300px;
}
.marcador::after,.portada::after{
  content:""; position:absolute; top:-12px; right:30px; width:15px; height:112px; pointer-events:none;
  background:var(--volt); transform:skewX(-20deg); border-radius:2px;
  box-shadow:21px 0 0 var(--azul-vivo);
}
.marcador>*,.portada>*{position:relative; z-index:1}
.eyebrow{
  font-family:var(--dato); font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--volt);
  padding-right:76px;
}
.marcador h1,.portada h1{
  font-size:clamp(42px,12vw,64px); line-height:.9; margin-top:8px;
  text-transform:uppercase; font-style:italic; letter-spacing:-.005em; padding-right:60px;
}
.marcador .donde{font-size:14.5px; color:var(--marcador-suave); margin-top:6px}
.cifras{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px; margin-top:18px;
  padding-top:15px; border-top:1px solid var(--marcador-linea);
}
.cifra{min-width:0}
.cifra .k{font-family:var(--dato); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--marcador-suave)}
.cifra .v{font-family:var(--display); font-size:25px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; margin-top:2px; white-space:nowrap}
.cifra.clave .v{color:var(--volt)}
.cifra.falta .v{color:#FFA06B}
.actualizada{margin-top:14px; font-family:var(--dato); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--marcador-suave)}
.cupo{height:4px; margin-top:5px; border-radius:2px; background:rgba(255,255,255,.13); overflow:hidden}
.cupo i{display:block; height:100%; background:var(--volt); border-radius:2px}

/* ---------- portada de rol ---------- */
.portada{padding:24px 20px 22px}
.portada .sub{font-size:14.5px; color:var(--marcador-suave); margin-top:6px}
.portada .pregunta{
  font-family:var(--dato); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--marcador-suave);
  margin-top:24px; padding-top:16px; border-top:1px solid var(--marcador-linea);
}
.opciones{display:grid; grid-template-columns:1fr; gap:9px; margin-top:12px}
@media(min-width:560px){.opciones{grid-template-columns:1fr 1fr}}
.opcion{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:14px 16px; border-radius:var(--r-m);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--marcador-tinta);
  transition:border-color .12s, transform .12s, background .12s;
}
.opcion:hover{border-color:var(--volt); background:rgba(255,255,255,.09); transform:translateY(-1px)}
.opcion .ot{font-family:var(--display); font-size:22px; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.01em}
.opcion .od{font-size:13.5px; color:var(--marcador-suave); line-height:1.35}
.clave-caja{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.clave-caja input{
  flex:1 1 170px; min-width:0; padding:11px 12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-s);
  font-family:var(--dato); font-size:16px; color:var(--marcador-tinta); letter-spacing:.12em;
}
.clave-caja input::placeholder{color:var(--marcador-suave)}
.clave-caja input:focus{border-color:var(--volt); outline:none}
.clave-caja input.correo{letter-spacing:normal; flex-basis:100%}
.clave-error{margin-top:9px; font-size:13.5px; color:#FFA06B; font-weight:600}
.portada .btn.texto{color:var(--marcador-suave)}
.portada .btn.texto:hover{color:var(--volt)}
.marca-pago{font-family:var(--dato); font-size:13px; color:var(--tinta-3)}
.marca-pago.si{color:var(--grama-fuerte); font-weight:600}

/* ---------- selector de tema ---------- */
.tema{display:flex; gap:2px; padding:3px; border-radius:999px; background:var(--panel); border:1px solid var(--linea); flex:0 0 auto}
.tema button{
  padding:4px 9px; border-radius:999px;
  font-family:var(--dato); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3);
}
.tema button:hover{color:var(--tinta)}
.tema button[aria-pressed="true"]{color:var(--fondo); background:var(--tinta)}
@media(max-width:400px){.club-s{display:none}}

/* ---------- navegación ---------- */
/* Fija arriba al bajar, para cambiar de pestaña sin volver al inicio. */
nav.tabs{
  position:sticky; top:8px; z-index:5;
  display:flex; gap:3px; margin:14px 0; padding:4px;
  background:var(--panel); border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra);
  overflow-x:auto; scrollbar-width:none;
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  flex:1 0 auto; position:relative;
  font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:.02em;
  padding:7px 9px 9px; border-radius:10px; color:var(--tinta-2); white-space:nowrap;
}
nav.tabs button:hover{color:var(--tinta)}
nav.tabs button[aria-current="true"]{color:var(--fondo); background:var(--tinta)}
nav.tabs button[aria-current="true"]::after{
  content:""; position:absolute; left:50%; bottom:4px; width:18px; height:3px; margin-left:-9px;
  background:var(--volt); border-radius:2px;
}

/* ---------- bloques ---------- */
.bloque{margin-bottom:26px}
.bloque>header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px}
.bloque h2{
  display:flex; align-items:center; gap:9px;
  font-size:23px; font-style:italic; text-transform:uppercase; letter-spacing:.01em; line-height:1;
}
/* Las dos bandas del escudo, en chiquito, antes de cada título. */
.bloque h2::before{
  content:""; flex:0 0 auto; width:15px; height:17px; transform:skewX(-20deg);
  background:linear-gradient(90deg,var(--volt) 0 42%,transparent 42% 62%,var(--azul-vivo) 62%);
}
.pista{font-size:13.5px; color:var(--tinta-2)}
.panel{background:var(--panel); border:1px solid var(--linea); border-radius:var(--r-m); box-shadow:var(--sombra)}

/* ---------- convocatoria ---------- */
.selector{
  border:1px solid var(--linea); border-radius:var(--r-m);
  background:var(--panel); box-shadow:var(--sombra); overflow:hidden;
}
.selector-cab{
  display:flex; width:100%; align-items:center; gap:10px;
  padding:12px 14px; text-align:left; font-size:15px; font-weight:600;
}
.selector-cab:hover{background:var(--panel-2)}
.selector-cab .crece{flex:1 1 auto; min-width:0}
.selector-cab .flecha{
  flex:0 0 auto; color:var(--grama); font-size:13px; line-height:1;
  transition:transform .15s; display:inline-block;
}
.selector-cab .flecha.abierta{transform:rotate(90deg)}
.selector-cab .cuenta{
  flex:0 0 auto; font-family:var(--dato); font-size:12.5px;
  color:var(--tinta-2); font-variant-numeric:tabular-nums;
}
.lista-chk{max-height:344px; overflow-y:auto; border-top:1px solid var(--linea)}
.fila-chk{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--linea); cursor:pointer;
}
.fila-chk:last-child{border-bottom:none}
.fila-chk:hover{background:var(--panel-2)}
.fila-chk.marcada{background:var(--grama-suave)}
.fila-chk .n{flex:1 1 auto; min-width:0; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fila-chk.marcada .n{font-weight:600}
.fila-chk .tr{
  flex:0 0 auto; font-family:var(--dato); font-size:12px;
  color:var(--tinta-3); font-variant-numeric:tabular-nums;
}
.fila-chk .etq{
  flex:0 0 auto; font-family:var(--dato); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--tinta-3);
  border:1px solid var(--linea-fuerte); border-radius:999px; padding:1px 7px;
}
.selector-pie{padding:8px 10px; border-top:1px solid var(--linea); background:var(--panel-2)}

/* ---------- tablas ---------- */
.tabla-caja{overflow-x:auto; border-radius:var(--r-m); border:1px solid var(--linea); background:var(--panel); box-shadow:var(--sombra)}
table{border-collapse:collapse; width:100%; min-width:430px}
th,td{padding:8px 10px; text-align:left; border-bottom:1px solid var(--linea); vertical-align:middle}
thead th{
  font-family:var(--dato); font-size:10px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tinta-2); background:var(--panel-2);
  border-bottom:1px solid var(--linea-fuerte); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
.num{text-align:right; font-family:var(--dato); font-variant-numeric:tabular-nums; white-space:nowrap}
td.idx{font-family:var(--dato); font-size:12px; color:var(--tinta-3); width:1%; text-align:right}
tfoot td{
  border-top:2px solid var(--linea-fuerte); border-bottom:none;
  font-weight:700; background:var(--panel-2);
}
.nombre-cel{font-weight:600}
/* Tabla de cuentas: nombre en una línea y la casilla de pago grande. */
table.cuentas .nombre-cel{white-space:nowrap}
table.cuentas th.pago-col, table.cuentas td.pago-col{text-align:center; padding-left:4px; padding-right:4px}
table.cuentas .chk{width:24px; height:24px; vertical-align:middle}
.tabla-caja + .pie-tabla{margin-top:7px}

/* entradas dentro de tabla */
input.mini{
  width:78px; padding:4px 7px; text-align:right;
  font-family:var(--dato); font-size:13px; font-variant-numeric:tabular-nums;
  background:var(--fondo); border:1px solid var(--linea-fuerte); border-radius:var(--r-s);
}
input.mini:focus{border-color:var(--grama)}
input.mini.can-in{width:84px}
input.mini.can-in.ayuda{border-color:var(--alerta); background:var(--alerta-suave)}
.nota-mano{margin-top:7px; font-size:13.5px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.nota-mano .crece{flex:1 1 200px}
.nota-mano.mal{color:var(--alerta); font-weight:600}
.nota-mano.ok{color:var(--grama-fuerte)}
.chk{width:18px; height:18px; accent-color:var(--grama); cursor:pointer}
/* Sin flechitas para subir/bajar: estorban al escribir en el celular. */
input[type="number"]{-moz-appearance:textfield; appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.dur{display:flex; align-items:center; gap:6px}
.campo .dur input{width:50px; min-width:0; flex:0 1 50px; text-align:center}
.dur .u{font-family:var(--dato); font-size:12px; color:var(--tinta-2)}

/* ---------- controles ---------- */
.controles{display:flex; flex-wrap:wrap; gap:12px; padding:13px; align-items:flex-end}
.campo{display:flex; flex-direction:column; gap:3px; flex:1 1 130px; min-width:0}
.campo label{font-family:var(--dato); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-2)}
.campo input,.campo select{
  padding:7px 9px; background:var(--fondo); border:1px solid var(--linea-fuerte);
  border-radius:var(--r-s); font-family:var(--dato); font-size:14px; width:100%;
}
.campo input[type="date"]{font-family:var(--dato)}
.campo input:focus,.campo select:focus{border-color:var(--grama)}
.campo.ancho{flex:2 1 190px}
.check-linea{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--tinta-2); flex:1 1 150px}

/* ---------- botones ---------- */
.acciones{display:flex; flex-wrap:wrap; gap:9px; margin-top:14px}
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px;
  border-radius:var(--r-s); font-weight:600; font-size:15px; transition:filter .12s, border-color .12s;
  border:1px solid var(--linea-fuerte); background:var(--panel); color:var(--tinta);
}
.btn:hover{border-color:var(--grama); color:var(--grama)}
.btn.pri{background:var(--volt); border-color:var(--volt); color:var(--volt-tinta); font-weight:700}
.btn.pri:hover{filter:brightness(.94); border-color:var(--volt); color:var(--volt-tinta)}
.btn[disabled]{opacity:.45; cursor:default; pointer-events:none}
.btn.chico{padding:6px 11px; font-size:13.5px}
.btn.texto{border-color:transparent; background:none; color:var(--tinta-2); padding-left:4px; padding-right:4px}
.btn.texto:hover{color:var(--grama)}
.btn.peligro:hover{border-color:#C8342F; color:#C8342F}

/* ---------- avisos ---------- */
.aviso{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:11px 13px; border-radius:var(--r-m); font-size:14px; margin-bottom:14px;
  background:var(--alerta-suave); border:1px solid var(--alerta); color:var(--tinta);
}
.aviso.ok{background:var(--grama-suave); border-color:var(--grama)}
.aviso .crece{flex:1 1 200px}
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-family:var(--dato); font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.pill.sucio{background:var(--alerta-suave); color:var(--alerta); border:1px solid var(--alerta)}
.pill.ok{background:var(--grama-suave); color:var(--grama-fuerte); border:1px solid var(--grama)}

/* ---------- equipos ---------- */
.asig{display:flex; flex-direction:column}
.asig-fila{display:flex; align-items:center; gap:10px; padding:7px 11px; border-bottom:1px solid var(--linea)}
.asig-fila:last-child{border-bottom:none}
.asig-fila .nm{flex:1 1 auto; min-width:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.seg{display:flex; gap:3px; flex:0 0 auto}
.seg button{
  width:32px; height:30px; border:1px solid var(--linea-fuerte); border-radius:var(--r-s);
  font-family:var(--dato); font-size:13px; font-weight:600; color:var(--tinta-2); background:var(--fondo);
}
.seg button[aria-pressed="true"]{color:#fff; border-color:transparent}
.seg button.t0[aria-pressed="true"]{background:var(--tinta-3)}
.seg button.t1[aria-pressed="true"]{background:linear-gradient(135deg,var(--e1a) 50%,var(--e1b) 50%); text-shadow:0 1px 2px rgba(0,0,0,.45)}
.seg button.t2[aria-pressed="true"]{background:linear-gradient(135deg,var(--e2a) 50%,var(--e2b) 50%); text-shadow:0 1px 2px rgba(0,0,0,.45)}
.seg button.t3[aria-pressed="true"]{background:linear-gradient(135deg,var(--e3a) 50%,var(--e3b) 50%); color:var(--e3b); text-shadow:none}

/* marcas */
.marca-fila{display:grid; grid-template-columns:20px minmax(0,1fr) 22px minmax(0,1fr);
  align-items:center; gap:6px; padding:6px 10px; border-bottom:1px solid var(--linea)}
.marcas.n3 .marca-fila{grid-template-columns:20px repeat(3,minmax(0,1fr))}
.marca-fila:last-child{border-bottom:none}
.marca-fila:nth-child(even){background:var(--panel-2)}
.marca-cab{background:var(--panel-2); border-bottom-color:var(--linea-fuerte); padding-top:9px; padding-bottom:8px; align-items:end}
.marca-fila .idx{font-family:var(--dato); font-size:12px; color:var(--tinta-3); text-align:right}
.marca-fila .vs{font-family:var(--dato); font-size:10px; letter-spacing:.06em; color:var(--tinta-3); text-align:center}
.eqc{display:flex; flex-direction:column; gap:1px; min-width:0}
.eqc .barra{height:4px; border-radius:2px; margin-bottom:4px}
.eqc.t1 .barra{background:linear-gradient(90deg,var(--e1a) 50%,var(--e1b) 50%)}
.eqc.t2 .barra{background:linear-gradient(90deg,var(--e2a) 50%,var(--e2b) 50%)}
.eqc.t3 .barra{background:linear-gradient(90deg,var(--e3a) 50%,var(--e3b) 50%)}
.eqc .eqn{font-family:var(--display); font-size:16px; font-weight:700; text-transform:uppercase; line-height:1.1; white-space:nowrap}
.eqc .eqd{font-family:var(--dato); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.marca-fila select{width:100%; min-width:0; padding:7px 6px; background:var(--fondo); color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:var(--r-s); font-size:16px; text-overflow:ellipsis}
.marca-fila select:focus{border-color:var(--grama)}
.marca-fila select.vacio{color:var(--tinta-3); border-style:dashed}
.marca-fila select.lleno{font-weight:600; border-left-width:4px}
.marca-fila select.lleno.t1{border-left-color:var(--e1a)}
.marca-fila select.lleno.t2{border-left-color:var(--e2a)}
.marca-fila select.lleno.t3{border-left-color:var(--e3b)}
.marca-fila .celda{font-size:15.5px; font-weight:600; padding:3px 0 3px 8px; border-left:4px solid transparent;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.marca-fila .celda.t1{border-left-color:var(--e1a)}
.marca-fila .celda.t2{border-left-color:var(--e2a)}
.marca-fila .celda.t3{border-left-color:var(--e3b)}
.marca-fila .celda.hueco{color:var(--tinta-3); font-weight:400}

.equipos{display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px}
@media(min-width:620px){.equipos{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.equipo{border:1px solid var(--linea); border-radius:var(--r-m); background:var(--panel); overflow:hidden; box-shadow:var(--sombra)}
.equipo .barra{height:6px}
.equipo.t1 .barra{background:linear-gradient(90deg,var(--e1a) 50%,var(--e1b) 50%)}
.equipo.t2 .barra{background:linear-gradient(90deg,var(--e2a) 50%,var(--e2b) 50%)}
.equipo.t3 .barra{background:linear-gradient(90deg,var(--e3a) 50%,var(--e3b) 50%)}
.equipo h3{font-size:20px; font-style:italic; padding:10px 13px 1px; text-transform:uppercase}
.equipo .color{padding:0 13px 9px; font-family:var(--dato); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2)}
.equipo ol{margin:0; padding:0 13px 12px 30px; font-size:15px}
.equipo li{padding:2px 0}
.equipo .vacio{padding:0 13px 13px; color:var(--tinta-3); font-size:14px; font-style:italic}

/* ---------- marcador (goles y autogoles) ---------- */
.tablero{display:flex; align-items:stretch; gap:10px; padding:16px 14px;
  background:linear-gradient(165deg,var(--noche-2),var(--noche) 70%); border-color:transparent; color:var(--marcador-tinta)}
.tablero .tb{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center}
.tablero .barra{display:block; width:100%; height:6px; border-radius:3px; margin-bottom:8px}
.tablero .tb.t1 .barra{background:linear-gradient(90deg,var(--e1a) 50%,var(--e1b) 50%)}
.tablero .tb.t2 .barra{background:linear-gradient(90deg,var(--e2a) 50%,var(--e2b) 50%)}
.tablero .tb.t3 .barra{background:linear-gradient(90deg,var(--e3a) 50%,var(--e3b) 50%)}
.tablero .tbn{font-family:var(--dato); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--marcador-suave);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tablero .tbv{font-family:var(--display); font-size:64px; font-weight:800; font-style:italic; line-height:1; font-variant-numeric:tabular-nums; margin-top:2px}
.tablero.n3 .tbv{font-size:46px}
.tablero .tbag{font-family:var(--dato); font-size:11px; color:#FFA06B}
.tablero .tb-vs{align-self:center; font-family:var(--display); font-size:34px; font-weight:800; color:var(--volt); padding-top:14px}

.equipo.goles.sin-eq .barra{background:var(--linea-fuerte)}
/* Nombre y contadores en una línea (cabe en 360 px). Un nombre largo se
   parte en dos líneas; si aun así no cabe, los contadores bajan juntos. */
.gol-fila{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:6px 10px 6px 13px; border-top:1px solid var(--linea)}
.gol-fila:last-child{padding-bottom:9px}
.gol-fila .gn{flex:1 1 64px; min-width:0; font-weight:600; font-size:15px; line-height:1.15; overflow-wrap:anywhere}
.gcs{flex:0 0 auto; display:flex; gap:12px; margin-left:auto}
.gc{flex:0 0 auto; width:106px; display:flex; align-items:center; justify-content:flex-end; gap:4px}
.gc.ro{width:44px; justify-content:center}
.gol-cab{border-top:0; padding-top:0; padding-bottom:3px}
.gol-cab .gc{justify-content:center; font-family:var(--dato); font-size:10.5px; font-weight:600; letter-spacing:.1em; color:var(--tinta-2)}
.gc .gv{font-family:var(--dato); font-size:17px; font-weight:600; min-width:22px; text-align:center; font-variant-numeric:tabular-nums; color:var(--grama-fuerte)}
.gc .gv.ag{color:var(--alerta)}
.gc .gv.cero{color:var(--tinta-3); font-weight:400}
.gol-mas,.gol-menos{touch-action:manipulation; -webkit-user-select:none; user-select:none; line-height:1; cursor:pointer}
.gol-mas{width:44px; height:44px; border-radius:50%; background:var(--volt); color:var(--volt-tinta); font-size:26px; font-weight:700; box-shadow:0 2px 0 rgba(15,21,38,.18)}
.gol-mas:active{transform:scale(.92)}
.gol-mas.ag{background:var(--panel); color:var(--alerta); border:2px solid var(--alerta)}
.gol-menos{width:32px; height:32px; border-radius:50%; border:1px solid var(--linea-fuerte); color:var(--tinta-2); font-size:18px; background:var(--fondo)}
.gol-menos:disabled{opacity:.35; cursor:default}

/* ---------- histórico ---------- */
.lista-j{display:flex; flex-direction:column}
.fila-j{display:flex; align-items:center; gap:12px; padding:11px 13px; border-bottom:1px solid var(--linea); width:100%; text-align:left}
.fila-j:last-child{border-bottom:none}
.fila-j:hover{background:var(--panel-2)}
.fila-j .fj{
  font-family:var(--dato); font-size:12.5px; color:var(--tinta-2);
  flex:0 0 auto; width:58px; font-variant-numeric:tabular-nums;
}
.fila-j .cuerpo{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.fila-j .tj{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fila-j .meta{
  font-family:var(--dato); font-size:11.5px; color:var(--tinta-3);
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fila-j .mj{
  font-family:var(--dato); font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.detalle strong{font-variant-numeric:tabular-nums}

/* filtros del histórico */
.resumen-tit{margin-top:12px; margin-bottom:6px}
.resumen{display:flex; flex-wrap:wrap; gap:1px;
  background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--sombra)}
.resumen>div{flex:1 1 130px; background:var(--panel); padding:10px 12px; min-width:0}
table.tabla-hist{min-width:0}
.resumen .k{font-family:var(--dato); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-2)}
.resumen .v{font-family:var(--display); font-size:24px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; margin-top:2px; white-space:nowrap}
.resumen .v.fuerte{color:var(--grama-fuerte)}
.link-jug{font-weight:600; text-align:left; padding:0; text-decoration:underline; text-decoration-color:var(--linea-fuerte); text-underline-offset:3px}
.link-jug:hover{color:var(--grama); text-decoration-color:var(--grama)}
tr.sel td{background:var(--grama-suave)}
tr.libre td{background:repeating-linear-gradient(135deg,transparent 0 8px,var(--panel-2) 8px 16px);
  border-bottom:1px dashed var(--linea-fuerte)}
.libre-txt{font-style:italic; color:var(--tinta-2); font-size:14.5px}
.libre-btn{padding:2px 0; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}
.libre-btn:hover{color:var(--grama)}
#filtros-hist .campo:first-child{flex:2 1 220px}
.buscador{display:flex; gap:6px; align-items:stretch}
.buscador input{flex:1 1 auto; min-width:0}
.buscador .quitar{flex:0 0 auto; padding:0 12px; border-radius:var(--r-s);
  border:1px solid var(--linea-fuerte); background:var(--panel-2); color:var(--tinta);
  font-size:13.5px; font-weight:600}
.buscador .quitar:hover{border-color:var(--grama); color:var(--grama)}
.detalle{padding:13px; border-top:1px solid var(--linea); background:var(--panel-2); font-size:14.5px}
/* G en la tabla de cuentas */
input.mini.gt-in{width:46px; padding:4px 4px; text-align:center}
th.gt-col, td.gt-col{text-align:center; padding-left:5px; padding-right:5px}
th.gt-col{font-size:12px; letter-spacing:.06em}
td.gt-col .gt-v{font-family:var(--dato); font-weight:700; color:var(--grama-fuerte)}
td.gt-col .gt-0{font-family:var(--dato); color:var(--tinta-3)}
.gt-gt{font-family:var(--dato); font-size:12.5px; color:var(--grama-fuerte); font-weight:600}
.chips-orden{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.chips-orden button{font-family:var(--dato); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-2);
  border:1px solid var(--linea-fuerte); border-radius:999px; padding:4px 11px; background:var(--panel)}
.chips-orden button[aria-pressed="true"]{color:var(--grama-fuerte); border-color:var(--grama); background:var(--grama-suave)}
table.tabla-hist th, table.tabla-hist td{padding:8px 4px}
table.tabla-hist th:first-child, table.tabla-hist td:first-child{padding-left:10px}
.detalle ul{margin:6px 0 0; padding-left:20px; columns:2; column-gap:20px}
@media(max-width:480px){.detalle ul{columns:1}}

/* ---------- jugadores ---------- */
.jug-fila{display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:9px 11px; border-bottom:1px solid var(--linea)}
.jug-fila:last-child{border-bottom:none}
.jug-fila input.nom{flex:1 1 150px; min-width:110px; padding:6px 9px; background:var(--fondo); border:1px solid var(--linea-fuerte); border-radius:var(--r-s); font-size:15px}
.jug-fila input.nom:focus{border-color:var(--grama)}
.jug-fila .veces{font-family:var(--dato); font-size:11.5px; color:var(--tinta-3); flex:0 0 auto; width:38px; text-align:right}
.jug-fila select{padding:5px 7px; background:var(--fondo); border:1px solid var(--linea-fuerte); border-radius:var(--r-s); font-size:13px; max-width:150px}

.vacio-caja{padding:26px 16px; text-align:center; color:var(--tinta-2); font-size:15px}
.copia-caja{width:100%; min-height:190px; margin-top:10px; padding:11px; font-family:var(--dato); font-size:12.5px; line-height:1.5; background:var(--panel); color:var(--tinta); border:1px solid var(--linea-fuerte); border-radius:var(--r-m); resize:vertical}
.nota-pie{margin-top:26px; padding-top:14px; border-top:1px solid var(--linea); font-size:12.5px; color:var(--tinta-3)}