:root {
  --fondo: #0b0d17; --panel: rgba(255,255,255,.04); --borde: rgba(255,255,255,.09);
  --texto: #e8e9f3; --tenue: #9a9db5; --morado: #7c5cff; --rosa: #ff5ca8;
  --verde: #22c55e; --rojo: #ef4444; --oro: #f5b301; --vivo: #f97316;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(1200px 600px at 70% -10%, #1d1640 0%, var(--fondo) 60%);
  background-color: var(--fondo); color: var(--texto); font-family: Inter, system-ui, sans-serif; min-height: 100vh; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px;
  border-bottom: 1px solid var(--borde); position: sticky; top: 0; backdrop-filter: blur(12px);
  background: rgba(11,13,23,.7); z-index: 5; }
.marca { display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 18px; }
.logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--morado), var(--rosa)); }
.reloj { color: var(--tenue); font-size: 14px; }
main { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; }
.hero { padding: 28px 0 8px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 38px); }
.hero p { margin: 0; color: var(--tenue); max-width: 720px; }
.grad { background: linear-gradient(90deg, var(--morado), var(--rosa)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marcadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; }
.caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px; }
.caja .tit { color: var(--tenue); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.caja .num { font-size: 24px; font-weight: 800; margin-top: 4px; }
.caja .sub { color: var(--tenue); font-size: 14px; margin-top: 2px; }
.barra { height: 6px; border-radius: 4px; background: rgba(239,68,68,.35); margin-top: 8px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--verde); }
.pestanas { display: flex; gap: 6px; margin: 8px 0 12px; overflow-x: auto; }
.pestanas button, .chip { background: var(--panel); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.pestanas button.activa, .chip.activa { background: var(--morado); border-color: var(--morado); }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 12px; font-size: 14px; }
.interruptor { color: var(--tenue); font-size: 14px; display: flex; gap: 6px; align-items: center; cursor: pointer; }
select { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 14px; }
select option { background: #151827; }
.aviso { color: var(--tenue); font-size: 14px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; transition: transform .15s, border-color .15s; }
.tarjeta:hover { transform: translateY(-2px); border-color: rgba(124,92,255,.5); }
.tarjeta.elige { border-color: rgba(245,179,1,.45); box-shadow: 0 0 0 1px rgba(245,179,1,.15), 0 8px 30px rgba(245,179,1,.06); }
.tarjeta.verde { border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.06); }
.tarjeta.roja { border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.06); }
.fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.et { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--tenue); }
.et.oro { background: rgba(245,179,1,.15); color: var(--oro); }
.et.verde { background: rgba(34,197,94,.15); color: var(--verde); }
.et.roja { background: rgba(239,68,68,.15); color: var(--rojo); }
.et.vivo { background: rgba(249,115,22,.15); color: var(--vivo); }
.partido { font-weight: 700; font-size: 18px; line-height: 1.3; }
.liga { color: var(--tenue); font-size: 14px; }
.apuesta { background: rgba(124,92,255,.12); border: 1px solid rgba(124,92,255,.3); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dato { background: rgba(255,255,255,.03); border: 1px solid var(--borde); border-radius: 10px; padding: 8px; text-align: center; }
.dato small { display: block; color: var(--tenue); font-size: 12px; }
.dato b { font-size: 18px; }
.marcador { font-size: 18px; font-weight: 800; }
.porque { color: var(--tenue); font-size: 12px; }
footer { border-top: 1px solid var(--borde); padding: 18px 16px; text-align: center; color: var(--tenue); font-size: 14px; }
.tenue { opacity: .7; }
@media (max-width: 480px) { .tarjetas { grid-template-columns: 1fr; } .top { padding: 12px 16px; } }
/* v378 — en vivo, niveles, ficha del partido, simulador */
:root { --diamante: #67e8f9; --platino: #a78bfa; --plata: #cbd5e1; }
.pct { font-size: 14px; color: var(--tenue); }
.txt-verde { color: var(--verde); } .txt-rojo { color: var(--rojo); }
.tarjeta.diamante { border-color: rgba(103,232,249,.45); box-shadow: 0 0 0 1px rgba(103,232,249,.12), 0 8px 30px rgba(103,232,249,.07); }
.et.nivel.diamante { background: rgba(103,232,249,.14); color: var(--diamante); }
.et.nivel.platino { background: rgba(167,139,250,.16); color: var(--platino); }
.et.nivel.oro { background: rgba(245,179,1,.15); color: var(--oro); }
.et.nivel.plata { background: rgba(203,213,225,.12); color: var(--plata); }
.punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); margin-right: 6px; animation: late 1.2s infinite; }
@keyframes late { 50% { opacity: .25; } }
.equipos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.eq { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-weight: 700; font-size: 14px; line-height: 1.2; min-width: 0; }
.eq span { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.eq.der { flex-direction: column-reverse; }
.escudo { width: 30px; height: 30px; object-fit: contain; flex: none; }
.escudo.letra, .escudo.silueta { display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 13px; }
.escudo.silueta .ic { width: 58%; height: 58%; color: rgba(255,255,255,.45); }
/* v481 — el tenista sin foto lleva la bandera de su país: redonda y recortada, no estirada */
.escudo[src*="flagcdn.com"] { object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.marc { font-size: 24px; font-weight: 800; text-align: center; white-space: nowrap; }
.marc small { display: block; font-size: 12px; color: var(--tenue); font-weight: 600; }
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 12px; text-align: center; }
.mini small { display: block; color: var(--tenue); font-size: 10px; }
.progreso { font-size: 14px; font-weight: 600; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.progreso.verde { background: rgba(34,197,94,.14); color: var(--verde); }
.progreso.roja { background: rgba(239,68,68,.14); color: var(--rojo); }
.progreso.va { background: rgba(249,115,22,.12); color: var(--vivo); }
.ver { background: none; border: 1px solid rgba(124,92,255,.45); color: var(--texto); border-radius: 10px; padding: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.ver:hover { background: rgba(124,92,255,.15); }
.ficha { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 20; display: flex; justify-content: center; align-items: flex-start; padding: 24px 12px; overflow-y: auto; }
.ficha[hidden] { display: none; }
.ficha-caja { position: relative; width: 100%; max-width: 560px; background: #12142a; border: 1px solid var(--borde); border-radius: 20px; padding: 20px 18px; }
.ficha-caja h3 { font-size: 14px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; }
.equipos.grande .escudo { width: 44px; height: 44px; }
.equipos.grande .marc { font-size: 30px; }
.cerrar { position: absolute; right: 12px; top: 10px; background: none; border: 0; color: var(--tenue); font-size: 20px; cursor: pointer; }
.linea-ap { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 14px; flex-wrap: wrap; }
.stat { margin: 8px 0; font-size: 14px; }
.stat span { color: var(--tenue); }
.dosbarras { display: flex; gap: 4px; height: 6px; margin-top: 4px; }
.dosbarras i { display: block; height: 100%; border-radius: 3px; }
.dosbarras i:first-child { background: var(--morado); }
.dosbarras i:last-child { background: var(--rosa); }
.evento { font-size: 14px; padding: 5px 0; border-bottom: 1px dashed var(--borde); }
.evento.der { text-align: right; }
.simulador, .niveles-ayuda { margin-top: 22px; }
.niveles-ayuda p { color: var(--tenue); font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
.sim-campos { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; font-size: 14px; color: var(--tenue); }
.sim-campos input { width: 90px; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; padding: 6px 8px; font: inherit; margin-left: 6px; }
.sim-campos select { margin-left: 6px; }
.curva { width: 100%; max-width: 520px; height: 80px; color: var(--morado); margin-top: 8px; }
/* v378 — estadísticas como SofaScore: pastillas y barras desde el centro */
:root { --c-l: #7c5cff; --c-r: #ff5ca8; --gris-barra: rgba(255,255,255,.12); }
.mini { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--borde); border-radius: 12px; padding: 10px; }
.st { margin: 10px 0; }
.st.chica { margin: 2px 0; }
.st-nums { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.st-etq { color: var(--texto); font-size: 14px; font-weight: 600; text-align: center; }
.st.chica .st-etq { font-size: 12px; color: var(--tenue); }
.pill { min-width: 34px; text-align: center; font-weight: 800; font-size: 14px; padding: 2px 8px; border-radius: 8px; }
.st.chica .pill { min-width: 26px; font-size: 12px; padding: 1px 6px; }
.pill.l.gana { background: var(--c-l); color: var(--t-l, #fff); }
.pill.r.gana { background: var(--c-r); color: var(--t-r, #fff); }
.st-barras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
.st.chica .st-barras { margin-top: 3px; }
.mitad { height: 7px; background: var(--gris-barra); border-radius: 4px; overflow: hidden; display: flex; }
.st.chica .mitad { height: 5px; }
.mitad.izq { justify-content: flex-end; }
.mitad i { display: block; height: 100%; border-radius: 4px; background: rgba(255,255,255,.35); transition: width .6s; }
.mitad.izq i.gana { background: var(--c-l); }
.mitad.der i.gana { background: var(--c-r); }
.posesion { margin: 4px 0 8px; }
.pos-etq { text-align: center; font-size: 12px; color: var(--tenue); margin-bottom: 4px; font-weight: 600; }
.pos-barra { display: flex; height: 26px; border-radius: 13px; overflow: hidden; gap: 2px; }
.mini .pos-barra { height: 20px; }
.pos-barra i { display: flex; align-items: center; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; padding: 0 10px; min-width: 42px; transition: width .6s; }
.pos-barra i.l { background: var(--c-l); color: var(--t-l, #fff); }
.pos-barra i.r { background: var(--c-r); color: var(--t-r, #fff); justify-content: flex-end; }
.seccion { background: rgba(255,255,255,.03); border: 1px solid var(--borde); border-radius: 14px; padding: 8px 12px; margin: 10px 0; }
.sec-tit { font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin: 4px 0; }
.leyenda { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.leyenda .l { color: var(--c-l); } .leyenda .r { color: var(--c-r); }
.leyenda span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 5px; }

/* v379 — cuenta, seguir, desbloquear, planes, historial */
.derecha { display: flex; align-items: center; gap: 10px; }
.cuenta { display: flex; align-items: center; gap: 8px; }
.entrar { background: linear-gradient(135deg, var(--morado), var(--rosa)); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.saldo { font-weight: 800; font-size: 14px; white-space: nowrap; }
.acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seguir { background: none; border: 1px solid var(--borde); color: var(--texto); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.seguir.si { border-color: var(--oro); color: var(--oro); }
.siguen { color: var(--tenue); font-size: 12px; }
.desbloquear { background: linear-gradient(135deg, var(--morado), var(--rosa)); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.nwnp { color: var(--verde); font-size: 12px; font-weight: 600; }
.bloqueado { color: var(--tenue); letter-spacing: .02em; }
.planes h2 { margin: 28px 0 12px; }
.planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan .precio { font-size: 24px; font-weight: 800; margin: 6px 0; }
.plan ul { margin: 8px 0 0; padding-left: 18px; color: var(--tenue); font-size: 14px; line-height: 1.7; }
.plan.destacado { border-color: rgba(124,92,255,.6); box-shadow: 0 0 0 1px rgba(124,92,255,.25), 0 10px 40px rgba(124,92,255,.12); }
.tg-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.tg { display: inline-block; padding: 10px 16px; border-radius: 12px; background: #229ED9; color: #fff; text-decoration: none; font-weight: 700; }
.tg.vip { background: linear-gradient(135deg, #67e8f9, var(--morado)); }
.bloque-hist { margin-top: 22px; }
.tabla { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.tabla th, .tabla td { padding: 6px 4px; border-bottom: 1px solid var(--borde); text-align: center; }
.tabla th { color: var(--tenue); font-weight: 600; }
.acceso form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.acceso input { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 10px; padding: 11px 12px; font: inherit; }
.chico { font-size: 12px; }
footer a, .chico a { color: var(--texto); }
.legal { margin-top: 8px; }
@media (max-width: 480px) { .reloj { display: none; } }

/* v379 — páginas legales */
.legal-texto { max-width: 760px; line-height: 1.7; padding-top: 10px; }
.legal-texto h2 { font-size: 18px; margin: 22px 0 6px; }
.legal-texto li, .legal-texto p { color: #c9cbe0; }
.legal-texto a { color: var(--texto); }

/* v379 — una tarjeta por partido, con sus apuestas dentro */
.pick-fila { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.pick-fila:first-of-type { border-top: 0; padding-top: 0; }
.pick-fila.verde .apuesta { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.1); }
.pick-fila.roja .apuesta { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.1); }

/* v380 — la página como app: barra de abajo, destacados, lista compacta por liga */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }
.vista-tit { margin: 18px 0 8px; font-size: 24px; }
.nav-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(6, 1fr);
  background: rgba(13,15,28,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--borde); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.nav-abajo button { position: relative; background: none; border: 0; color: var(--tenue); font: inherit; font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; cursor: pointer; }
.nav-abajo button span { font-size: 20px; line-height: 1; filter: grayscale(.6); }
.nav-abajo button.activa { color: var(--texto); }
.nav-abajo button.activa span { filter: none; }
.nav-abajo i { position: absolute; top: 0; right: 22%; background: var(--rojo); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 5px; }
@media (min-width: 900px) { .nav-abajo { left: 50%; right: auto; transform: translateX(-50%); width: 640px; bottom: 14px; border-radius: 18px; border: 1px solid var(--borde); } }
.tira { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin: 14px 0 6px; padding: 10px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.tira span { margin-left: auto; color: var(--tenue); font-size: 12px; }
.destacados h2 { font-size: 18px; margin: 14px 0 8px; }
.carrusel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.dest { flex: 0 0 210px; scroll-snap-align: start; text-align: left; background: linear-gradient(160deg, rgba(103,232,249,.12), rgba(124,92,255,.10)); border: 1px solid rgba(103,232,249,.35);
  border-radius: 16px; padding: 12px; color: var(--texto); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.dest-eqs { display: flex; justify-content: center; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; }
.dest-nom { font-size: 12px; color: var(--tenue); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-ap { font-weight: 700; font-size: 14px; line-height: 1.3; }
.dest-pie { display: flex; justify-content: space-between; align-items: baseline; }
.dest-pie b { font-size: 18px; } .dest-pie span { color: var(--tenue); font-size: 12px; }
.buscador input { width: 100%; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; margin: 4px 0 8px; }
.chips.desliza { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px; }
.chips.desliza::-webkit-scrollbar { display: none; }
.chips.desliza .chip { flex: none; }
.segmentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 4px; margin: 4px 0 12px; }
.seg { background: none; border: 0; color: var(--tenue); font: inherit; font-size: 12px; font-weight: 600; border-radius: 9px; padding: 7px 2px; cursor: pointer; }
.seg small { opacity: .7; }
.seg.activa { background: var(--morado); color: #fff; }
#tarjetas { display: flex; flex-direction: column; gap: 12px; }
.liga-bloque { background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.liga-cab { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(255,255,255,.03); border: 0; color: var(--texto); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 14px; cursor: pointer; text-align: left; }
.liga-cab small { color: var(--tenue); font-weight: 600; white-space: nowrap; }
.partido-fila { border-top: 1px solid var(--borde); }
.partido-fila.diamante { box-shadow: inset 3px 0 0 var(--diamante); }
.partido-fila.platino { box-shadow: inset 3px 0 0 var(--platino); }
.pf { width: 100%; display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "rl eqs" "rl pick"; gap: 4px 10px; align-items: center; background: none; border: 0; color: var(--texto); font: inherit; padding: 10px 14px; cursor: pointer; text-align: left; }
.pf:hover { background: rgba(255,255,255,.03); }
.rl { grid-area: rl; font-size: 12px; color: var(--tenue); font-weight: 700; text-align: center; }
.rl.vivo { color: var(--rojo); }
.pf-eqs { grid-area: eqs; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-eq { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.pf-eq .escudo { width: 18px; height: 18px; font-size: 10px; }
.pf-eq b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pf-eq em { font-style: normal; font-weight: 800; min-width: 18px; text-align: right; }
.pf-pick { grid-area: pick; display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; color: var(--tenue); }
.pf-ap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9cbe0; flex: 1; min-width: 0; }
.pf-cu { font-weight: 800; color: var(--texto); background: rgba(124,92,255,.18); border-radius: 6px; padding: 1px 6px; }
.pf-mas { font-weight: 700; color: var(--tenue); }
.pf-pick .ok, .pf-pick .ko { font-weight: 800; }
.pf-detalle { padding: 0 10px 12px; }
.pf-detalle .tarjeta { border-radius: 14px; }
.partido-fila.abierto .pf { background: rgba(124,92,255,.08); }
.pestanas { scrollbar-width: none; } .pestanas::-webkit-scrollbar { display: none; }
.fin-cab { width: 100%; text-align: left; background: var(--panel); border: 1px dashed var(--borde); color: var(--tenue); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.fin-cab b { color: var(--texto); }
.fin-lista { display: flex; flex-direction: column; gap: 12px; }
.buscador { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin: 4px 0 8px; }
.buscador input, .buscador select { margin: 0; width: 100%; min-width: 0; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; }
.segmentos.dos { grid-template-columns: 1fr 1fr; }
.tg-items { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tg-item { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.tg-item.verde { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.06); }
.tg-item.roja { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.06); }
.tg-pata { line-height: 1.4; }
.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 12px 0 4px; background: #fff; color: #1f1f1f; border: 0; border-radius: 10px; padding: 11px; font: inherit; font-weight: 700; cursor: pointer; }

/* v383 — acceso con usuario, Mi cuenta, VIP */
.acceso form { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.liga-btn { background: none; border: 0; color: var(--tenue); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
.cuenta-cab { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; }
.cuenta-plan { display: flex; justify-content: space-between; align-items: center; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.aviso-ok { background: rgba(124,92,255,.14); border: 1px solid rgba(124,92,255,.35); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.vip-caja { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.vip-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; background: linear-gradient(135deg, var(--morado), var(--rosa)); color: #fff; border: 0; border-radius: 12px; padding: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.vip-btn small { font-weight: 600; opacity: .85; font-size: 12px; }
.vip-btn.sec { background: var(--panel); border: 1px solid rgba(124,92,255,.5); }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tenue); }
.campo input, .fila-form input { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; font: inherit; }
.fila-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
#micuenta .caja { margin-top: 10px; }
.tg.bloque { display: block; text-align: center; margin: 8px 0; }
.salir { width: 100%; margin-top: 12px; background: none; border: 1px solid var(--borde); color: var(--tenue); border-radius: 10px; padding: 10px; font: inherit; cursor: pointer; }
.plan .precio small { font-size: 14px; color: var(--tenue); font-weight: 600; }
.plan .vip-btn { margin-top: 10px; }
button.tg { border: 0; font: inherit; cursor: pointer; }

/* v384 — Cuota alta, contexto del partido, ayuda, sin pick */
:root { --error: #fbbf24; }
.et.nivel.error { background: rgba(251,191,36,.15); color: var(--error); }
.partido-fila.error { box-shadow: inset 3px 0 0 var(--error); }
.tarjeta.error { border-color: rgba(251,191,36,.4); }
.ctx { background: rgba(255,255,255,.03); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.ctx summary { cursor: pointer; font-weight: 700; }
.ctx-tit { color: var(--tenue); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 4px; }
.ctx-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 3px 0; }
.ctx-f span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-style: normal; font-weight: 800; font-size: 12px; margin-left: 3px; background: rgba(255,255,255,.12); }
.fr.g { background: var(--verde); color: #04210f; } .fr.p { background: var(--rojo); color: #fff; } .fr.e { background: #94a3b8; color: #111; }
.ctx-h { display: grid; grid-template-columns: 58px 1fr auto 1fr; gap: 6px; align-items: center; margin: 3px 0; }
.ctx-h span:last-child { text-align: right; }
.ctx-h b { background: rgba(255,255,255,.08); border-radius: 6px; padding: 1px 6px; }
.ctx-b { margin: 3px 0; color: #c9cbe0; }
.ayuda-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borde); background: var(--panel); color: var(--texto); font: inherit; font-weight: 800; cursor: pointer; }
.ayuda h4 { margin: 16px 0 6px; font-size: 14px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.ayuda ul { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 14px; color: #d6d8ea; }
.ayuda p { font-size: 14px; line-height: 1.6; }
.ay-niveles { list-style: none; padding-left: 0 !important; }
.ay-niveles li { margin: 6px 0; }
.boton-ayuda { width: 100%; text-align: left; color: var(--texto); font: inherit; font-weight: 700; cursor: pointer; margin-top: 18px; }
.sin-pick { background: var(--panel); border: 1px dashed var(--borde); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: #c9cbe0; }

/* v387 — la IA */
.ctx.ia { border-color: rgba(124,92,255,.35); background: rgba(124,92,255,.06); }
.ia-txt { font-size: 14px; line-height: 1.55; margin: 8px 0; }
.ia-pred { font-size: 14px; margin: 4px 0; color: #d6d8ea; }

/* v386 — la cabecera cabe en el celular con la sesión abierta */
.top { gap: 8px; }
.marca { min-width: 0; flex-shrink: 1; }
.derecha { flex-shrink: 0; }
@media (max-width: 430px) {
  .cuenta .et { display: none; }
  .entrar { max-width: 118px; padding: 7px 11px; }
  .marca #nombre { font-size: 18px; }
}

/* ====================================================================== */
/* v388 — LIQUID GLASS. El usuario: «me gusta el diseño, pero más moderno,
   tipo Liquid Glass». Sólo estilo: vidrio translúcido con desenfoque y
   brillo de borde, fondo de luces que se mueve lento, barra flotante. Si el
   navegador no tiene desenfoque, queda como antes; con «reducir
   movimiento», el fondo no se mueve. */
:root {
  --vidrio: rgba(255,255,255,.055);
  --vidrio-fuerte: rgba(255,255,255,.09);
  --borde-vidrio: rgba(255,255,255,.14);
  --brillo: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04);
  --sombra-vidrio: 0 10px 40px rgba(0,0,0,.38);
}
body { background: #07081a; isolation: isolate; }
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: .55;
}
body::before { width: 70vmax; height: 70vmax; left: -20vmax; top: -25vmax;
  background: radial-gradient(circle at 30% 30%, #7c5cff 0%, rgba(124,92,255,0) 60%); animation: aurora1 26s ease-in-out infinite alternate; }
body::after { width: 60vmax; height: 60vmax; right: -22vmax; bottom: -20vmax;
  background: radial-gradient(circle at 60% 60%, #ff5ca8 0%, rgba(255,92,168,0) 60%); animation: aurora2 32s ease-in-out infinite alternate; }
@keyframes aurora1 { to { transform: translate(18vmax, 22vmax) scale(1.15); } }
@keyframes aurora2 { to { transform: translate(-16vmax, -18vmax) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .caja, .tarjeta, .liga-bloque, .dest, .ficha-caja, .tira, .segmentos, .sin-pick, .ctx, .mini, .seccion,
  .buscador input, .buscador select, .chip, .pestanas button, .fin-cab {
    background: var(--vidrio);
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid var(--borde-vidrio);
    box-shadow: var(--brillo), var(--sombra-vidrio);
  }
  .chip, .pestanas button, .buscador input, .buscador select { box-shadow: var(--brillo); }
  .top { background: rgba(10,11,28,.45); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,.08); }
  .ficha { background: rgba(4,5,15,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .ficha-caja { background: rgba(20,22,48,.62); }
  .nav-abajo {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 26px; padding: 6px;
    background: rgba(18,20,44,.55); -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
    border: 1px solid rgba(255,255,255,.16); box-shadow: var(--brillo), 0 14px 44px rgba(0,0,0,.5);
  }
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
/* el brillo del borde superior (la «luz» del vidrio) */
.tarjeta, .liga-bloque, .dest, .caja, .ficha-caja { position: relative; overflow: hidden; }
.tarjeta::after, .liga-bloque::after, .dest::after, .caja::after, .ficha-caja::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.04) 100%);
}
.ficha-caja { overflow-y: auto; }
/* barra de abajo: la pantalla activa con su píldora de luz */
.nav-abajo button { border-radius: 20px; transition: background .25s, color .25s, transform .2s; }
.nav-abajo button.activa { background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(255,92,168,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.nav-abajo button:active { transform: scale(.94); }
/* botones con reflejo */
.entrar, .desbloquear, .vip-btn, .pestanas button.activa, .chip.activa, .seg.activa {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(255,92,168,.85));
  border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 20px rgba(124,92,255,.35);
}
.entrar::before, .desbloquear::before, .vip-btn::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: skewX(-20deg); transition: left .6s;
}
.entrar:hover::before, .desbloquear:hover::before, .vip-btn:hover::before { left: 130%; }
.vip-btn.sec { background: var(--vidrio-fuerte); box-shadow: var(--brillo); }
.ver, .seguir, .ayuda-btn { background: var(--vidrio); border: 1px solid var(--borde-vidrio); box-shadow: var(--brillo); }
/* los 💎 con un borde de luz */
.dest, .partido-fila.diamante .pf, .tarjeta.diamante {
  background-image: linear-gradient(160deg, rgba(103,232,249,.10), rgba(124,92,255,.06));
}
.dest { border-color: rgba(103,232,249,.38); box-shadow: var(--brillo), 0 10px 34px rgba(103,232,249,.10); }
.tarjeta.diamante { border-color: rgba(103,232,249,.4); }
/* tacto */
.tarjeta, .dest, .pf, .chip, .seg, .ver, .seguir { transition: transform .18s, border-color .2s, background .2s; }
.dest:active, .pf:active { transform: scale(.985); }
.liga-cab { background: rgba(255,255,255,.035); }
.partido-fila { border-top-color: rgba(255,255,255,.07); }
.logo { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(124,92,255,.45); }
.marcadores .caja .num, .vista-tit { text-shadow: 0 2px 18px rgba(124,92,255,.35); }

/* v389 — paquetes de monedas */
.paquetes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.paquete { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; cursor: pointer;
  background: var(--vidrio, rgba(255,255,255,.05)); border: 1px solid var(--borde-vidrio, rgba(255,255,255,.12)); color: var(--texto); font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.paquete b { font-size: 18px; } .paquete span { font-weight: 800; color: var(--verde); } .paquete small { color: var(--tenue); font-size: 12px; }
.paquete.top { border-color: rgba(245,179,1,.6); background: linear-gradient(160deg, rgba(245,179,1,.16), rgba(124,92,255,.08)); }
.tabla.precios { margin-top: 8px; } .tabla.precios td, .tabla.precios th { text-align: left; }

/* ====================================================================== */
/* v390 — LA IDENTIDAD DE SHARPICKS. El usuario mandó el logo: emblema «SP»
   plateado y verde esmeralda sobre azul marino. Los colores del Liquid Glass
   pasan del morado/rosa a los de la marca. (Los colores de cada EQUIPO en las
   estadísticas no se tocan: son de los equipos.) */
:root {
  --marca: #3ddc84; --marca-2: #16a864; --marca-luz: #8ff0bd; --plata: #dfe6ef; --plata-2: #9aa7b8;
  --fondo: #0a1222; --morado: #2fd27f; --rosa: #7ee8c0;
  --borde-vidrio: rgba(205,235,220,.14);
}
body { background: #070d19; }
body::before { background: radial-gradient(circle at 30% 30%, #18a35e 0%, rgba(24,163,94,0) 62%); opacity: .42; }
body::after { background: radial-gradient(circle at 60% 60%, #1d4ed8 0%, rgba(29,78,216,0) 62%); opacity: .38; }
/* el emblema */
.marca { gap: 10px; }
.marca-img { display: grid; place-items: center; width: 40px; height: 40px; }
.marca-img img { width: 38px; height: 38px; filter: drop-shadow(0 0 8px rgba(61,220,132,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
#nombre { font-weight: 800; font-size: 18px; letter-spacing: .2px; }
#nombre .m1 { color: var(--plata); background: linear-gradient(180deg, #ffffff, #b9c3cf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#nombre .m2 { background: linear-gradient(180deg, var(--marca-luz), var(--marca)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(61,220,132,.35)); }
.grad { background: linear-gradient(90deg, #eef2f6, var(--marca)); -webkit-background-clip: text; background-clip: text; }
/* botones y estados activos en verde de la marca (texto oscuro para que se lea) */
.entrar, .desbloquear, .vip-btn, .pestanas button.activa, .chip.activa, .seg.activa {
  background: linear-gradient(135deg, #43e08c, #14a35f); color: #03150b; border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 22px rgba(43,212,125,.32);
}
.vip-btn small, .seg.activa small { color: #063a1f; opacity: .85; }
.vip-btn.sec { color: var(--texto); background: var(--vidrio-fuerte); border-color: rgba(61,220,132,.45); }
.nav-abajo button.activa { background: linear-gradient(135deg, rgba(61,220,132,.30), rgba(154,167,184,.12)); color: #ffffff; }
.nav-abajo i { background: var(--marca); color: #03150b; }
.apuesta { background: rgba(61,220,132,.09); border-color: rgba(61,220,132,.30); }
.pf-cu { background: rgba(61,220,132,.18); color: #eafff3; }
.tarjeta:hover { border-color: rgba(61,220,132,.5); }
.ver { border-color: rgba(61,220,132,.42); }
.ver:hover { background: rgba(61,220,132,.14); }
.partido-fila.abierto .pf { background: rgba(61,220,132,.07); }
.ctx.ia { border-color: rgba(61,220,132,.32); background: rgba(61,220,132,.05); }
.aviso-ok { background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.35); }
.plan.destacado { border-color: rgba(61,220,132,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 40px rgba(61,220,132,.14); }
.tg.vip { background: linear-gradient(135deg, #67e8f9, var(--marca-2)); }
.logo { background: linear-gradient(135deg, var(--marca), var(--marca-2)); }
.marcadores .caja .num, .vista-tit { text-shadow: 0 2px 18px rgba(61,220,132,.28); }
.barra i { background: var(--marca); }
.curva { color: var(--marca); }
.ayuda-btn { color: var(--marca-luz); }
.paquete span { color: var(--marca); }
.top { background: rgba(8,14,28,.55); }

/* v391 — los veredictos de la IA */
.ia-ver div { font-size: 14px; margin: 5px 0; line-height: 1.45; }
.ia-ver .contra { color: #fecaca; } .ia-ver .favor { color: #d1fae5; }
.ia-aviso { font-size: 12px; font-weight: 600; color: #fecaca; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); border-radius: 10px; padding: 6px 10px; }
.ia-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.ia-fila small { color: var(--tenue); min-width: 44px; text-align: right; }

/* v392 — la IA más precisa */
.ia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin: 8px 0; }
.ia-grid div { background: rgba(255,255,255,.04); border: 1px solid var(--borde); border-radius: 10px; padding: 7px 9px; }
.ia-grid small { display: block; color: var(--tenue); font-size: 12px; }
.ia-grid b { font-size: 14px; }

/* v392 — las barras de comparación sin colores de equipo: los de la marca (verde local, azul visitante) */
:root { --c-l: #3ddc84; --c-r: #60a5fa; --t-l: #03150b; --t-r: #04122b; }

/* v394 */
.sin-stats { font-size: 14px; color: var(--tenue); line-height: 1.4; }
.ia-meter { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(61,220,132,.10);
  border: 1px solid rgba(61,220,132,.35); font-size: 14px; }

/* v395 — renovación, método de pago y aviso antes del cobro */
.metodo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.metodo .seg { flex: 1 1 140px; }
.renovar { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 14px; line-height: 1.4; }
.renovar input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--marca); }
.aviso-renovacion { position: sticky; top: 0; z-index: 60; padding: 10px 14px; font-size: 14px; line-height: 1.4;
  background: rgba(250, 204, 21, .14); border-bottom: 1px solid rgba(250, 204, 21, .45); color: #fde68a; backdrop-filter: blur(12px); }
.aviso-renovacion .ver { margin-left: 6px; padding: 4px 10px; }
.cerrar-aviso { background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; float: right; }

/* v396 — combinadas y probabilidades de la IA */
.dest.comb { min-width: 280px; text-align: left; }
.comb-pata { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 14px; line-height: 1.35; }
.comb-pata b { display: block; font-size: 14px; }
.comb-pata small { color: var(--tenue); }
.ia-prob { display: block; color: var(--tenue); font-size: 12px; font-weight: 500; margin-top: 2px; }
.ia-pred .ia-prob { display: inline; }

/* v398 — combinadas en su pestaña: una debajo de otra; patas que se pueden tocar */
.comb-lista #combinadas-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.comb-lista .dest.comb { flex: none; width: 100%; min-width: 0; cursor: default; }
.comb-pata[data-ficha] { cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: 4px -6px; }
.comb-pata[data-ficha]:hover, .comb-pata[data-ficha]:active { background: rgba(255,255,255,.06); }
.comb-pata > div { flex: 1; }
.comb-ir { font-style: normal; color: var(--tenue); font-size: 20px; line-height: 1; align-self: center; }
.comb-tira { margin-top: 8px; }
.nav-abajo button { font-size: 10px; }
.comb-tira { flex-wrap: nowrap; padding: 8px 14px; }
.comb-tira em { font-style: normal; white-space: nowrap; }

/* v401 — comentarios */
.comentarios { margin-top: 14px; }
.comentarios form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.comentarios textarea, .comentarios input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.05); border: 1px solid var(--borde);
  border-radius: 12px; color: var(--texto); font: inherit; padding: 10px 12px; }
.comentarios textarea { resize: vertical; min-height: 90px; }

/* v417 — la IA bloqueada (lleva a Planes) y los números reales de cada plan */
.ia-bloq { display: flex; justify-content: space-between; align-items: center; width: 100%; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.ia-bloq .candado { font-size: 12px; font-weight: 600; color: var(--tenue); }
.numeros { list-style: none; padding: 0; margin: 10px 0 2px; }
.numeros .num-real { padding: 3px 0; font-size: 14px; }
.numeros .num-real small { color: var(--tenue); }
.plan.resalta { outline: 2px solid var(--verde, #5ad48a); outline-offset: 2px; transition: outline .3s; }

/* v418 — tarjetas de «sólo análisis»: sutiles, sin color de nivel */
.partido-fila.analisis .pf-niv, .tarjeta.analisis .et.nivel { opacity: .75; }
.sin-pick-txt { color: var(--tenue); font-weight: 500; }
.pick-fila.analisis { padding: 6px 0 2px; border: 0; background: none; }

/* v425 — el botón trabajando (entrar, crear cuenta, mandar el enlace) */
.cargando { position: relative; opacity: .85; pointer-events: none; }
.cargando::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* v427 — la cancha en vivo */
.cancha { margin: 10px 0; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.18); border: 1px solid var(--borde); }
.cancha-ult { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 13px; }
.cancha-ult small { color: var(--tenue); }
.cancha-svg { display: block; width: 100%; height: auto; }
.cancha-svg .pasto { fill: #1f6b35; }
.cancha-svg .lineas { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .35; }
.cancha-svg .tray { stroke-width: .5; stroke-dasharray: 1 .8; }
.cancha-svg circle { stroke: rgba(255,255,255,.85); stroke-width: .25; }
.cancha-svg .pulso { animation: pulso 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
.cancha-tit { color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 10px 2px; }
.presion-svg { display: block; width: 100%; height: 34px; padding: 0 6px 6px; box-sizing: border-box; }
.presion-svg .eje { stroke: rgba(255,255,255,.25); stroke-width: .3; }
@media (prefers-reduced-motion: reduce) { .cancha-svg .pulso { animation: none; } }

/* v428 — el boleto de «Mi combinada» */
.mi-boleto { position: fixed; left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; border-radius: 16px;
  background: var(--vidrio, rgba(20,28,48,.92)); border: 1px solid var(--borde-vidrio, rgba(255,255,255,.15)); backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(0,0,0,.35); max-width: 640px; margin: 0 auto; }
.boleto-cab { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 14px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.boleto-cab small { color: var(--tenue); }
.boleto-cuerpo { padding: 0 14px 12px; max-height: 50vh; overflow: auto; }
.boleto-pata { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.boleto-pata span { flex: 1; display: flex; flex-direction: column; } .boleto-pata small { color: var(--tenue); }
.cerrar-mini { background: none; border: 0; color: var(--tenue); font-size: 14px; cursor: pointer; }
.boleto-pie { padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* v429 — la cancha: simple, moderna */
.cancha { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)); border: 1px solid var(--borde-vidrio, rgba(255,255,255,.12)); }
.cancha-ult { gap: 8px; flex-wrap: wrap; }
.chip-ult { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(8px); }
.xg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); }
.xg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cancha-svg .lineas { fill: none; stroke: rgba(255,255,255,.38); stroke-width: .3; }
.cancha-svg .lineas .punto { fill: rgba(255,255,255,.5); }
.cancha-svg .jug circle { stroke: rgba(255,255,255,.9); stroke-width: .25; opacity: .92; }
.cancha-svg .jug .num { font-size: 2px; font-weight: 800; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: .25; }
.cancha-svg .jug .nota { font-size: 1.7px; fill: rgba(255,255,255,.8); text-anchor: middle; }
.cancha-svg .jug .nota.alta { fill: #7dfca0; font-weight: 700; }
.cancha-svg .tiro circle { stroke-width: .35; fill-opacity: .55; }
.cancha-svg .tiro.gol circle { fill-opacity: .9; }
.cancha-svg .tiro .bal { font-size: 2.6px; text-anchor: middle; }
.cancha-svg .balon { transition: transform .9s cubic-bezier(.45,.05,.25,1); }
.cancha-svg .balon .halo { opacity: .35; animation: pulso 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cancha-tit { display: flex; justify-content: space-between; align-items: center; }
@media (prefers-reduced-motion: reduce) { .cancha-svg .balon { transition: none; } .cancha-svg .balon .halo { animation: none; } }
.presion-svg { height: 48px; }

/* v431 — el motor de la cancha */
.cancha-svg .jug { transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
.cancha-svg .balon { transition: transform 1.3s cubic-bezier(.45,.05,.25,1); }
.cancha-svg .tiro circle { stroke-width: .3; fill-opacity: .45; opacity: .75; }
.cancha-svg .letrero rect { fill: rgba(6,14,26,.72); stroke: rgba(255,255,255,.25); stroke-width: .3; }
.cancha-svg .letrero text { fill: #fff; font-size: 4.2px; font-weight: 800; letter-spacing: .25px; text-anchor: middle; }
.cancha-ley { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px 0; font-size: 11px; color: var(--tenue); }
.cancha-ley i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.cancha-ley .l-tiro { border: 1.5px solid currentColor; } .cancha-ley .l-gol { background: currentColor; }
.chip-ult.nuevo { animation: aviso 1.2s ease-out; }
@keyframes aviso { 0% { transform: scale(1.08); background: rgba(124,92,255,.45); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cancha-svg .jug, .cancha-svg .balon { transition: none; } .chip-ult.nuevo { animation: none; } }

/* v432 — los jugadores se mueven con el balón; los goles en la ola */
.cancha-svg .jug { transition: transform 1.15s cubic-bezier(.35,0,.25,1); }
.cancha-svg .balon { transition: transform 1.1s cubic-bezier(.35,0,.25,1); }
.ola { position: relative; }
.ola-gol { position: absolute; transform: translateX(-50%); font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ola-gol.arriba { top: -2px; } .ola-gol.abajo { bottom: 4px; }

/* v434 — como Sofascore: puntitos; el portador, grande con su número y nombre */
.cancha-svg .jug { transition: transform 1s linear; }
.cancha-svg .balon { transition: transform 1s linear; }
.cancha-svg .jug .pto { stroke: rgba(255,255,255,.85); stroke-width: .22; }
.cancha-svg .jug .aro { opacity: 0; stroke: #fff; stroke-width: .35; transition: opacity .4s; }
.cancha-svg .jug .num, .cancha-svg .jug .nom { opacity: 0; transition: opacity .4s; }
.cancha-svg .jug .nom { font-size: 2.1px; font-weight: 700; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: .35; }
.cancha-svg .jug.portador .aro, .cancha-svg .jug.portador .num, .cancha-svg .jug.portador .nom { opacity: 1; }
.cancha-svg .jug.portador .pto { opacity: 0; }
.cancha-svg .pase { stroke: rgba(255,255,255,.85); stroke-width: .35; stroke-linecap: round; opacity: 0; transition: opacity .9s; }
.cancha-svg .pase.ve { opacity: .9; transition: none; }
@media (prefers-reduced-motion: reduce) { .cancha-svg .jug, .cancha-svg .balon { transition: none; } }

/* v435 — el balón no se pierde entre los puntitos blancos */
.cancha-svg .balon .bola { fill: #fff; stroke: #0b1220; stroke-width: .4; }
.cancha-svg .balon .penta { fill: #0b1220; }
.cancha-svg .balon .sombra { fill: rgba(0,0,0,.35); }
.cancha-svg .balon .halo { fill: none; stroke: #facc15; stroke-width: .35; opacity: .9; }

/* v436 — sin jugadas suficientes: la línea del partido con goles y tarjetas */
.presion-svg.linea .pista { stroke: rgba(255,255,255,.12); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.presion-svg.linea .va { stroke: var(--verde, #22c55e); stroke-width: 2.2; vector-effect: non-scaling-stroke; opacity: .8; }

/* v438 — nada se dibuja fuera de la cancha */
.cancha-svg { overflow: hidden; }

/* v439 — Mi historial */
#mi-hist .chips { margin-bottom: 8px; }
#mi-hist .verde-t { color: #22c55e; } #mi-hist .roja-t { color: #f87171; }
#mi-hist .hist-dep { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tenue); margin: 4px 0 6px; }
#mi-hist .hist-dia { margin: 10px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--tenue); }
#mi-hist .hist-fila { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
#mi-hist .hist-fila .ht small { display: block; font-size: 12px; color: var(--tenue); margin-top: 1px; }
#mi-hist .hist-fila b { font-size: 14px; }
#mi-hist .num { font-size: 24px; }

/* v440 — deslizar para quitar en «Mis picks» */
.partido-fila.deslizable { position: relative; overflow: hidden; touch-action: pan-y; }
.partido-fila.deslizable > .pf { position: relative; z-index: 1; transition: transform .22s ease; }
.quitar-fila { position: absolute; top: 0; right: 0; width: 92px; height: 100%; display: none; align-items: center; justify-content: center;
  border: 0; background: #e5484d; color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.partido-fila.desliza > .quitar-fila { display: flex; }
.partido-fila.deslizable.abierto > .quitar-fila { height: 88px; }
.aviso-flot { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; display: flex; gap: 14px; align-items: center;
  background: rgba(15,23,42,.96); color: #e5e7eb; border: 1px solid var(--borde); border-radius: 999px; padding: 10px 16px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.aviso-flot button { background: none; border: 0; color: #22c55e; font: inherit; font-weight: 700; cursor: pointer; }

/* v441 — cada pata de «Mis combinadas» abre su partido */
.tg-pata.ir-partido { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 4px 0; cursor: pointer; }
.tg-pata.ir-partido .ir { float: right; color: var(--tenue); font-weight: 700; }
.tg-pata.ir-partido:active { opacity: .7; }

/* v443 — lo que gana la combinada si acierta */
.comb-premio { font-size: 14px; margin: 2px 0 6px; color: #facc15; }
.comb-premio.tenue { color: var(--tenue); }

/* v444 — la ayuda en secciones */
.ayuda .ay-sec { border: 1px solid var(--borde); border-radius: 12px; margin: 8px 0; background: rgba(255,255,255,.03); }
.ayuda .ay-sec > summary { cursor: pointer; list-style: none; padding: 12px 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.ayuda .ay-sec > summary::-webkit-details-marker { display: none; }
.ayuda .ay-sec > summary::after { content: '▾'; color: var(--tenue); transition: transform .2s; }
.ayuda .ay-sec[open] > summary::after { transform: rotate(180deg); }
.ayuda .ay-sec > ul, .ayuda .ay-sec > .ay-tabla { margin: 0 14px 12px; }
.ayuda .ay-tabla { width: calc(100% - 28px); border-collapse: collapse; font-size: 14px; }
.ayuda .ay-tabla th, .ayuda .ay-tabla td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--borde); }
.ayuda .ay-tabla th { color: var(--tenue); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.ayuda .ay-tabla td:last-child { font-weight: 700; color: #facc15; }
.ayuda .ay-tabla td.sin { color: var(--tenue); font-weight: 500; }

/* v446 — reportar un error, los reportes en «Mi cuenta» y «¿te sirvió?» de la IA */
.reportar { display: block; margin: 18px auto 4px; background: none; border: 1px solid var(--borde); color: var(--tenue); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.rep-detalle { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde); background: rgba(255,255,255,.04); color: inherit; font: inherit; resize: vertical; }
.rep-item { border-top: 1px solid var(--borde); padding: 8px 0; font-size: 14px; }
.rep-item small { display: block; color: var(--tenue); font-size: 12px; }
.rep-item p { margin: 4px 0; }
.rep-sub { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--tenue); margin: 8px 0 2px; }
.ia-noti { font-size: 14px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(250,204,21,.08); }
.ia-voto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; }
.ia-voto > button { background: rgba(255,255,255,.05); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 12px; font-size: 16px; cursor: pointer; }
.ia-voto > button.si { border-color: #22c55e; background: rgba(34,197,94,.15); }
.ia-voto .chips { width: 100%; }

/* v448 — primer gol y PA1 en el análisis de la IA */
.ia-pa1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.ia-pa1 > div { background: rgba(255,255,255,.04); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ia-pa1 small { color: var(--tenue); font-size: 12px; }
.ia-pa1 span { display: flex; justify-content: space-between; gap: 6px; }
.ia-pa1 span b { color: #facc15; }
.ia-pa1 span em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-pa1 span b { white-space: nowrap; }
.ia-pa1 > div { min-width: 0; } .ia-pa1 span { min-width: 0; }

/* v453 — lo que dijimos vs lo que salió, y el dato real de cada pick terminado */
.calib { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.calib-fila { display: grid; grid-template-columns: 78px 1fr; grid-template-areas: "b barra" "b n"; gap: 2px 10px; align-items: center; }
.calib-b { grid-area: b; font-weight: 700; font-size: 14px; }
.calib-barra { grid-area: barra; position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: visible; }
.calib-barra b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #22c55e); }
.calib-barra .dijo { position: absolute; top: -3px; width: 2px; height: 16px; background: #facc15; border-radius: 1px; transform: translateX(-1px); }
.calib-n { grid-area: n; font-size: 12px; color: var(--tenue); }
.calib-n b { color: var(--texto); }
.calib-n small { margin-left: 6px; }
.tg-pata .real, .tg-pata + .real { display: block; font-size: 12px; color: var(--tenue); margin-left: 22px; }

/* v454 — los íconos (Lucide/Tabler) y el aviso para instalar la app */
.ic { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.18em; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.instalar { position: fixed; left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; gap: 12px;
  background: rgba(15,23,42,.97); border: 1px solid var(--borde); border-radius: 16px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); max-width: 520px; margin: 0 auto; }
.instalar img { border-radius: 10px; }
.instalar .ins-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.instalar .ins-txt small { color: var(--tenue); font-size: 12px; }
.instalar .ins-si { background: #22c55e; color: #04140a; border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.instalar .ins-no { background: none; border: 0; color: var(--tenue); font-size: 18px; padding: 4px; cursor: pointer; }

/* v455 — los niveles y los deportes con íconos de color; la barra de abajo con íconos de línea */
.ic.nv-diamante { color: #7dd3fc; } .ic.nv-platino { color: #a5b4fc; } .ic.nv-oro { color: #fbbf24; }
.ic.nv-plata { color: #cbd5e1; } .ic.nv-error { color: #4ade80; } .ic.nv-analisis { color: var(--tenue); }
.ic.dep { color: var(--tenue); }
.et.verde .ic, .et.roja .ic { width: 1em; height: 1em; }
.nav-abajo button .ic { width: 22px; height: 22px; stroke-width: 1.8; margin-bottom: 1px; }
.nav-abajo button.activa .ic { stroke-width: 2.2; }
.pf-niv .ic { width: 18px; height: 18px; }

/* v456 — los colores de los íconos que reemplazan a los emojis */
.ic.ok { color: #22c55e; } .ic.mal { color: #f87171; } .ic.moneda { color: #facc15; } .ic.acento { color: #a5b4fc; }
.ic.aviso { color: #fbbf24; } .ic.candado { color: #fbbf24; width: .95em; height: .95em; } .ic.estrella { color: #facc15; }
.ic.vivo { color: #f87171; } .ic.amarilla { color: #facc15; fill: #facc15; } .ic.roja-t { color: #ef4444; fill: #ef4444; }
.desbloquear .ic.candado, .vip-btn .ic, .ins-si .ic { color: inherit; }

/* v457 — los avisos propios (en vez de los del navegador) */
.modal-app { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,7,18,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: modal-entra .16s ease-out; }
.modal-app.sale { opacity: 0; transition: opacity .15s; }
.modal-caja { width: 100%; max-width: 360px; background: rgba(17,26,46,.97); border: 1px solid var(--borde); border-radius: 20px;
  padding: 22px 20px 16px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.modal-ico { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); }
.modal-ico .ic { width: 26px; height: 26px; }
.modal-ico.ok { background: rgba(34,197,94,.14); color: #22c55e; } .modal-ico.aviso { background: rgba(251,191,36,.14); color: #fbbf24; }
.modal-ico.acento { background: rgba(165,180,252,.14); color: #a5b4fc; }
.modal-caja h3 { margin: 0 0 6px; font-size: 18px; }
.modal-caja p { margin: 0 0 16px; font-size: 14px; color: var(--tenue); line-height: 1.45; }
.modal-botones { display: flex; gap: 10px; }
.modal-botones button { flex: 1; border-radius: 999px; padding: 11px 14px; font: inherit; font-weight: 700; cursor: pointer; border: 1px solid var(--borde); }
.modal-si { background: #22c55e; color: #04140a; border-color: transparent !important; }
.modal-si.peligro { background: #ef4444; color: #fff; }
.modal-no { background: rgba(255,255,255,.06); color: inherit; }
@keyframes modal-entra { from { opacity: 0; } to { opacity: 1; } }

/* v458 — las siluetas mientras carga (en vez de «Cargando…») */
.esq { display: block; height: 12px; border-radius: 6px; margin: 9px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.13) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%; animation: esq 1.3s ease-in-out infinite; }
.esq.w40 { width: 40%; } .esq.w50 { width: 50%; } .esq.w60 { width: 60%; } .esq.w70 { width: 70%; } .esq.w80 { width: 80%; } .esq.w90 { width: 90%; }
.esq-tarjeta { border: 1px solid var(--borde); border-radius: 16px; padding: 12px 14px; margin: 10px 0; background: rgba(255,255,255,.03); }
.esq-tarjeta .esq:first-child { height: 10px; } .esq-tarjeta .esq:nth-child(2) { height: 16px; }
@keyframes esq { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .esq { animation: none; } }

/* v460 — la presión partida en 1T | 2T */
.presion-svg .eje.medio { stroke: rgba(255,255,255,.28); stroke-dasharray: 1.2 1.2; }
.ola .ola-t { position: absolute; top: 50%; margin-top: -7px; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: rgba(255,255,255,.35); pointer-events: none; }
.ola-tiempos { display: flex; font-size: 10px; font-weight: 700; letter-spacing: .4px; color: rgba(255,255,255,.35); margin-top: 2px; }
.ola-tiempos span { text-align: center; } .ola-tiempos span:last-child { flex: 1; }

/* v462 — la compensación anunciada */
.compen { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #fbbf24; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); }

/* v463 — «Verde» / «Roja» dicho en la fila del partido terminado */
.pf-pick .res { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pf-pick .ok.res { color: #22c55e; background: rgba(34,197,94,.14); } .pf-pick .ko.res { color: #f87171; background: rgba(248,113,113,.14); }

/* v465 — RENDIMIENTO (el usuario: «se traba y se calienta el teléfono»). El fondo «aurora» se
   movía sin parar DETRÁS de decenas de tarjetas y chips con vidrio desenfocado: cada cuadro de la
   animación obligaba al teléfono a volver a desenfocarlo todo. Ahora el fondo queda quieto y el
   desenfoque en vivo sólo en la barra de arriba, la de abajo y las ventanas; lo demás lleva un
   fondo casi igual, sin desenfoque. */
body::before, body::after { animation: none !important; }
.caja, .tarjeta, .liga-bloque, .dest, .tira, .segmentos, .sin-pick, .ctx, .mini, .seccion,
.buscador input, .buscador select, .chip, .pestanas button, .fin-cab {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.caja, .tarjeta, .liga-bloque, .dest, .tira, .sin-pick, .fin-cab { background: rgba(21,25,52,.80); }
.mini, .seccion, .ctx, .segmentos { background: rgba(255,255,255,.05); }
.chip, .pestanas button, .buscador input, .buscador select { background: rgba(255,255,255,.07); }
.chip.activa, .pestanas button.activa { background: linear-gradient(135deg, #22c55e, #16a34a); }

/* v468 — cerrar la tarjeta desde abajo, «Por liga / Por hora» y la liga en cada fila */
.pf-cerrar { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; margin-top: 10px; pointer-events: none; z-index: 3; }
.pf-cerrar button { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--texto); background: rgba(21,25,52,.92); border: 1px solid var(--borde); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.pf-cerrar .ic.arriba { transform: rotate(180deg); width: 16px; height: 16px; }
.orden-tog { display: flex; gap: 6px; justify-content: flex-end; margin: -4px 0 10px; }
.orden-tog button { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; color: var(--tenue);
  background: rgba(255,255,255,.05); border: 1px solid var(--borde); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.orden-tog button.activa { color: var(--texto); border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.14); }
.orden-tog .ic { width: 14px; height: 14px; }
.pf-lig { display: block; font-size: 11px; color: var(--tenue); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v468 — «clip» recorta igual que «hidden» pero deja que «Cerrar» se quede pegado abajo (sticky) */
.liga-bloque, .partido-fila.deslizable { overflow: clip; }
/* v478 — iOS < 16 no tiene «clip»: se quedaba con el «hidden» de arriba y «Cerrar» no se pegaba. Ahí el
   bloque de liga no recorta (las esquinas las ponen la cabecera y la última fila) */
@supports not (overflow: clip) {
  .liga-bloque { overflow: visible; }
  .liga-bloque > :first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
  .liga-bloque > :last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
}

/* v469 — quién puede anotar y tirar a puerta, dentro del análisis IA */
.ia-jug { margin: 10px 0; background: rgba(255,255,255,.04); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; }
.jug-cab, .jug-fila { display: grid; grid-template-columns: minmax(0, 1fr) 42px 62px 32px; gap: 4px; align-items: center; }
.jug-cab { font-size: 12px; color: var(--tenue); padding-bottom: 4px; border-bottom: 1px solid var(--borde); }
.jug-cab span { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--texto); }
.jug-cab .ic { width: 14px; height: 14px; }
.jug-cab small, .jug-fila b { text-align: right; }
.jug-nom { font-size: 12px; font-weight: 700; color: var(--tenue); margin: 8px 0 2px; }
.jug-fila { font-size: 14px; padding: 3px 0; }
.jug-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jug-fila b { font-weight: 700; color: #fcd34d; }

/* v470 — pestañas dentro de «Antes del partido» y del «Análisis IA»; ⭐ de las ligas; líneas */
.ctx details.sub { border-top: 1px solid var(--borde); margin: 6px -2px 0; padding: 6px 2px 0; }
.ctx details.sub > summary { font-size: 13px; font-weight: 700; color: var(--tenue); list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.ctx details.sub > summary::-webkit-details-marker { display: none; }
.ctx details.sub > summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.ctx details.sub[open] > summary { color: var(--texto); }
.ctx details.sub[open] > summary::before { transform: rotate(90deg); }
.sub-c { padding: 4px 0 6px; }
.liga-nom { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fav { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 0 -4px -6px; border-radius: 50%; color: rgba(255,255,255,.28); flex: none; }
.fav .ic { width: 16px; height: 16px; }
.fav.si { color: #fbbf24; }
.fav.si .ic { fill: #fbbf24; }
.lin-st { margin: 4px 0 10px; }
.lin-tit { font-size: 12px; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.lin-fila { padding: 4px 0; font-size: 13px; }
.lin-n { display: block; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lin-x { background: rgba(255,255,255,.05); border: 1px solid var(--borde); border-radius: 999px; padding: 3px 9px; font-size: 12px; color: var(--tenue); white-space: nowrap; }
.lin-x b { color: #fcd34d; margin-left: 2px; }

/* v471 — Arma tu combinada */
.armador { margin-bottom: 14px; }
.armador .tit { display: flex; align-items: center; gap: 6px; }
.arm-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.arm-et { font-size: 12px; color: var(--tenue); min-width: 52px; }
.arm-fila .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.arm-n { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.05); border: 1px solid var(--borde); border-radius: 999px; padding: 2px; }
.arm-n button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--texto); font: inherit; font-size: 18px; cursor: pointer; }
.arm-n b { min-width: 26px; text-align: center; }
.arm-ir { margin-left: auto; }
.arm-res { margin-top: 10px; border-top: 1px solid var(--borde); padding-top: 8px; }
.arm-pata { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: 'niv txt num' 'niv ia num'; gap: 2px 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.arm-niv { grid-area: niv; padding-top: 2px; }
.arm-txt { grid-area: txt; display: flex; flex-direction: column; min-width: 0; }
.arm-txt b { font-size: 14px; }
.arm-txt small, .arm-num small { color: var(--tenue); font-size: 12px; }
.arm-num { grid-area: num; display: flex; flex-direction: column; align-items: flex-end; }
.arm-ia { grid-area: ia; font-size: 11px; color: var(--tenue); display: inline-flex; align-items: center; gap: 4px; }
.arm-ia.favor { color: #4ade80; }
.arm-fuera { font-size: 12px; color: #fca5a5; margin: 8px 0; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.arm-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }

/* v472 — parley del mismo partido */
.par-caja { background: rgba(255,255,255,.04); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.par-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.par-cab span { color: var(--tenue); }
.par-cab span b { color: #fcd34d; }
.par-pata { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.par-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.par-n b { color: #fcd34d; }
.par-n small { color: var(--tenue); font-size: 11px; }

/* v473 — niveles con candado en «Arma tu combinada» (plan gratis: sólo Oro) */
.armador .chip.bloq { opacity: .55; }
.armador .chip.bloq .ic { width: 12px; height: 12px; margin-left: 2px; }

/* v474 — botón «Armar parley» y la cuota de la casa en cada línea */
.par-ir { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 6px; margin: 4px 0; }
.par-chips { display: flex; gap: 6px; margin: 2px 0 6px; }
.lin-x i { font-style: normal; color: var(--tenue); margin-left: 5px; padding-left: 5px; border-left: 1px solid var(--borde); }

/* v483 — el día en las tarjetas de Destacados y «Para ti» (hoy en verde) */
.dest-cuando { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.dest-cuando small { font-size: 11px; font-weight: 800; color: var(--tenue); text-transform: uppercase; letter-spacing: .03em; }
.dest-cuando.hoy small { color: var(--verde, #5ad48a); }

/* v483 — planes cortos: precio, un número grande, lo clave y el botón; el detalle al tocar */
.plan[data-plan-abre] { cursor: pointer; display: flex; flex-direction: column; }
.plan-gancho { font-size: 15px; font-weight: 600; margin: 4px 0 6px; line-height: 1.35; }
.plan-gancho .plan-num { display: block; font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--verde, #5ad48a); }
.plan-gancho small { display: block; font-size: 12px; font-weight: 500; color: var(--tenue); margin-top: 2px; }
.plan-sub { margin: 0 0 4px; font-size: 14px; color: var(--tenue); }
.plan .plan-clave { list-style: none; padding: 0; margin: 4px 0 2px; color: var(--texto, inherit); font-size: 14px; line-height: 1.8; }
.plan .plan-clave li::before { content: '✓ '; color: var(--verde, #5ad48a); font-weight: 800; }
.plan-mas { margin-top: 10px; border-top: 1px solid var(--borde); padding-top: 8px; }
.plan-mas summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--tenue); list-style: none; }
.plan-mas summary::-webkit-details-marker { display: none; }
.plan-mas summary::after { content: ' ▾'; }
.plan-mas[open] summary::after { content: ' ▴'; }

/* v484 — la equis blanca para borrar la búsqueda de un toque (la del navegador se esconde) */
.busca-caja { position: relative; display: block; min-width: 0; }
.buscador .busca-caja input { padding-right: 38px; }
.busca-caja input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.busca-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; line-height: 28px; padding: 0; cursor: pointer; }
.busca-x:active { background: rgba(255,255,255,.3); }

/* v484 — en «Por hora», los partidos sin pick van plegados en su propio bloque */
.sinpick-cab { margin-top: 10px; }

/* v486 — el reloj en vivo: «45+3'» y debajo los minutos que agregó el árbitro («de +4») */
.rl.vivo .rl-comp { display: block; font-size: 10px; font-weight: 700; color: var(--tenue); margin-top: 1px; }

/* v492 — los últimos 5 de cada equipo (se despliegan) y la tabla de la liga */
.ctx-eq > summary { list-style: none; cursor: pointer; }
.ctx-eq > summary::-webkit-details-marker { display: none; }
.ctx-mas { font-style: normal; color: var(--tenue); font-size: 12px; margin-left: 6px; display: inline-block; }
.ctx-eq[open] .ctx-mas { transform: rotate(180deg); }
.u5 { margin: 4px 0 10px; font-size: 12px; }
.u5-f { display: grid; grid-template-columns: 20px minmax(0, 1fr) 30px 32px 40px 32px; gap: 3px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--borde); }
.u5-f > span, .u5-f > b { text-align: center; }
.u5-f .u5-r { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u5-f .u5-r small { color: var(--tenue); }
.u5-cab { color: var(--tenue); font-size: 11px; border-bottom-color: transparent; padding-bottom: 0; }
.u5-f .fr { width: 20px; height: 20px; line-height: 20px; font-size: 11px; }
.tabla-liga { font-size: 12px; margin: 4px 0 8px; }
.tl-f { display: grid; grid-template-columns: 24px minmax(0, 1fr) 28px 34px 32px; gap: 3px; align-items: center; padding: 4px 4px 4px 6px; border-left: 3px solid transparent; border-radius: 6px; }
.tl-f > span, .tl-f > b { text-align: center; }
.tl-f .tl-n { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-cab { color: var(--tenue); font-size: 11px; }
.tl-f.z-alta { border-left-color: rgba(34,197,94,.7); }
.tl-f.z-media { border-left-color: rgba(96,165,250,.7); }
.tl-f.z-baja { border-left-color: rgba(239,68,68,.7); }
.tl-f.yo { background: rgba(255,255,255,.12); font-weight: 800; }
.tl-f.yo .tl-n { color: #fff; }
.ctx-eq > summary.ctx-f > span:last-child { white-space: nowrap; flex: none; }

/* v494 — la guía de la app: una luz sobre la parte que se explica y una ventanita con Siguiente / Omitir */
.guia-capa { position: fixed; inset: 0; z-index: 9000; background: rgba(5,8,20,.72); }
.guia-capa.con-luz { background: transparent; }
.guia-luz { position: fixed; z-index: 9001; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(5,8,20,.72); border: 2px solid var(--verde, #22c55e); pointer-events: none; transition: all .25s; }
.guia-caja { position: fixed; z-index: 9002; left: 16px; right: 16px; max-width: 420px; margin: 0 auto; background: #141a36; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 50px rgba(0,0,0,.5); transition: top .25s; }
.guia-num { font-size: 12px; color: var(--tenue); font-weight: 700; }
.guia-t { font-size: 17px; font-weight: 800; margin: 2px 0 4px; }
.guia-d { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--texto); }
.guia-bot { display: flex; justify-content: space-between; gap: 10px; }
.guia-bot button { font: inherit; font-weight: 700; border-radius: 12px; padding: 10px 16px; cursor: pointer; border: 0; }
.guia-omitir { background: transparent; color: var(--tenue); }
.guia-sig { background: var(--verde, #22c55e); color: #06210f; flex: 1; max-width: 200px; }
.guia-ver { width: 100%; margin: 4px 0 10px; }
.guia-nunca { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tenue); margin: -4px 0 10px; cursor: pointer; }
.guia-nunca input { width: 18px; height: 18px; accent-color: var(--verde, #22c55e); margin: 0; }

/* v501 — Destacados terminados: el resultado del pick en el pie */
.dest-pie .res { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.dest-pie .ok.res { color: #22c55e; background: rgba(34,197,94,.14); }
.dest-pie .ko.res { color: #f87171; background: rgba(248,113,113,.14); }
.dest.dest-fin .dest-eqs span { color: var(--texto); }

/* v503 — la tanda de penales, tiro por tiro */
.penales { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: rgba(255,255,255,.04); }
.pen-tit { font-size: 12px; font-weight: 800; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.pen-f { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 8px; align-items: center; padding: 3px 0; }
.pen-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.pen-t { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pen-t i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.pen-t .pen-si { background: #22c55e; }
.pen-t .pen-no { background: #ef4444; }
.pen-f b { text-align: right; font-size: 16px; }