:root {
  --fondo: #060a0f;
  --superficie: #0d131b;
  --superficie-2: #131b25;
  --superficie-3: #1a2430;
  --linea: rgba(255, 255, 255, 0.07);
  --linea-fuerte: rgba(255, 255, 255, 0.13);
  --texto: #f1f5f9;
  --texto-2: #9ba8b8;
  --texto-3: #657284;
  --acento: #2ee59d;
  --acento-suave: rgba(46, 229, 157, 0.12);
  --vivo: #ff3b5c;
  --amarilla: #ffd23f;
  --roja: #ff4d4d;
  --sube: #2ee59d;
  --medio: #4ea8ff;
  --baja: #ff5470;
  --radio: 18px;
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "SF Pro Display", -apple-system, "Segoe UI", sans-serif;
  --liga: #2ee59d;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--fondo); }
body {
  margin: 0; min-height: 100vh; color: var(--texto); font: 15px/1.4 var(--fuente);
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 420px at 15% -120px, rgba(46, 229, 157, 0.14), transparent 70%),
    radial-gradient(800px 380px at 95% -80px, rgba(78, 168, 255, 0.12), transparent 70%),
    var(--fondo);
  background-attachment: fixed;
}
button { font: inherit; color: inherit; }
img { display: block; }
[hidden] { display: none !important; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--linea);
}
.titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.titulo h1 { margin: 0; font: 800 26px/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.titulo small { display: block; font-size: 12px; color: var(--texto-3); margin-top: 2px; }
.logo { width: 34px; height: 34px; border-radius: 10px; background: url("/iconos/icono-192.png") center / cover; flex: 0 0 auto; box-shadow: 0 4px 14px -6px rgba(46, 229, 157, 0.6); }
.estado-datos { font-size: 12px; color: var(--texto-3); text-align: right; }
.estado-datos.demo { color: var(--amarilla); }

.vista { max-width: 760px; margin: 0 auto; padding: 14px 16px 24px; }
.subtitulo { display: flex; align-items: center; gap: 8px; font: 700 15px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); margin: 24px 2px 10px; }
.subtitulo .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 4px rgba(255, 59, 92, 0.18); animation: latido 1.6s ease-in-out infinite; }

/* ---------- resumen del día ---------- */
.resumen-dia {
  position: relative; overflow: hidden; padding: 16px 16px 14px; border-radius: 22px; margin-bottom: 12px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(78, 168, 255, 0.16), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(46, 229, 157, 0.14), transparent 55%),
    var(--superficie);
  border: 1px solid var(--linea-fuerte);
}
.resumen-dia::after { /* líneas de cancha */
  content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.015); pointer-events: none;
}
.rd-fecha { font: 700 14px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); }
.rd-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 14px; }
.rd-numeros div { display: grid; gap: 2px; }
.rd-numeros b { font: 800 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.rd-numeros span { font-size: 12px; color: var(--texto-3); }
.rd-numeros .vivo b { color: var(--vivo); }
.rd-ligas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.rd-ligas::-webkit-scrollbar { display: none; }
.chip-liga { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--liga) 13%, var(--superficie-2)); border: 1px solid color-mix(in srgb, var(--liga) 38%, transparent); font-size: 13px; }
.chip-liga img { width: 18px; height: 18px; object-fit: contain; }
.chip-liga .n { font-weight: 700; color: var(--texto-2); }
.chip-liga .n.vivo { color: var(--vivo); }

/* ---------- próximo partido ---------- */
.proximo { margin-top: 14px; padding: 16px; border-radius: 22px; cursor: pointer; text-align: left; width: 100%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--liga) 26%, var(--superficie)) 0%, var(--superficie) 62%);
  border: 1px solid color-mix(in srgb, var(--liga) 35%, var(--linea)); }
