/* ─── 🩹 INJURY › 📋 LINEUPS: la pantalla (Carlos, 2026-10-24, MANUAL 46) ───────────────────────────────────────────
   Calcada de la muestra aprobada (herramientas/simulador/muestra-lineups.html). Todas las clases llevan "lu-" para no
   chocar con las de TRACKBET (.tab, .chip, .pil…). Textos en Lexend; solo los NÚMEROS en letra fija (regla de Carlos). */
/* las variables también en el panel de stats y su velo, que van sueltos en el body (fuera de .lu-raiz) */
.lu-raiz, .lu-panel, .lu-velo { --lu-bg2: #131316; --lu-borde: #26262c; --lu-t2: #8a8a93; --lu-verde: #00e676; --lu-verde2: #9be7b4; --lu-rojo: #ff5252;
  --lu-nar: #ffab40; --lu-azul: #40c4ff; --lu-amar: #ffd740; --lu-cian: #4dd0e1;
  --lu-letra: 'Lexend', 'Segoe UI', system-ui, sans-serif; --lu-fija: Consolas, 'JetBrains Mono', monospace; }
.lu-raiz { font-family: var(--lu-letra); color: #e6e6ea; padding: 12px 14px 40px; }
.lu-raiz *, .lu-panel * { box-sizing: border-box; }
.lu-ninguno { font-size: 11px; color: #5a5a62; font-style: italic; padding: 2px 0; }

/* ── Tablero de arriba: título + lector, cifras, ↻ LEER YA y la fila de partidos de hoy ── */
.lu-tablero { position: relative; border: 1px solid var(--lu-borde); border-radius: 12px; overflow: hidden;
  background: linear-gradient(100deg, rgba(77, 208, 225, .10) 0%, transparent 38%, transparent 70%, rgba(179, 136, 255, .07) 100%), #15151a; }
.lu-tb-arriba { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px 10px; }
.lu-lector { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.lu-lector .t1 { font-size: 16px; font-weight: 900; letter-spacing: 1.2px; color: #fff; }
.lu-lector .t1 small { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: var(--lu-cian); margin-left: 6px; }
.lu-lector .t2 { font-size: 10.5px; color: var(--lu-t2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lu-lector .t2 b { color: #ddd; font-family: var(--lu-fija); font-weight: 400; }
.lu-lector .t2 .mal { color: #ff8a80; }
/* (scroll fluido) el latido es un anillo que crece con transform + opacity (lo mueve la tarjeta de video, sin repintar);
   antes animaba box-shadow, que obliga a repintar en cada cuadro */
.lu-vivo { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lu-verde); }
.lu-vivo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--lu-verde); animation: lu-latido 2s infinite; will-change: transform, opacity; }
.lu-vivo.mal { background: var(--lu-rojo); } .lu-vivo.mal::after { display: none; }
@keyframes lu-latido { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }
.lu-cifras { display: flex; align-items: stretch; background: rgba(0, 0, 0, .28); border: 1px solid #2a2a31; border-radius: 9px; }
.lu-cifra { padding: 6px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lu-cifra + .lu-cifra { border-left: 1px solid #2a2a31; }
.lu-cifra .v { font-family: var(--lu-fija); font-size: 19px; font-weight: 700; color: var(--c, #fff); line-height: 1.1; text-shadow: 0 0 14px color-mix(in srgb, var(--c, #fff) 35%, transparent); }
.lu-cifra .k { font-size: 8.5px; font-weight: 800; letter-spacing: 1.1px; color: var(--lu-t2); margin-top: 2px; }
.lu-btn { background: rgba(77, 208, 225, .08); border: 1px solid #2a4a50; color: var(--lu-cian); border-radius: 9px; font-family: var(--lu-letra); font-size: 11px; font-weight: 800; letter-spacing: .6px; padding: 0 14px; cursor: pointer; align-self: stretch; min-height: 34px; }
.lu-btn:hover { background: rgba(77, 208, 225, .16); }
.lu-btn:disabled { opacity: .5; cursor: wait; }
.lu-partidos-hoy { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.lu-ph { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 4px 9px 4px 6px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cv) 22%, transparent), color-mix(in srgb, var(--cl) 22%, transparent)), #1a1a20;
  border: 1px solid #2c2c33; transition: border-color .15s, transform .15s; }
.lu-ph:hover { border-color: #55555f; }
.lu-ph img { width: 20px; height: 20px; object-fit: contain; }
.lu-ph .h { font-family: var(--lu-fija); font-size: 10px; color: #cfcfd6; margin-left: 3px; }

/* ── PARTIDOS / NOMBRES (dentro de LINEUPS) y filtros ── */
.lu-vistas { display: flex; gap: 6px; margin: 14px 0 0; }
.lu-vista { padding: 6px 14px; border-radius: 8px; border: 1px solid #2a2a31; background: #16161a; color: #aaa; font-size: 11px; font-weight: 800; letter-spacing: .8px; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
/* (Carlos, 2026-10-24: "un color para cada uno") cada vista con su color (--vc): apagada, el texto teñido; encendida, llena */
.lu-vista { --vc: var(--lu-cian); color: color-mix(in srgb, var(--vc) 70%, #999); border-color: color-mix(in srgb, var(--vc) 28%, #2a2a31); }
.lu-vista:hover { color: var(--vc); border-color: color-mix(in srgb, var(--vc) 55%, #2a2a31); }
.lu-vista.on { color: #0b0b0d; background: var(--vc); border-color: var(--vc); box-shadow: 0 0 14px color-mix(in srgb, var(--vc) 30%, transparent); }
.lu-vista .alerta { font-size: 9px; font-weight: 900; color: #221c05; background: var(--lu-amar); border-radius: 8px; padding: 0 6px; }
.lu-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 14px; }
.lu-pil { padding: 5px 12px; border-radius: 14px; border: 1px solid #333; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: #aaa; background: #161619; cursor: pointer; user-select: none; transition: all .15s; }
/* (Carlos, 2026-10-24: "un color para cada uno") cada filtro con su color (--pc): TODOS cian, CONFIRMED verde, EXPECTED
   amarillo, CON DUDAS naranja. Apagado, el texto teñido; encendido, lleno de su color */
.lu-pil { --pc: var(--lu-cian); color: color-mix(in srgb, var(--pc) 70%, #999); border-color: color-mix(in srgb, var(--pc) 28%, #333); }
.lu-pil:hover { border-color: color-mix(in srgb, var(--pc) 55%, #333); color: var(--pc); }
.lu-pil .n { margin-left: 5px; color: #777; font-weight: 400; font-family: var(--lu-fija); }
.lu-pil.on { border-color: var(--pc); color: #0b0b0d; background: var(--pc); box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 35%, transparent); }
.lu-pil.on .n { color: rgba(0, 0, 0, .55); }
.lu-busca { margin-left: auto; background: #151518; border: 1px solid #333; border-radius: 8px; color: #ddd; font-family: var(--lu-letra); font-size: 11.5px; padding: 7px 12px; width: 230px; outline: none; }
.lu-busca:focus { border-color: var(--lu-cian); box-shadow: 0 0 0 3px rgba(77, 208, 225, .12); }
/* (Carlos: "las tarjetas del mismo tamaño… completas la tarjeta hacia abajo, no importa que esté vacío") todas las filas
   tan altas como la más alta (grid-auto-rows: 1fr) y cada tarjeta estirada hasta abajo */
.lu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); grid-auto-rows: 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 620px) { .lu-grid { grid-template-columns: 1fr; } .lu-busca { margin-left: 0; width: 100%; } }

/* ── Tarjeta de un partido con los colores de sus dos equipos ── */
/* (scroll fluido) sin levantar la tarjeta ni sombras grandes al pasar el ratón: al hacer scroll el ratón "pasa" por
   todas y cada una obligaba a repintar sombras enormes; ahora solo se aclara el borde. contain: cada tarjeta se pinta
   aparte (un cambio adentro no repinta las demás). */
.lu-pt { --cv: #888; --cl: #888; position: relative; background: var(--lu-bg2); border: 1px solid var(--lu-borde); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; contain: layout paint; transition: border-color .15s; }
.lu-pt:hover { border-color: #4a4a54; }
/* (Carlos: "me gustaría el brillo, pero más sutil") brillo SUAVE por dentro con el color de cada equipo (visita a la
   izquierda, local a la derecha). Barato para el scroll: la capa se dibuja una sola vez y al pasar el ratón solo cambia
   su opacidad (eso lo hace la tarjeta de video, sin redibujar). Va por dentro porque la tarjeta recorta lo de afuera. */
.lu-pt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 14px 0 26px -20px var(--cv), inset -14px 0 26px -20px var(--cl);
  opacity: 0; transition: opacity .25s; will-change: opacity; }
.lu-pt:hover::after { opacity: .85; }
.lu-pt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cv) 0 50%, var(--cl) 50% 100%); }
.lu-pt.salta { animation: lu-salta 1.2s; }
@keyframes lu-salta { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px var(--lu-cian), 0 0 26px rgba(77, 208, 225, .45); } }
.lu-pt-top { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 14px 14px 12px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--cv) 34%, transparent) 0%, transparent 42%, transparent 58%, color-mix(in srgb, var(--cl) 34%, transparent) 100%), #15151a; }
.lu-eqb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lu-eqb.loc { flex-direction: row-reverse; text-align: right; }
.lu-logo { width: 50px; height: 50px; object-fit: contain; flex: 0 0 auto; }   /* (scroll fluido) sin filter: drop-shadow (caro: 24 logos) */
.lu-eqb .ab { font-weight: 900; font-size: 19px; letter-spacing: 1px; color: #fff; line-height: 1; }
.lu-eqb .nk { font-size: 11px; color: #c9c9d0; font-weight: 600; margin-top: 3px; }
.lu-eqb .wl { font-family: var(--lu-fija); font-size: 10.5px; color: #8a8a93; margin-left: 4px; }
.lu-centro { text-align: center; }
.lu-hora { font-family: var(--lu-fija); font-size: 15px; font-weight: 700; color: var(--lu-amar); text-shadow: 0 0 14px rgba(255, 215, 64, .25); }
.lu-arroba { font-size: 10px; color: #777; letter-spacing: 1px; margin: 2px 0 5px; }
.lu-lineas { display: flex; gap: 4px; justify-content: center; }
.lu-ln { font-family: var(--lu-fija); font-size: 10px; color: #cfcfd6; background: rgba(0, 0, 0, .35); border: 1px solid #2c2c33; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.lu-ln b { font-family: var(--lu-letra); font-size: 8.5px; color: #888; letter-spacing: .8px; margin-right: 3px; }
.lu-pt-cols { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }   /* flex: 1 → las dos columnas llegan hasta abajo */
.lu-pt-col { --c: #888; padding: 10px 12px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 90px); min-width: 0; }
.lu-pt-col + .lu-pt-col { border-left: 1px solid #222228; }
/* la cabecera de cada equipo en UNA sola línea (si una baja a dos, los titulares de las dos columnas quedan
   descuadrados): en una columna angosta CONFIRMED / EXPECTED queda solo como el punto de color (el tooltip lo dice) */
.lu-pt-col { container-type: inline-size; }
.lu-col-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: nowrap; white-space: nowrap; }
@container (max-width: 300px) { .lu-estado .txt { display: none; } .lu-estado .d { margin-right: 0; } .lu-estado { padding: 4px; } }
.lu-col-top .mini { width: 18px; height: 18px; object-fit: contain; }
.lu-col-eq { font-weight: 800; font-size: 12px; letter-spacing: 1px; color: #eee; }
.lu-estado { font-size: 8.5px; font-weight: 800; letter-spacing: .9px; padding: 2px 7px; border-radius: 10px; display: inline-flex; align-items: center; }
.lu-estado.confirmed { color: var(--lu-verde); border: 1px solid #1f6b43; background: #0f2a1c; }
.lu-estado.expected { color: var(--lu-amar); border: 1px solid #6b5a1f; background: #2a230f; }
.lu-estado .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; }
.lu-estado.expected .d { animation: lu-parpadeo 1.4s infinite; }
@keyframes lu-parpadeo { 50% { opacity: .25; } }
.lu-salud { margin-left: auto; display: flex; gap: 4px; }
.lu-salud span { font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 8px; }
.lu-salud .s-out { color: #ff8a80; background: rgba(255, 82, 82, .12); border: 1px solid rgba(255, 82, 82, .35); }
.lu-salud .s-q { color: #ffe57f; background: rgba(255, 215, 64, .10); border: 1px solid rgba(255, 215, 64, .35); }
.lu-salud .s-ok { color: #9be7b4; background: rgba(0, 230, 118, .08); border: 1px solid rgba(0, 230, 118, .3); }

/* Fila de un jugador: foto con aro del color del estado, posición, nombre (fino + APELLIDO fuerte), píldora */
.lu-jg { --c: #888; display: flex; align-items: center; gap: 8px; padding: 4px 6px; margin: 0 -6px; border-radius: 7px; min-height: 38px; transition: background .12s; cursor: pointer; }
.lu-jg:hover { background: rgba(255, 255, 255, .05); }
.lu-foto { --c: #888; --r: var(--c); position: relative; display: inline-block; vertical-align: middle; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: #24242a; box-shadow: 0 0 0 2px var(--r); overflow: hidden; }
.lu-foto img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.lu-foto .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--c) 55%, #222); }
.lu-jg.ques .lu-foto { --r: var(--lu-amar); } .lu-jg.doubt .lu-foto { --r: var(--lu-nar); } .lu-jg.prob .lu-foto { --r: var(--lu-verde2); }
.lu-jg.out .lu-foto { --r: #d32f2f; } .lu-jg.ofs .lu-foto { --r: #4a4a4a; }
.lu-jg.out .lu-foto .ini, .lu-jg.ofs .lu-foto .ini, .lu-jg.out .lu-foto img, .lu-jg.ofs .lu-foto img { filter: grayscale(1) brightness(.7); }
.lu-jg.out .lu-foto::after { content: '✕'; position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #d32f2f; color: #fff; font-size: 8px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.lu-jg .pos { flex: 0 0 24px; text-align: center; font-weight: 700; font-size: 9px; color: #9a9aa3; background: #1d1d22; border-radius: 4px; padding: 2px 0; }
.lu-jg .nom { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; letter-spacing: .2px; }
.lu-jg .nom .n1 { font-weight: 300; color: #b9b9c2; margin-right: 4px; }
.lu-jg .nom .n2 { font-weight: 800; color: #fff; }
.lu-jg.out .nom, .lu-jg.ofs .nom { text-decoration: line-through; text-decoration-color: rgba(255, 82, 82, .75); }
.lu-jg.out .nom .n2, .lu-jg.ofs .nom .n2 { color: #9a9aa3; }
.lu-jg.ofs .nom { text-decoration-color: #555; }
.lu-jg .marca { font-size: 11px; }
.lu-mnp { display: flex; align-items: center; gap: 8px; font-size: 8.5px; font-weight: 800; letter-spacing: 1.4px; color: #7a7a84; margin: 9px 0 4px; }
.lu-mnp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #333, transparent); }
.lu-mnp-l .lu-jg { min-height: 30px; }
.lu-mnp-l .lu-foto { width: 24px; height: 24px; }
.lu-mnp-l .lu-jg .nom { font-size: 11.5px; }

/* PÍLDORA de estado (opción 1 de Carlos) */
.lu-p { flex: 0 0 auto; font-size: 9px; font-weight: 900; letter-spacing: .9px; padding: 3px 8px; border-radius: 10px; line-height: 1.15; }
.lu-p.prob  { color: #0b2a17; background: var(--lu-verde2); }
.lu-p.ques  { color: #2a2205; background: var(--lu-amar); box-shadow: 0 0 10px rgba(255, 215, 64, .25); }
.lu-p.doubt { color: #2a1605; background: var(--lu-nar); box-shadow: 0 0 10px rgba(255, 171, 64, .25); }
.lu-p.out   { color: #fff; background: #d32f2f; box-shadow: 0 0 10px rgba(255, 82, 82, .3); }
.lu-p.ofs   { color: #bbb; background: #3a3a3a; }

/* ── NOMBRES: cifras que filtran, pastillas por equipo y una fila por jugador en columnas fijas ── */
.lu-nm-panel { max-width: 1240px; border: 1px solid var(--lu-borde); border-radius: 12px; overflow: hidden; background: linear-gradient(100deg, rgba(77, 208, 225, .08) 0%, transparent 40%), #131317; }
.lu-nm-nota { font-size: 11px; color: var(--lu-t2); line-height: 1.55; padding: 10px 14px 0; max-width: 1040px; }
.lu-nm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-bottom: 1px solid #222228; }
.lu-nm-segs { display: flex; flex-wrap: wrap; background: rgba(0, 0, 0, .28); border: 1px solid #2a2a31; border-radius: 10px; overflow: hidden; }
.lu-nm-seg { --c: #fff; display: flex; align-items: center; gap: 9px; padding: 7px 14px; cursor: pointer; user-select: none; transition: background .15s; }
.lu-nm-seg + .lu-nm-seg { border-left: 1px solid #2a2a31; }
.lu-nm-seg:hover { background: rgba(255, 255, 255, .03); }
.lu-nm-seg.on { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 -2px 0 var(--c); }
.lu-nm-seg .v { font-family: var(--lu-fija); font-size: 19px; font-weight: 700; color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.lu-nm-seg .k { font-size: 9px; font-weight: 800; letter-spacing: 1.1px; color: #9a9aa3; line-height: 1.25; }
.lu-nm-seg .k small { display: block; font-weight: 400; letter-spacing: .2px; color: #6a6a73; font-size: 9.5px; }
.lu-nm-eqs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 14px; border-bottom: 1px solid #222228; }
.lu-nm-eq { --ce: #888; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 5px; border-radius: 14px; cursor: pointer; user-select: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: .7px; color: #aaa; background: #18181d; border: 1px solid #2a2a31; transition: all .15s; }
.lu-nm-eq img { width: 16px; height: 16px; object-fit: contain; }
.lu-nm-eq .n { font-family: var(--lu-fija); font-weight: 400; color: #666; font-size: 9.5px; }
.lu-nm-eq:hover { border-color: #4a4a52; color: #ddd; }
.lu-nm-eq.on { color: #fff; background: color-mix(in srgb, var(--ce) 28%, #18181d); border-color: var(--ce); box-shadow: 0 0 12px color-mix(in srgb, var(--ce) 35%, transparent); }
.lu-nm-eq.on .n { color: #ddd; }
.lu-nm-eq.todos { padding-left: 9px; }
.lu-nm-eq .alerta { width: 6px; height: 6px; border-radius: 50%; background: var(--lu-amar); box-shadow: 0 0 6px var(--lu-amar); }
.lu-nm-eq-sep { width: 8px; }
.lu-nm-lista { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; max-width: 1060px; }
.lu-nm-f { --c: #888; --ce: #888; display: grid; grid-template-columns: 38px 230px 24px minmax(0, 1fr) 128px; align-items: center; gap: 12px;
  padding: 8px 12px 8px 10px; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--ce) 10%, transparent), transparent 40%), #17171c;
  border: 1px solid #24242b; border-left: 3px solid var(--c); }
.lu-nm-f:hover { border-color: #3a3a42; border-left-color: var(--c); }
.lu-nm-f.raro { box-shadow: 0 0 0 1px rgba(255, 215, 64, .35), 0 0 18px rgba(255, 215, 64, .12); }
.lu-nm-f .lu-foto { width: 38px; height: 38px; }
.lu-nm-f .et { font-size: 8px; font-weight: 800; letter-spacing: 1.2px; color: #6e6e78; margin-bottom: 2px; display: flex; align-items: center; gap: 5px; }
.lu-nm-f .orig { font-size: 12.5px; color: #c9c9d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-nm-f .va { font-size: 15px; color: var(--c); text-align: center; text-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.lu-nm-f .ali { font-size: 13px; font-weight: 800; letter-spacing: .3px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-nm-f .eqx { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800; letter-spacing: .8px; color: #bbb; }
.lu-nm-f .eqx img { width: 14px; height: 14px; }
.lu-nm-est { font-size: 9px; font-weight: 900; letter-spacing: .9px; padding: 4px 9px; border-radius: 10px; white-space: nowrap; text-align: center; justify-self: stretch;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
@media (max-width: 760px) { .lu-nm-f { grid-template-columns: 34px minmax(0, 1fr) 18px minmax(0, 1fr); } .lu-nm-f .lu-nm-est { grid-column: 2 / -1; justify-self: start; } }
.lu-nm-elegir { display: flex; align-items: center; gap: 6px; }
.lu-nm-elegir select { background: #1d190c; border: 1px solid #6b5a1f; color: #ffd27a; border-radius: 7px; font-family: var(--lu-letra); font-size: 12px; font-weight: 700; padding: 5px 8px; min-width: 210px; max-width: 100%; outline: none; }
.lu-nm-ok { background: #ffd740; color: #221c05; border: none; border-radius: 7px; font-family: var(--lu-letra); font-size: 10px; font-weight: 900; letter-spacing: .6px; padding: 7px 11px; cursor: pointer; white-space: nowrap; }
.lu-nm-ok:disabled { opacity: .5; cursor: wait; }
.lu-mas { display: block; text-align: center; color: #8ab4f8; cursor: pointer; font-size: 11px; padding: 0 0 12px; }

/* ── PANEL DE STATS: se desliza desde la derecha (opción A de Carlos) ── */
/* (scroll fluido) el velo cerrado no existe para la pantalla (visibility: hidden) y el desenfoque solo cuando está
   abierto: antes, aunque invisible, el blur de pantalla completa se recalculaba en cada cuadro del scroll */
.lu-velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s; z-index: 900; }
.lu-velo.on { opacity: 1; visibility: visible; pointer-events: auto; backdrop-filter: blur(2px); transition: opacity .2s; }
.lu-panel { --c: #4dd0e1; position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 901; display: flex; flex-direction: column;
  background: #111114; border-left: 1px solid #2a2a31; box-shadow: -20px 0 50px rgba(0, 0, 0, .6); font-family: var(--lu-letra); color: #e6e6ea;
  transform: translateX(105%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.lu-panel.on { transform: none; }
.lu-pn-cab { position: relative; padding: 16px 16px 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 42%, transparent), transparent 75%), #17171c; border-bottom: 1px solid #26262c; }
.lu-pn-cab::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.lu-pn-cerrar { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #3a3a42; background: rgba(0, 0, 0, .35); color: #ccc; font-size: 14px; cursor: pointer; }
.lu-pn-cerrar:hover { color: #fff; border-color: #666; }
.lu-pn-quien { display: flex; align-items: center; gap: 14px; }
.lu-pn-quien .lu-foto { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--r), 0 6px 18px rgba(0, 0, 0, .5); }
.lu-pn-quien .lu-foto .ini { font-size: 20px; }
.lu-pn-nom { font-size: 13px; font-weight: 300; color: #ddd; letter-spacing: .4px; line-height: 1.15; }
.lu-pn-nom b { display: block; font-size: 21px; font-weight: 900; color: #fff; letter-spacing: .6px; }
.lu-pn-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; color: #aaa; }
.lu-pn-info img { width: 18px; height: 18px; }
.lu-pn-info .tag { font-weight: 700; background: rgba(0, 0, 0, .35); border: 1px solid #33333b; border-radius: 4px; padding: 1px 6px; color: #ddd; }
.lu-pn-rw { margin-left: auto; color: #8ab4f8; cursor: pointer; font-size: 10.5px; background: none; border: none; font-family: var(--lu-letra); }
.lu-pn-cuerpo { flex: 1; overflow-y: auto; padding: 14px 16px 30px; }
.lu-pn-cargando { display: flex; align-items: center; gap: 10px; color: #888; font-size: 12px; padding: 30px 0; justify-content: center; }
.lu-pn-cargando i { width: 16px; height: 16px; border: 2px solid #333; border-top-color: var(--lu-cian); border-radius: 50%; animation: lu-gira .7s linear infinite; }
@keyframes lu-gira { to { transform: rotate(360deg); } }
.lu-pn-pie { font-size: 9.5px; color: #555; text-align: center; padding: 8px; border-top: 1px solid #1f1f25; }
.lu-sec-t { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; color: var(--lu-cian); margin: 4px 0 8px; }
.lu-sec-t small { color: #777; font-weight: 600; letter-spacing: .3px; }
.lu-sec-t::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #2c2c33, transparent); }
.lu-aviso-poco { font-size: 10.5px; color: #ffd27a; background: #2a230f; border: 1px solid #6b5a1f; border-radius: 6px; padding: 5px 9px; margin: 0 0 8px; }
/* 1 · PROMEDIO de la temporada actual: estilo A (teñido) con el color de cada tipo de CONFIG › TIPOS */
.lu-prom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.lu-pr { --sc: #888; position: relative; overflow: hidden; border-radius: 11px; padding: 9px 11px 12px;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sc) 30%, transparent), transparent 65%), #15151a; border: 1px solid color-mix(in srgb, var(--sc) 38%, #26262c); }
.lu-pr .k { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 900; letter-spacing: 1.4px; color: color-mix(in srgb, var(--sc) 80%, #fff); }
.lu-pr .k i { font-style: normal; font-size: 10px; }
.lu-pr .v { font-family: var(--lu-fija); font-size: 28px; font-weight: 700; line-height: 1.1; margin-top: 3px; color: #fff; text-shadow: 0 0 20px color-mix(in srgb, var(--sc) 55%, transparent); }
.lu-pr .niv { position: absolute; left: 11px; right: 11px; bottom: 7px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.lu-pr .niv b { display: block; height: 100%; width: var(--w, 0%); border-radius: 2px; background: var(--sc); box-shadow: 0 0 8px var(--sc); }
.lu-prom2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 8px 0 2px; }
.lu-prom2 > span { display: flex; flex-direction: column; align-items: center; padding: 5px 0; background: #15151a; border: 1px solid #222228; border-radius: 7px; font-size: 8.5px; font-weight: 800; letter-spacing: 1px; color: #7a7a84; }
.lu-prom2 b { font-family: var(--lu-fija); color: #ddd; font-weight: 700; font-size: 12.5px; letter-spacing: 0; margin-top: 1px; }
/* plegables */
.lu-pleg { margin-top: 16px; border: 1px solid #23232a; border-radius: 10px; background: #141418; overflow: hidden; }
.lu-pleg > .pl-t { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; user-select: none; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: #ddd; }
.lu-pleg > .pl-t:hover { background: #18181d; }
.lu-pleg > .pl-t .fl2 { color: var(--lu-cian); transition: transform .18s; display: inline-block; }
.lu-pleg.cerrado > .pl-t .fl2 { transform: rotate(-90deg); }
.lu-pleg > .pl-t small { margin-left: auto; color: #777; font-weight: 600; letter-spacing: .3px; }
.lu-pleg > .pl-c { padding: 2px 12px 12px; }
.lu-pleg.cerrado > .pl-c { display: none; }
/* gráfica de barras de los últimos 10 (verde = llegó a su promedio, rojo = debajo; la raya punteada = su promedio) */
.lu-chips { display: flex; gap: 4px; margin: 4px 0 8px; flex-wrap: wrap; }
.lu-chip { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; padding: 3px 9px; border-radius: 10px; border: 1px solid #33333b; color: #999; background: #1a1a1f; cursor: pointer; }
.lu-chip.on { color: #071316; }
.lu-barras { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 14px 0 0; border-bottom: 1px solid #2c2c33; }
.lu-barra { flex: 1; position: relative; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--bc), color-mix(in srgb, var(--bc) 35%, transparent)); min-height: 2px; }
.lu-barra span { position: absolute; top: -14px; left: 0; right: 0; text-align: center; font-family: var(--lu-fija); font-size: 9.5px; color: #ddd; }
.lu-barra.corte { margin-left: 9px; }
.lu-barra.corte::before { content: ''; position: absolute; left: -8px; top: -14px; bottom: 0; border-left: 1px dashed #55555f; }
.lu-media { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255, 255, 255, .45); pointer-events: none; }
.lu-media em { position: absolute; right: 0; top: -13px; font-style: normal; font-family: var(--lu-fija); font-size: 9px; color: #bbb; background: #141418; padding: 0 3px; }
.lu-ejes { display: flex; gap: 5px; margin-top: 3px; }
.lu-ejes span { flex: 1; text-align: center; font-size: 8.5px; color: #777; font-weight: 600; overflow: hidden; white-space: nowrap; }
.lu-ejes span.corte { margin-left: 9px; }
.lu-nota { font-size: 10px; color: #777; margin-top: 6px; line-height: 1.45; }
table.lu-ult { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11px; }
.lu-ult th { font-size: 8.5px; letter-spacing: 1px; color: #777; font-weight: 700; padding: 0 3px 5px; text-align: center; }
.lu-ult th:first-child, .lu-ult td:first-child { text-align: left; }
.lu-ult td { padding: 5px 3px; border-top: 1px solid #1f1f25; text-align: center; font-family: var(--lu-fija); color: #ccc; white-space: nowrap; }
.lu-ult td:first-child { font-family: var(--lu-letra); font-size: 10.5px; }
.lu-ult td.riv { font-family: var(--lu-letra); font-size: 10.5px; }
.lu-ult td.riv img { width: 15px; height: 15px; vertical-align: -3px; margin: 0 3px; }
.lu-ult td.g { color: var(--lu-verde); font-family: var(--lu-letra); } .lu-ult td.p { color: #ff8a80; font-family: var(--lu-letra); }
.lu-ult td.alto { color: #fff; background: color-mix(in srgb, var(--sc) 22%, transparent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--sc); }
.lu-ult td.bajo { color: #6a6a73; }
.lu-ult tr.div td { padding: 7px 0 4px; border-top: none; text-align: center; font-family: var(--lu-letra); font-size: 8.5px; font-weight: 800; letter-spacing: 1.3px; color: #8a8a93;
  background: linear-gradient(#3a3a42, #3a3a42) center / 100% 1px no-repeat; }
.lu-ult tr.div td span { background: #141418; padding: 0 8px; position: relative; }
.lu-ult tr.t-pasada td { opacity: .62; }
.lu-ult .po { color: #b388ff; font-size: 9px; }
/* plegable de la TEMPORADA PASADA */
.lu-prom-pas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lu-pp { --sc: #888; background: #16161b; border: 1px solid #26262c; border-left: 3px solid var(--sc); border-radius: 8px; padding: 6px 9px; }
.lu-pp .k { font-size: 8.5px; font-weight: 800; letter-spacing: 1.2px; color: color-mix(in srgb, var(--sc) 75%, #fff); }
.lu-pp .v { font-family: var(--lu-fija); font-size: 17px; color: #e6e6ea; font-weight: 700; }
.lu-fl { font-family: var(--lu-fija); font-size: 10px; margin-left: 4px; font-weight: 700; }
.lu-fl.sube { color: var(--lu-verde); } .lu-fl.baja { color: var(--lu-rojo); } .lu-fl.igual { color: #777; }
table.lu-spl { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 8px; }
.lu-spl th { font-size: 8.5px; letter-spacing: 1px; color: #777; font-weight: 700; padding: 0 4px 4px; text-align: center; }
.lu-spl th:first-child, .lu-spl td:first-child { text-align: left; }
.lu-spl td { padding: 4px; border-top: 1px solid #1f1f25; text-align: center; font-family: var(--lu-fija); color: #ccc; }
.lu-spl td:first-child { font-family: var(--lu-letra); color: #bbb; font-size: 10.5px; }
.lu-spl-t { font-size: 9px; font-weight: 800; letter-spacing: 1.1px; color: #8a8a93; margin: 10px 0 4px; }
.lu-rot { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #1f1f25; font-size: 11px; }
.lu-rot.yo { background: rgba(77, 208, 225, .07); border-radius: 6px; }
.lu-rot .lu-foto { width: 22px; height: 22px; }
.lu-rot .n { flex: 1; color: #ddd; } .lu-rot .m { font-family: var(--lu-fija); color: #aaa; width: 38px; text-align: right; }
.lu-rot .inj { font-size: 8.5px; color: #ff8a80; font-weight: 800; }
.lu-rot-cab { display: flex; gap: 8px; font-size: 8.5px; letter-spacing: 1px; color: #777; font-weight: 700; padding: 0 0 4px; }
.lu-rot-cab span:first-child { flex: 1; } .lu-rot-cab span { width: 38px; text-align: right; }

/* ═══ TELÉFONO: la "B PLEGABLE" que eligió Carlos (2026-10-24, MANUAL 46.7) ═══════════════════════════════════════════
   Solo con pantalla angosta (< 700 px: la web-app en el teléfono). En pantalla grande (TRACKBET, la web-app en la PC)
   todo esto no existe y se ve igual que siempre. Muestra: herramientas/simulador/muestra-lineups-telefono.html */
.lu-tel-fila, .lu-tel-lin, .lu-tel-sw { display: none; }
@media (max-width: 700px) {
  .lu-raiz { padding: 10px 10px 40px; }
  .lu-tb-arriba { padding: 10px 12px 8px; gap: 8px 10px; }
  .lu-cifras { order: 3; width: 100%; }
  .lu-cifras > * { flex: 1; }
  .lu-btn { padding: 6px 10px; font-size: 10px; }
  /* la fila de partidos de arriba se desliza con el dedo en vez de quedar cortada */
  .lu-partidos-hoy { flex-wrap: nowrap; overflow-x: auto; padding: 0 12px 10px; scrollbar-width: none; }
  .lu-partidos-hoy::-webkit-scrollbar { display: none; }
  .lu-partidos-hoy > * { flex: 0 0 auto; }
  /* filtros más chicos y el buscador a todo lo ancho, debajo */
  .lu-filtros { gap: 5px; margin: 10px 0 12px; }
  .lu-pil { font-size: 9.5px; padding: 5px 8px; }
  .lu-busca { order: 9; width: 100%; margin-left: 0; font-size: 12px; padding: 9px 12px; }
  .lu-vistas { margin-top: 10px; }
  /* una línea por partido, cada una de su alto */
  .lu-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; }
  .lu-pt:hover::after { opacity: 0; }            /* sin ratón: sin brillo */
  .lu-pt-top { display: none; }                  /* el encabezado grande lo reemplaza la línea corta */
  .lu-tel-fila { display: grid; grid-template-columns: 1fr auto 1fr 16px; align-items: center; gap: 6px; padding: 10px; cursor: pointer; position: relative; z-index: 1; }
  .lu-tel-eq { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .lu-tel-eq.l { flex-direction: row-reverse; }
  .lu-tel-eq img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
  .lu-tel-eq .ab { font-weight: 900; font-size: 14px; letter-spacing: .8px; color: #fff; }
  .lu-tel-eq .bj { display: flex; gap: 3px; }
  .lu-tel-eq.l .bj { flex-direction: row-reverse; }
  .lu-tb { font: 700 9px var(--lu-fija); border-radius: 4px; padding: 1px 4px; }
  .lu-tb.out { color: #ff8a80; background: rgba(255, 82, 82, .15); }
  .lu-tb.q { color: #ffd740; background: rgba(255, 215, 64, .13); }
  .lu-tb.ok { color: #00e676; background: rgba(0, 230, 118, .1); }
  .lu-tel-c { text-align: center; }
  .lu-tel-c .h { font: 700 12px var(--lu-fija); color: #ffd740; }
  .lu-tel-c .e { display: flex; justify-content: center; gap: 4px; margin-top: 3px; }
  .lu-tel-c .e i { width: 7px; height: 7px; border-radius: 50%; background: #ffd740; }
  .lu-tel-c .e i.c { background: #00e676; }
  .lu-tel-flecha { color: #6a6a73; font-size: 11px; transition: transform .2s; text-align: right; }
  /* abierta: líneas + VIS | LOC + un equipo a la vez */
  .lu-pt:not(.abierta) .lu-pt-cols { display: none; }
  .lu-pt.abierta .lu-tel-flecha { transform: rotate(180deg); }
  .lu-pt.abierta .lu-tel-lin { display: flex; justify-content: center; gap: 6px; padding: 0 10px 8px; position: relative; z-index: 1; }
  .lu-pt.abierta .lu-tel-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 8px; position: relative; z-index: 1; }
  .lu-tel-sw button { --c: #888; display: flex; align-items: center; justify-content: center; gap: 6px; font: 800 12px var(--lu-letra); letter-spacing: .8px;
    color: #9a9aa3; background: #141417; border: 1px solid #2a2a31; border-radius: 9px; padding: 8px 6px; cursor: pointer; }
  .lu-tel-sw button img { width: 20px; height: 20px; object-fit: contain; opacity: .55; }
  .lu-tel-sw button.on { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, #141417); }
  .lu-tel-sw button.on img { opacity: 1; }
  .lu-tel-sw .o { font: 700 9.5px var(--lu-fija); color: #ff8a80; background: rgba(255, 82, 82, .14); border-radius: 5px; padding: 1px 5px; }
  .lu-pt.abierta .lu-pt-cols { grid-template-columns: 1fr; border-top: 1px solid #222228; }
  .lu-pt-col + .lu-pt-col { border-left: 0; }
  .lu-pt[data-lado="v"] .lu-pt-col:nth-child(2), .lu-pt[data-lado="l"] .lu-pt-col:nth-child(1) { display: none; }
  .lu-jg { padding-top: 5px; padding-bottom: 5px; }   /* dedo: filas un poco más altas */
}