.px-etiqueta { font-size: 12.5px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.px-etiqueta img { width: 16px; height: 16px; object-fit: contain; }
.px-equipos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.px-eq { display: grid; justify-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: 14.5px; }
.px-eq .escudo, .px-eq .escudo-texto { width: 54px; height: 54px; font-size: 15px; }
.px-centro { text-align: center; }
.px-cuenta { font: 800 30px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.px-hora { font-size: 12.5px; color: var(--texto-2); margin-top: 4px; }

/* ---------- partidos en vivo ---------- */
.grilla-vivo { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .grilla-vivo { grid-template-columns: 1fr 1fr; } }
.tarjeta-vivo {
  position: relative; overflow: hidden; display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 13px 14px 12px; border-radius: var(--radio);
  background: linear-gradient(160deg, color-mix(in srgb, var(--liga) 16%, var(--superficie)) 0%, var(--superficie) 58%);
  border: 1px solid color-mix(in srgb, var(--liga) 30%, var(--linea));
  transition: transform 160ms var(--curva), border-color 200ms ease-out;
}
.tarjeta-vivo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--liga); opacity: 0.9; }
.tarjeta-vivo:active { transform: scale(0.985); }
.tarjeta-vivo.recien-gol { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), 0 10px 30px -12px rgba(46, 229, 157, 0.6); }
.tv-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-size: 12px; color: var(--texto-2); }
.tv-liga { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-liga img { width: 16px; height: 16px; object-fit: contain; }
.minuto { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--display); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; color: var(--vivo); white-space: nowrap; }
.minuto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: latido 1.6s ease-in-out infinite; }
.minuto.descanso { color: var(--amarilla); }
.minuto.descanso::before { animation: none; }
@keyframes latido { 50% { opacity: 0.35; } }
.tv-equipo { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.tv-equipo .escudo, .tv-equipo .escudo-texto { width: 30px; height: 30px; }
.tv-equipo .nombre { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-equipo .goles { font: 800 30px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.tv-equipo.pierde .nombre, .tv-equipo.pierde .goles { color: var(--texto-2); }
.tv-barra { position: relative; height: 4px; margin-top: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.tv-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--liga) 70%, #fff 0%), var(--liga)); }
.tv-barra::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--fondo); }
.tv-ultimo { margin-top: 9px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.escudo, .chip-liga img, .tv-liga img, .cab-liga img, .hoja-liga img, .px-etiqueta img { flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.12)); }
.escudo { width: 24px; height: 24px; }
.escudo-texto { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font: 700 10px/1 var(--fuente); color: var(--texto-2); background: var(--superficie-3); border: 1px solid var(--linea-fuerte); letter-spacing: -0.02em; }

.vacio { position: relative; overflow: hidden; padding: 30px 18px; text-align: center; color: var(--texto-2); border-radius: var(--radio);
  background: var(--superficie); border: 1px dashed var(--linea-fuerte); }
.vacio b { display: block; font: 700 20px/1.1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto); margin-bottom: 6px; }
.vacio svg { display: block; margin: 0 auto 12px; opacity: 0.5; }

/* resultados de hoy (tarjetas chicas) */
.grilla-resultados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 600px) { .grilla-resultados { grid-template-columns: repeat(3, 1fr); } }
.resultado-mini { text-align: left; cursor: pointer; padding: 10px 11px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); display: grid; gap: 5px; position: relative; overflow: hidden; }
.resultado-mini::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--liga); }
.resultado-mini .rm-liga { font-size: 11px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado-mini .rm-eq { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.resultado-mini .rm-eq .escudo, .resultado-mini .rm-eq .escudo-texto { width: 18px; height: 18px; font-size: 7px; }
.resultado-mini .rm-eq span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado-mini .rm-eq b { font: 800 17px/1 var(--display); }
.resultado-mini .rm-eq.pierde { color: var(--texto-2); }

/* ---------- lista por liga ---------- */
.dias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin: 0 -16px 8px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.dias::-webkit-scrollbar { display: none; }
.dia { flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 62px; padding: 7px 12px; border-radius: 14px; border: 1px solid var(--linea-fuerte); background: var(--superficie); cursor: pointer; color: var(--texto-2); }
.dia b { font: 700 15px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.dia span { font-size: 11px; color: var(--texto-3); }
.dia.activo { background: var(--texto); color: var(--fondo); border-color: transparent; }
.dia.activo span { color: rgba(6, 10, 15, 0.6); }
.bloque-liga { scroll-margin-top: 76px; margin-bottom: 12px;background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.cab-liga { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; cursor: pointer; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--liga) 22%, var(--superficie)) 0%, var(--superficie) 75%); border-bottom: 1px solid var(--linea); }
.cab-liga img { width: 22px; height: 22px; object-fit: contain; }
.cab-liga .nombre-liga { flex: 1; font: 700 17px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.cab-liga .pais { font-size: 12px; color: var(--texto-3); }
.pill-vivo { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 59, 92, 0.16); color: var(--vivo); font: 700 12px/1.3 var(--fuente); vertical-align: 2px; }
.fila-partido { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
  background: none; border: 0; border-top: 1px solid var(--linea); cursor: pointer; text-align: left; }
.bloque-liga .fila-partido:first-of-type { border-top: 0; }
.fila-partido:active { background: var(--superficie-2); }
.fp-hora { display: grid; gap: 2px; font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; text-align: center; }
.fp-hora small { font-size: 10.5px; color: var(--texto-3); }
.fp-hora.en-juego { color: var(--vivo); font-weight: 700; }
.fp-hora.fin { color: var(--texto-3); }
.fp-equipos { min-width: 0; display: grid; gap: 5px; }
.fp-equipo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-equipo .escudo, .fp-equipo .escudo-texto { width: 20px; height: 20px; font-size: 8px; }
.fp-equipo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.fp-equipo.pierde span { color: var(--texto-2); }
.fp-goles { display: grid; gap: 5px; text-align: right; font: 800 18px/20px var(--display); font-variant-numeric: tabular-nums; min-width: 18px; }
.estrella { color: var(--acento); font-size: 12px; margin-left: 4px; }

/* ---------- hoja de detalle ---------- */
.hoja { position: fixed; inset: 0; z-index: 50; }
.hoja-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); animation: aparecer 200ms ease-out; }
.hoja-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 93vh; overflow-y: auto; max-width: 760px; margin: 0 auto;
  background: var(--superficie); border-radius: 24px 24px 0 0; border: 1px solid var(--linea-fuerte); border-bottom: 0;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom)); animation: subir 280ms var(--curva); }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(40px); opacity: 0.4; } }
.hoja-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; padding: 12px 0 8px; z-index: 2;
  background: linear-gradient(var(--superficie) 70%, transparent); }
.hoja-liga { font-size: 13px; color: var(--texto-2); text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hoja-liga img { width: 18px; height: 18px; object-fit: contain; }
.boton-icono { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: var(--superficie-2); cursor: pointer; font-size: 16px; }
.marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 14px 8px 18px; margin: 0 -16px 6px;
  background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--liga) 26%, transparent), transparent 70%); }
.marcador .lado { display: grid; justify-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: 14.5px; }
.marcador .lado .escudo, .marcador .lado .escudo-texto { width: 64px; height: 64px; font-size: 17px; }
.marcador .centro { text-align: center; }
.marcador .resultado { font: 800 54px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.marcador .estado { display: inline-block; margin-top: 6px; font: 700 14px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); padding: 5px 10px; border-radius: 999px; background: var(--superficie-2); }
.marcador .estado.en-juego { color: var(--vivo); background: rgba(255, 59, 92, 0.14); }
.estrella-eq { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: none; cursor: pointer; font-size: 12px; color: var(--texto-2); }
.estrella-eq.activo { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.pestanas-detalle { display: flex; gap: 6px; margin: 4px 0 14px; overflow-x: auto; scrollbar-width: none; }
.pestanas-detalle::-webkit-scrollbar { display: none; }
.pestanas-detalle button { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: none; cursor: pointer; font-size: 13.5px; color: var(--texto-2); }
.pestanas-detalle button.activa { background: var(--texto); border-color: transparent; color: var(--fondo); font-weight: 600; }
.linea-tiempo { position: relative; display: grid; gap: 2px; }
.linea-tiempo::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--linea-fuerte); }
.evento { position: relative; display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; gap: 6px; padding: 7px 0; font-size: 14px; }
.evento .min { justify-self: center; z-index: 1; min-width: 40px; text-align: center; padding: 3px 6px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linea-fuerte);
  font: 700 13px/1 var(--display); color: var(--texto); font-variant-numeric: tabular-nums; }
.evento.es-gol .min { background: var(--acento); color: #04150e; border-color: transparent; }
.evento .izq { text-align: right; }
.evento small { display: block; color: var(--texto-3); font-size: 12px; }
.tarjeta-ama, .tarjeta-roj { display: inline-block; width: 10px; height: 14px; border-radius: 2px; vertical-align: -2px; }
.tarjeta-ama { background: var(--amarilla); }
.tarjeta-roj { background: var(--roja); }
.estadistica { padding: 9px 0; }
.estadistica .rotulo { display: flex; justify-content: space-between; font: 700 16px/1 var(--display); margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.estadistica .rotulo span:nth-child(2) { font: 400 13px/1.2 var(--fuente); color: var(--texto-2); }
.barra-stat { display: flex; gap: 4px; height: 7px; }
.barra-stat i { display: block; border-radius: 4px; background: var(--superficie-3); }
.barra-stat i.mas { background: var(--liga); }
.alineacion h3 { font: 700 17px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; margin: 14px 0 8px; }
.alineacion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.alineacion li span { display: inline-block; width: 28px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.nota { color: var(--texto-2); font-size: 13px; margin: 6px 0; line-height: 1.5; }
.nota a { color: var(--texto-2); }
.cuenta-grande { text-align: center; padding: 18px 0 8px; }
.cuenta-grande b { display: block; font: 800 40px/1 var(--display); font-variant-numeric: tabular-nums; }
.cuenta-grande span { font-size: 13px; color: var(--texto-2); }

/* ---------- tablas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--superficie); cursor: pointer; font-size: 13.5px; color: var(--texto-2); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--liga); }
.chip.activo { background: var(--texto); color: var(--fondo); border-color: transparent; font-weight: 600; }
.chip .quitar { margin-left: 6px; color: var(--texto-3); }
#chips_tablas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
#chips_tablas::-webkit-scrollbar { display: none; }
#chips_tablas .chip { flex: 0 0 auto; }
.segmentos { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linea); margin: 4px 0 10px; }
.segmentos button { padding: 7px 16px; border-radius: 9px; border: 0; background: none; cursor: pointer; font-size: 13.5px; color: var(--texto-2); }
.segmentos button.activo { background: var(--superficie-3); color: var(--texto); font-weight: 600; }
.tabla-pos { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--superficie); border-radius: var(--radio); overflow: hidden; margin-bottom: 14px; border: 1px solid var(--linea); }
.tabla-pos th { font-size: 11px; font-weight: 600; color: var(--texto-3); text-align: center; padding: 9px 4px; border-bottom: 1px solid var(--linea); text-transform: uppercase; letter-spacing: 0.04em; }
.tabla-pos th:nth-child(2) { text-align: left; }
.tabla-pos td { font-size: 13.5px; text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--linea); }
.tabla-pos tr:last-child td { border-bottom: 0; }
.tabla-pos td.pos { position: relative; font: 700 15px/1 var(--display); width: 34px; }
.tabla-pos td.pos::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.tabla-pos tr.z-sube td.pos::before { background: var(--sube); }
.tabla-pos tr.z-medio td.pos::before { background: var(--medio); }
.tabla-pos tr.z-baja td.pos::before { background: var(--baja); }
.tabla-pos td.eq { text-align: left; }
.tabla-pos td.eq div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tabla-pos td.eq span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.tabla-pos td.eq .escudo, .tabla-pos td.eq .escudo-texto { width: 20px; height: 20px; font-size: 7.5px; }
.tabla-pos td.pts { font: 800 16px/1 var(--display); }
.tabla-pos tr.jugando td { background: color-mix(in srgb, var(--vivo) 9%, transparent); }
.tabla-pos tr.resaltado td { background: color-mix(in srgb, var(--acento) 8%, transparent); }
.tabla-pos .sube { color: var(--acento); font-size: 10px; margin-left: 2px; }
.tabla-pos .baja { color: var(--roja); font-size: 10px; margin-left: 2px; }
.titulo-grupo { font: 700 16px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); margin: 14px 2px 8px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 12px; color: var(--texto-2); margin: -4px 2px 14px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.leyenda .sube { background: var(--sube); } .leyenda .medio { background: var(--medio); } .leyenda .baja { background: var(--baja); }

/* ---------- fases (cuadro de la copa) ---------- */
.rondas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
.rondas::-webkit-scrollbar { display: none; }
.rondas button { flex: 0 0 auto; padding: 8px 13px; border-radius: 12px; border: 1px solid var(--linea-fuerte); background: var(--superficie); cursor: pointer; color: var(--texto-2); font: 700 15px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.rondas button.activa { background: var(--liga); border-color: transparent; color: #071018; }
.llaves { display: grid; gap: 10px; }
@media (min-width: 600px) { .llaves { grid-template-columns: 1fr 1fr; } }
.llave { position: relative; overflow: hidden; padding: 12px 14px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); }
.llave.resaltada { border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.llave::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--liga); }
.ll-eq { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 8px; padding: 4px 0; }
.ll-eq .escudo, .ll-eq .escudo-texto { width: 24px; height: 24px; font-size: 8.5px; }
.ll-eq .nombre { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 600; }
.ll-eq .parciales { display: flex; gap: 6px; font: 600 14px/1 var(--display); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ll-eq .global { font: 800 24px/1 var(--display); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.ll-eq.pierde .nombre, .ll-eq.pierde .global { color: var(--texto-3); }
.ll-eq.gana .nombre::after { content: " ✓"; color: var(--acento); font-size: 13px; }
.ll-pie { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--texto-3); display: flex; justify-content: space-between; gap: 8px; }
.ll-pie .en-curso { color: var(--amarilla); }
.ll-pie .pasa { color: var(--acento); }
.ll-eq .nombre[data-camino] { cursor: pointer; }
.pista { font-size: 12.5px; color: var(--texto-3); margin: -4px 2px 10px; }
.camino { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; }
.camino::-webkit-scrollbar { display: none; }
.camino-cab { display: flex; align-items: center; gap: 8px; margin: 2px 2px 8px; font: 700 16px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.camino-cab .escudo, .camino-cab .escudo-texto { width: 22px; height: 22px; font-size: 8px; }
.camino-cab button { margin-left: auto; border: 0; background: none; color: var(--texto-3); cursor: pointer; font: 13px var(--fuente); text-transform: none; letter-spacing: 0; }
.paso { flex: 0 0 auto; position: relative; display: grid; gap: 3px; min-width: 92px; padding: 9px 12px; margin-right: 18px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--superficie); border: 1px solid var(--linea-fuerte); }
.paso:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 50%; width: 14px; height: 2px; background: var(--linea-fuerte); }
.paso b { font: 700 14px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2); }
.paso span { font: 800 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.paso small { font-size: 11px; color: var(--texto-3); }
.paso.gana { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.paso.gana small { color: var(--acento); }
.paso.pierde { border-color: color-mix(in srgb, var(--baja) 50%, transparent); }
.paso.pierde small { color: var(--baja); }
.paso.curso small { color: var(--amarilla); }
.boton-ancho { display: block; width: 100%; margin-top: 12px; }

/* ---------- ajustes ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 15px 16px; margin-bottom: 12px; }
.tarjeta h2 { margin: 0 0 4px; font: 700 19px/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.fila-agregar { display: flex; gap: 8px; margin: 10px 0; }
.fila-agregar input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linea-fuerte); background: var(--superficie-2); color: var(--texto); font: inherit; }
.opciones { display: grid; gap: 8px; margin: 10px 0; }
.interruptor { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; margin: 6px 0 10px; }
.interruptor input { width: 20px; height: 20px; accent-color: var(--acento); flex: 0 0 auto; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.boton { height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--linea-fuerte); background: var(--superficie-2); cursor: pointer; font-weight: 600; font-size: 14.5px; }
.boton:active { transform: scale(0.97); }
.boton-principal { background: var(--acento); color: #04150e; border-color: transparent; }
.pasos { margin: 8px 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--texto); }
.pasos li { margin-bottom: 4px; }

/* ---------- aviso de gol dentro de la app (sin vibrar ni parpadear) ---------- */
.aviso-gol { position: fixed; left: 12px; right: 12px; top: calc(70px + env(safe-area-inset-top)); z-index: 40; max-width: 520px; margin: 0 auto;
  padding: 12px 14px; border-radius: 16px; background: var(--superficie-3); border: 1px solid color-mix(in srgb, var(--acento) 45%, transparent);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.9); font-size: 14.5px; animation: subir 260ms var(--curva); cursor: pointer; }
.aviso-gol b { color: var(--acento); font: 800 18px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; margin-right: 6px; }

/* ---------- pestañas inferiores ---------- */
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fondo) 86%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border-top: 1px solid var(--linea); }
.pestanas button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0 4px; border: 0; background: none; cursor: pointer; font-size: 11px; color: var(--texto-3); }
.pestanas button.activa { color: var(--texto); }
.pestanas button.activa .ico { background: var(--acento); }
.ico { width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-vivo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m12 7.5 3.8 2.8-1.5 4.4H9.7l-1.5-4.4L12 7.5Z'/%3E%3C/svg%3E"); }
.ico-partidos { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ico-tablas { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 4h8v4H8zM4 12h6v4H4zM14 12h6v4h-6zM12 8v2M7 12v-2h10v2'/%3E%3C/svg%3E"); }
.ico-ajustes { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E"); }
.burbuja { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--vivo); color: #fff; font-size: 10.5px; line-height: 17px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}