Top equipos: tarjetas colapsables + radar comparativo del top

- Cada equipo del top ahora muestra solo el header; se despliega la tabla al tocar
(y se colapsa de nuevo), con chevron.
- Radar (mplsoccer) que compara los top-N equipos en las variables elegidas
(z-score sobre el pool), un polígono por equipo. Se devuelve en /team-vars/search.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/racing_reports/api/routes_team_vars.py

@@ -62,7 +62,14 @@ def search(req: SearchRequest) -> dict:
     if bad:
         raise HTTPException(status_code=400, detail=f"Dirección inválida: {bad}")
     top = min(max(req.top, 1), 25)
-    return team_vars.search(req.league, req.season, [s.model_dump() for s in req.specs], top=top)
+    specs = [s.model_dump() for s in req.specs]
+    res = team_vars.search(req.league, req.season, specs, top=top)
+    # radar comparando el top (hasta 6 para que sea legible); best-effort
+    try:
+        res["radar_b64"] = team_vars.search_radar_png(req.league, req.season, specs, top=min(top, 6))
+    except Exception:
+        res["radar_b64"] = None
+    return res
 
 
 @router.get("/teams", dependencies=[Depends(require_auth)])

src/racing_reports/team_vars.py

@@ -341,6 +341,65 @@ def radar_png(league: str, season: str, team: str, variables: list[str], scope:
     return base64.b64encode(buf.getvalue()).decode("ascii")
 
 
+def search_radar_png(league: str, season: str, specs: list[dict], top: int = 5) -> str | None:
+    """Radar comparando los TOP-N equipos de la búsqueda en las variables elegidas.
+    Cada eje = una variable (en z-score sobre el pool); un polígono por equipo.
+    Devuelve PNG base64 o None si hay <3 variables válidas o sin resultados."""
+    import base64
+    from io import BytesIO
+
+    import matplotlib
+    matplotlib.use("Agg")
+    import matplotlib.pyplot as plt
+    from matplotlib.lines import Line2D
+    from mplsoccer import Radar
+
+    pool = _pool(league, season)
+    valid = [s for s in specs if s.get("variable") in pool.columns and s.get("direction") in DIRECTIONS]
+    variables = list(dict.fromkeys(s["variable"] for s in valid))
+    if pool.empty or len(variables) < 3:
+        return None
+    res = search(league, season, specs, top=top)
+    teams = res.get("teams", [])
+    if not teams:
+        return None
+
+    zmat, _ = _zmatrix(pool, variables)  # z por (fila del pool × variable)
+    key = pool[["competencia", "temporada", "equipo"]].astype(str)
+    params = [label_of(v) for v in variables]
+    # rango por eje = spread de z en el pool (simétrico, recortado a ±3)
+    lows = [max(-3.0, float(zmat[v].min())) for v in variables]
+    highs = [min(3.0, float(zmat[v].max())) for v in variables]
+    lows = [min(l, -0.5) for l in lows]; highs = [max(h, 0.5) for h in highs]
+
+    colors = ["#00a86b", "#F2C14E", "#E8584E", "#5B9BD5", "#B57EDC", "#E88C30"]
+    radar = Radar(params, lows, highs, num_rings=4, ring_width=1, center_circle_radius=1)
+    fig, ax = radar.setup_axis(figsize=(8.5, 8.5), facecolor="#0b1721")
+    fig.patch.set_facecolor("#0b1721")
+    radar.draw_circles(ax=ax, facecolor="#16251e", edgecolor="#33514a")
+    legend = []
+    for i, t in enumerate(teams):
+        m = ((key["competencia"] == str(t["competencia"])) & (key["temporada"] == str(t["temporada"]))
+             & (key["equipo"] == str(t["equipo"])))
+        idx = key.index[m]
+        if len(idx) == 0:
+            continue
+        vals = [float(min(max(zmat.loc[idx[0], v], lows[j]), highs[j])) for j, v in enumerate(variables)]
+        col = colors[i % len(colors)]
+        radar.draw_radar_solid(vals, ax=ax, kwargs={"facecolor": col, "alpha": 0.12,
+                                                    "edgecolor": col, "linewidth": 2})
+        legend.append(Line2D([0], [0], color=col, lw=3, label=f"#{i+1} {t['equipo']}"))
+    radar.draw_range_labels(ax=ax, fontsize=8, color="#9fb4ab")
+    radar.draw_param_labels(ax=ax, fontsize=10, color="#E8EEEA")
+    ax.set_title("Top equipos — comparación por variable (z-score)", color="#E8EEEA", fontsize=12, pad=18)
+    ax.legend(handles=legend, loc="upper right", bbox_to_anchor=(1.32, 1.0), fontsize=9,
+              labelcolor="#E8EEEA", facecolor="#16251e", edgecolor="#33514a")
+    buf = BytesIO()
+    fig.savefig(buf, format="png", dpi=110, bbox_inches="tight", facecolor=fig.get_facecolor())
+    plt.close(fig)
+    return base64.b64encode(buf.getvalue()).decode("ascii")
+
+
 def search(league: str, season: str, specs: list[dict], top: int = 5) -> dict:
     """specs = [{"variable", "direction"}]. Devuelve top-N equipos por puntaje."""
     pool = _pool(league, season)

src/racing_reports/web/templates/home.html

@@ -18,6 +18,22 @@
   .table-preview table { width:100%; border-collapse: collapse; font-size: 12px; }
   .table-preview th, .table-preview td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
   .table-preview th { color: #9fb4ab; font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
+  /* Slider de rango doble (filtro por percentil de los perfiles de saque) */
+  .rng { position: relative; height: 20px; }
+  .rng .track { position:absolute; top:9px; left:0; right:0; height:3px; background:#374151; border-radius:2px; }
+  .rng .fill  { position:absolute; top:9px; height:3px; background:#ef4444; border-radius:2px; }
+  .rng input[type=range] { position:absolute; top:0; left:0; width:100%; height:20px; margin:0;
+    -webkit-appearance:none; appearance:none; background:none; pointer-events:none; }
+  .rng input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto;
+    width:13px; height:13px; border-radius:50%; background:#f3f4f6; border:2px solid #ef4444; cursor:pointer; }
+  .rng input[type=range]::-moz-range-thumb { pointer-events:auto;
+    width:13px; height:13px; border-radius:50%; background:#f3f4f6; border:2px solid #ef4444; cursor:pointer; }
+  /* Lista de similares: scrollbar visible para que se note que hay más abajo */
+  .gk-scroll { scrollbar-width: thin; scrollbar-color: #4b5563 transparent; }
+  .gk-scroll::-webkit-scrollbar { width: 8px; }
+  .gk-scroll::-webkit-scrollbar-track { background: transparent; }
+  .gk-scroll::-webkit-scrollbar-thumb { background:#4b5563; border-radius:4px; }
+  .gk-scroll::-webkit-scrollbar-thumb:hover { background:#6b7280; }
 </style>
 </head>
 <body class="bg-ink-900 text-gray-100 min-h-screen" x-data="rrApp()" x-init="init()" x-cloak>
@@ -283,13 +299,15 @@
         <h2 class="text-lg font-semibold text-racing-500">Top equipos (<span x-text="tvResult?.pool_size"></span> en el pool)</h2>
         <p class="text-xs text-yellow-200" x-show="tvResult?.warning" x-text="tvResult?.warning"></p>
         <template x-for="(t, i) in (tvResult?.teams || [])" :key="t.equipo">
-          <div class="bg-ink-700 border border-ink-600 rounded-2xl p-4">
-            <div class="flex items-center justify-between mb-2">
-              <div class="font-semibold"><span class="text-racing-500" x-text="'#'+(i+1)"></span> <span x-text="t.equipo"></span>
+          <div class="bg-ink-700 border border-ink-600 rounded-2xl p-4" x-data="{ open: false }">
+            <div class="flex items-center justify-between cursor-pointer select-none" @click="open=!open">
+              <div class="font-semibold flex items-center gap-2">
+                <span class="text-gray-400 text-xs transition-transform" :class="open ? 'rotate-90' : ''">▶</span>
+                <span class="text-racing-500" x-text="'#'+(i+1)"></span> <span x-text="t.equipo"></span>
                 <span class="text-xs text-gray-400" x-text="t.competencia+' · '+t.temporada+' · '+t.partidos+' partidos'"></span></div>
               <div class="font-bold" :class="t.total>=0 ? 'text-racing-500' : 'text-red-300'" x-text="'Puntaje '+(t.total>=0?'+':'')+t.total"></div>
             </div>
-            <table class="w-full text-xs">
+            <table class="w-full text-xs mt-2" x-show="open" x-cloak>
               <thead><tr class="text-gray-400 text-left">
                 <th class="py-1">Variable</th><th>Dir.</th><th class="text-right">Valor</th><th class="text-right">z</th><th class="text-right">Puntaje</th>
               </tr></thead>
@@ -307,6 +325,10 @@
             </table>
           </div>
         </template>
+        <div x-show="tvResult?.radar_b64" class="bg-ink-700 border border-ink-600 rounded-2xl p-4">
+          <div class="text-sm font-semibold text-racing-500 mb-2">Radar comparativo del top</div>
+          <img x-show="tvResult?.radar_b64" :src="'data:image/png;base64,'+tvResult?.radar_b64" alt="Radar top equipos" class="w-full max-w-2xl mx-auto rounded-lg">
+        </div>
       </section>
 
       <!-- ---- Perfil de un equipo (z-score) ---- -->
@@ -724,6 +746,146 @@
           </template>
         </div>
       </section>
+
+      <!-- ---- Perfiles de saque de puerta (nube + radar + similares) ---- -->
+      <section class="bg-ink-700 border border-ink-600 rounded-2xl p-5" x-init="gkLoad()">
+        <h2 class="text-lg font-semibold text-racing-500 mb-1">6. Perfiles de saque de puerta</h2>
+        <p class="text-xs text-gray-400 mb-3">Cada punto es un equipo-temporada, ubicado por su perfil de saque de arco (21 métricas sobre las secuencias que arrancan en saque). Click en un punto para abrir su perfil abajo. La similitud es la distancia entre perfiles sobre los percentiles: 100% = perfil idéntico, 0% = tan distinto como los pares más opuestos que existen. Desclickeá métricas para sacarlas del cálculo.</p>
+
+        <div class="flex flex-wrap gap-3 items-end mb-3">
+          <div>
+            <label class="block text-xs text-gray-400 mb-1">Equipo focal</label>
+            <input x-model="gkBuscar" @change="gkPick(gkBuscar)" list="gk-teams" placeholder="Buscar equipo..."
+                   class="bg-ink-800 border border-ink-600 rounded-lg px-3 py-2 text-sm w-64">
+            <datalist id="gk-teams">
+              <template x-for="t in gkTeams" :key="t.key"><option :value="t.key" x-text="t.liga"></option></template>
+            </datalist>
+          </div>
+          <div>
+            <label class="block text-xs text-gray-400 mb-1">Colorear por</label>
+            <select x-model="gkColor" @change="gkDraw()" class="bg-ink-800 border border-ink-600 rounded-lg px-3 py-2 text-sm">
+              <option value="cluster">Cluster de estilo</option>
+              <option value="liga">Liga</option>
+              <option value="none">Sin color</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-xs text-gray-400 mb-1">Resaltar liga</label>
+            <select x-model="gkLiga" @change="gkDraw()" class="bg-ink-800 border border-ink-600 rounded-lg px-3 py-2 text-sm">
+              <option value="">— todas —</option>
+              <template x-for="l in gkLigas" :key="l"><option :value="l" x-text="l"></option></template>
+            </select>
+          </div>
+          <button @click="gkRandom()" class="bg-ink-600 hover:bg-ink-500 px-4 py-2 rounded-lg text-sm">Equipo al azar</button>
+          <button @click="gkShowFilters=!gkShowFilters"
+                  :class="gkNFilters() ? 'border-racing-500 text-racing-500' : 'border-ink-600 text-gray-300'"
+                  class="border bg-ink-800 hover:bg-ink-600 px-4 py-2 rounded-lg text-sm"
+                  x-text="(gkShowFilters?'Ocultar':'Filtrar por métrica')+(gkNFilters()?` (${gkNFilters()})`:'')"></button>
+          <span class="text-xs text-gray-500" x-show="gkTeams.length" x-text="`${gkTeams.length} equipos-temporada · ${gkLigas.length} ligas`"></span>
+        </div>
+
+        <p class="text-xs text-yellow-200 mb-2" x-show="gkError" x-text="gkError"></p>
+
+        <!-- filtro por percentil: marca a los que cumplen, no oculta al resto -->
+        <div x-show="gkShowFilters" class="bg-ink-800 border border-ink-600 rounded-xl p-4 mb-4">
+          <div class="flex items-start justify-between mb-1">
+            <div>
+              <h3 class="font-semibold text-sm">Filtrar por métrica</h3>
+              <p class="text-xs text-gray-400">Poné un rango de percentil en las métricas que quieras: los equipos que cumplan <strong>todos</strong> los rangos quedan marcados en la nube con un anillo celeste. Dejar una métrica en 0–100 es ignorarla. No se oculta a nadie.</p>
+            </div>
+            <button @click="gkClearFilters()" class="text-xs text-gray-400 hover:underline whitespace-nowrap ml-3">Limpiar filtros</button>
+          </div>
+          <p class="text-xs mb-3" :class="gkNFilters() ? 'text-cyan-300' : 'text-gray-500'"
+             x-text="gkNFilters() ? `${gkMatches.length} equipos cumplen los ${gkNFilters()} filtros` : 'Sin filtros activos'"></p>
+          <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
+            <template x-for="m in gkMetrics" :key="'f'+m">
+              <div class="rounded-lg border p-3"
+                   :class="gkFilters[m] ? 'border-racing-500/50 bg-racing-500/5' : 'border-ink-600 bg-ink-900/40'">
+                <div class="flex items-center justify-between gap-2 mb-2">
+                  <span class="text-xs truncate" x-text="gkLabels[m]||m"></span>
+                  <span class="flex items-center gap-1 whitespace-nowrap">
+                    <span class="text-xs font-mono" :class="gkFilters[m]?'text-racing-500':'text-gray-500'"
+                          x-text="`${gkRange(m)[0]}–${gkRange(m)[1]}`"></span>
+                    <button x-show="gkFilters[m]" @click="gkClearOne(m)" class="text-xs text-gray-400 hover:text-gray-100">✕</button>
+                  </span>
+                </div>
+                <div class="rng">
+                  <div class="track"></div>
+                  <div class="fill" :style="`left:${gkRange(m)[0]}%;width:${gkRange(m)[1]-gkRange(m)[0]}%`"></div>
+                  <input type="range" min="0" max="100" :value="gkRange(m)[0]"
+                         @input="gkSetRange(m, +$event.target.value, null)">
+                  <input type="range" min="0" max="100" :value="gkRange(m)[1]"
+                         @input="gkSetRange(m, null, +$event.target.value)">
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <div class="relative bg-ink-800 border border-ink-600 rounded-xl p-2 mb-2" x-ref="gkWrap">
+          <svg x-ref="gkSvg" viewBox="0 0 980 460" class="w-full"></svg>
+          <div x-ref="gkTip" class="absolute hidden pointer-events-none bg-ink-900 border border-ink-600 rounded-lg px-3 py-2 text-xs shadow-xl" style="display:none"></div>
+        </div>
+        <div class="flex flex-wrap gap-4 text-xs text-gray-400 mb-4">
+          <span><span class="inline-block w-3 h-3 rounded-full mr-1 align-middle" style="background:#f59e0b"></span>Equipo focal</span>
+          <span><span class="inline-block w-3 h-3 rounded-full mr-1 align-middle" style="background:#ef4444"></span>Top 20 más similares</span>
+          <span x-show="gkNFilters()"><span class="inline-block w-3 h-3 rounded-full mr-1 align-middle" style="background:transparent;border:2px solid #22d3ee"></span>Cumple los filtros</span>
+        </div>
+
+        <!-- métricas activables -->
+        <div class="mb-4">
+          <div class="flex items-center justify-between mb-2">
+            <h3 class="font-semibold text-sm">Métricas en el cálculo de similitud</h3>
+            <div class="flex gap-2">
+              <button @click="gkOff={}; gkSim()" class="text-xs text-racing-500 hover:underline">Todas</button>
+              <button @click="gkNone()" class="text-xs text-gray-400 hover:underline">Ninguna</button>
+            </div>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <template x-for="m in gkMetrics" :key="m">
+              <button @click="gkToggle(m)"
+                      :class="gkOff[m] ? 'bg-ink-800 text-gray-500 border-ink-600 line-through' : 'bg-racing-500/15 text-racing-500 border-racing-500/40'"
+                      class="border rounded-full px-3 py-1 text-xs"
+                      x-text="gkLabels[m]||m"></button>
+            </template>
+          </div>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-4" x-show="gkFocal">
+          <!-- radar del equipo focal -->
+          <div class="bg-ink-800 border border-ink-600 rounded-xl p-4">
+            <div class="flex items-baseline justify-between mb-1">
+              <h3 class="font-semibold" x-text="gkFocal ? gkFocal.team : ''"></h3>
+              <span class="text-xs text-gray-400" x-text="gkFocal ? `${gkFocal.liga} ${gkFocal.temporada} · ${gkFocal.n_saques} saques` : ''"></span>
+            </div>
+            <svg x-ref="gkRadar" viewBox="0 0 420 420" class="w-full"></svg>
+            <div class="flex flex-wrap gap-3 text-xs text-gray-400 mt-1">
+              <span><span class="inline-block w-2 h-2 rounded-sm mr-1" style="background:#22c55e"></span>Elite (top 10%)</span>
+              <span><span class="inline-block w-2 h-2 rounded-sm mr-1" style="background:#86efac"></span>Sobre la media</span>
+              <span><span class="inline-block w-2 h-2 rounded-sm mr-1" style="background:#fbbf24"></span>Media</span>
+              <span><span class="inline-block w-2 h-2 rounded-sm mr-1" style="background:#f87171"></span>Bajo la media</span>
+            </div>
+          </div>
+
+          <!-- similares -->
+          <div class="bg-ink-800 border border-ink-600 rounded-xl p-4">
+            <h3 class="font-semibold mb-1">Equipos más similares</h3>
+            <p class="text-xs text-gray-400 mb-3" x-text="`Distancia sobre ${gkMetrics.length - Object.keys(gkOff).length} métricas. Click para cambiar el equipo focal.`"></p>
+            <div class="space-y-1 max-h-[420px] overflow-y-auto gk-scroll pr-1">
+              <template x-for="(s,i) in gkSimilar" :key="s.key">
+                <button @click="gkPick(s.key)" class="w-full flex items-center gap-3 px-2 py-1.5 rounded-lg hover:bg-ink-700 text-left">
+                  <span class="w-6 text-xs text-gray-500" x-text="i+1"></span>
+                  <span class="flex-1 min-w-0">
+                    <span class="block text-sm truncate" x-text="`${s.team} (${s.temporada})`"></span>
+                    <span class="block text-xs text-gray-500 truncate" x-text="`${s.liga} · ${s.n_saques} saques`"></span>
+                  </span>
+                  <span class="text-sm font-semibold" :style="`color:${gkSimColor(s.sim)}`" x-text="s.sim.toFixed(1)+'%'"></span>
+                </button>
+              </template>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   </template>
 
@@ -852,6 +1014,11 @@
       lbPool: [], lbPoolLigaIn:'', lbPoolTeamIn:'', lbEscala:'abs', lbAllKeys: [],
       lbBubOn: false, lbB: {lado:'of', recurso:'todos', metrica:'n_intentos'},
       lbSeasons: {}, lbtSeason: '',
+      // Perfiles de saque de puerta (nube global + radar + similares)
+      gkTeams: [], gkMetrics: [], gkLabels: {}, gkLigas: [], gkOff: {},
+      gkFocal: null, gkSimilar: [], gkColor: 'cluster', gkLiga: '', gkBuscar: '',
+      gkError: '', gkLoaded: false,
+      gkShowFilters: false, gkFilters: {}, gkMatches: [],
 
       async init() { await this.loadLeagues(); await this.loadSeasons(false); await this.loadTeams(); this._refreshHealth(); },
       async _getJSON(u){ const r=await fetch(u); if(!r.ok) throw new Error((await r.json().catch(()=>({detail:r.statusText}))).detail); return r.json(); },
@@ -1265,6 +1432,140 @@
           this.lbtResult = await this._getJSON(`/api/lowblock/team?league=${encodeURIComponent(this.lbtLeague)}&equipo=${encodeURIComponent(this.lbtEquipo)}&season=${encodeURIComponent(this.lbtSeason)}`);
         } catch(e){ this.lbtError = 'Error: '+e; }
       },
+
+      // ── Perfiles de saque de puerta ────────────────────���──────────────────
+      async gkLoad(){
+        if (this.gkLoaded) return;
+        try {
+          const d = await this._getJSON('/api/goalkicks/cloud');
+          this.gkTeams=d.teams; this.gkMetrics=d.metrics; this.gkLabels=d.labels; this.gkLigas=d.ligas;
+          this.gkLoaded=true;
+          const racing = this.gkTeams.find(t=>t.team==='Racing de Santander');
+          this.$nextTick(()=>{ this.gkDraw(); if (racing) this.gkPick(racing.key); });
+        } catch(e){ this.gkError='No hay artefactos de saque de puerta: '+e; }
+      },
+      gkActive(){ return this.gkMetrics.filter(m=>!this.gkOff[m]); },
+      gkToggle(m){ if (this.gkOff[m]) delete this.gkOff[m]; else this.gkOff[m]=true; this.gkOff={...this.gkOff}; this.gkSim(); },
+      gkNone(){ const o={}; this.gkMetrics.forEach(m=>o[m]=true); this.gkOff=o; this.gkSimilar=[]; },
+      // ── filtro por rango de percentil ──
+      gkRange(m){ return this.gkFilters[m] || [0,100]; },
+      gkNFilters(){ return Object.keys(this.gkFilters).length; },
+      gkSetRange(m, lo, hi){
+        const cur=this.gkRange(m);
+        let a = lo===null ? cur[0] : lo, b = hi===null ? cur[1] : hi;
+        if (a>b){ if(lo===null) a=b; else b=a; }        // no cruzar los thumbs
+        if (a===0 && b===100) delete this.gkFilters[m]; // 0-100 = ignorar
+        else this.gkFilters[m]=[a,b];
+        this.gkFilters={...this.gkFilters};
+        this.gkApplyFilters();
+      },
+      gkClearOne(m){ delete this.gkFilters[m]; this.gkFilters={...this.gkFilters}; this.gkApplyFilters(); },
+      gkClearFilters(){ this.gkFilters={}; this.gkApplyFilters(); },
+      gkApplyFilters(){
+        const fs=Object.entries(this.gkFilters);
+        this.gkMatches = !fs.length ? [] :
+          this.gkTeams.filter(t=>fs.every(([m,[a,b]])=>{ const v=t.p[m]; return v!=null && v>=a && v<=b; })).map(t=>t.key);
+        this.gkDraw();
+      },
+      gkRandom(){ if(!this.gkTeams.length) return; this.gkPick(this.gkTeams[Math.floor(Math.random()*this.gkTeams.length)].key); },
+      gkSimColor(v){ return v>=85?'#22c55e' : v>=70?'#86efac' : v>=50?'#fbbf24' : '#f87171'; },
+      async gkPick(key){
+        const t = this.gkTeams.find(x=>x.key===key);
+        if (!t) return;
+        this.gkFocal=t; this.gkBuscar=key;
+        await this.gkSim();
+        this.$nextTick(()=>{ this.gkDraw(); this.gkRadar(); });
+      },
+      async gkSim(){
+        if (!this.gkFocal) return;
+        const act=this.gkActive();
+        if (!act.length){ this.gkSimilar=[]; return; }
+        try {
+          const d = await this._getJSON(`/api/goalkicks/similar?team=${encodeURIComponent(this.gkFocal.key)}&metrics=${encodeURIComponent(act.join(','))}&k=20`);
+          this.gkSimilar=d.similar;
+          this.$nextTick(()=>this.gkDraw());
+        } catch(e){ this.gkError='Error en similitud: '+e; }
+      },
+      gkDraw(){
+        const svg=this.$refs.gkSvg, wrap=this.$refs.gkWrap, tip=this.$refs.gkTip;
+        if (!svg || !this.gkTeams.length) return;
+        while (svg.firstChild) svg.removeChild(svg.firstChild);
+        const NS='http://www.w3.org/2000/svg', W=980, H=460, M=14;
+        const xs=this.gkTeams.map(t=>t.x), ys=this.gkTeams.map(t=>t.y);
+        const pad=(a,b)=>{const d=(b-a)||1; return [a-d*0.05, b+d*0.05];};
+        const [x0,x1]=pad(Math.min(...xs),Math.max(...xs)), [y0,y1]=pad(Math.min(...ys),Math.max(...ys));
+        const X=v=>M+(v-x0)/(x1-x0)*(W-2*M), Y=v=>H-M-(v-y0)/(y1-y0)*(H-2*M);
+        const el=(tag,attrs)=>{const e=document.createElementNS(NS,tag);for(const k in attrs)e.setAttribute(k,attrs[k]);svg.appendChild(e);return e;};
+        // 8 tonos para clusters/ligas
+        const PAL=['#60a5fa','#f472b6','#34d399','#fbbf24','#a78bfa','#fb923c','#22d3ee','#f87171'];
+        const ligaIdx={}; this.gkLigas.forEach((l,i)=>ligaIdx[l]=i);
+        const simBy={}; this.gkSimilar.forEach(s=>simBy[s.key]=s.sim);
+        const matchSet=new Set(this.gkMatches);
+        const focal=this.gkFocal;
+        for (const t of this.gkTeams){
+          const isFocal = focal && t.key===focal.key;
+          const isSim = simBy[t.key]!==undefined;
+          const isMatch = matchSet.has(t.key);
+          const dim = this.gkLiga && t.liga!==this.gkLiga;
+          let fill='#9ca3af';
+          if (this.gkColor==='cluster') fill=PAL[t.cluster%PAL.length];
+          else if (this.gkColor==='liga') fill=PAL[(ligaIdx[t.liga]||0)%PAL.length];
+          if (isSim) fill='#ef4444';
+          if (isFocal) fill='#f59e0b';
+          // el anillo celeste del filtro convive con el color de similar/cluster
+          const stroke = isMatch ? '#22d3ee' : (isFocal ? '#111827' : 'none');
+          const sw = isMatch ? 2.5 : (isFocal ? 2 : 0);
+          const c=el('circle',{cx:X(t.x),cy:Y(t.y),r:isFocal?9:(isSim||isMatch?5.5:3.5),fill,
+            'fill-opacity':dim?0.12:(isFocal||isSim||isMatch?1:0.55),
+            stroke, 'stroke-width':sw});
+          c.style.cursor='pointer';
+          c.addEventListener('mousemove',ev=>{
+            const rct=wrap.getBoundingClientRect();
+            tip.style.display='block';
+            tip.style.left=Math.min(ev.clientX-rct.left+14,rct.width-240)+'px';
+            tip.style.top=(ev.clientY-rct.top+10)+'px';
+            const s = simBy[t.key]!==undefined ? `<div class="text-racing-500">${simBy[t.key].toFixed(1)}% similar</div>` : '';
+            const f = isMatch ? `<div class="text-cyan-300">cumple los filtros</div>` : '';
+            tip.innerHTML=`<div class="font-semibold">${t.team}</div><div class="text-gray-400">${t.liga} ${t.temporada}</div><div class="text-gray-500">${t.n_saques} saques</div>${s}${f}`;
+          });
+          c.addEventListener('mouseleave',()=>{ tip.style.display='none'; });
+          c.addEventListener('click',()=>this.gkPick(t.key));
+        }
+        if (focal){
+          const l=el('text',{x:X(focal.x)+12,y:Y(focal.y)+4,'font-size':'12','font-weight':'700',fill:'#fbbf24'});
+          l.textContent=focal.team;
+        }
+      },
+      gkRadar(){
+        const svg=this.$refs.gkRadar;
+        if (!svg || !this.gkFocal) return;
+        while (svg.firstChild) svg.removeChild(svg.firstChild);
+        const NS='http://www.w3.org/2000/svg', C=210, R0=42, R1=175;
+        const el=(tag,attrs)=>{const e=document.createElementNS(NS,tag);for(const k in attrs)e.setAttribute(k,attrs[k]);svg.appendChild(e);return e;};
+        const ms=this.gkMetrics, n=ms.length, step=2*Math.PI/n;
+        const col=p=>p>=90?'#22c55e':p>=65?'#86efac':p>=35?'#fbbf24':'#f87171';
+        // anillos de referencia
+        [0.25,0.5,0.75,1].forEach(f=>el('circle',{cx:C,cy:C,r:R0+(R1-R0)*f,fill:'none',stroke:'#1f2937','stroke-width':1}));
+        ms.forEach((m,i)=>{
+          const p=this.gkFocal.p[m]??0;
+          const a0=i*step-Math.PI/2+0.04, a1=(i+1)*step-Math.PI/2-0.04;
+          const r=R0+(R1-R0)*(p/100);
+          const pt=(rad,ang)=>[C+rad*Math.cos(ang), C+rad*Math.sin(ang)];
+          const [ax,ay]=pt(R0,a0),[bx,by]=pt(r,a0),[cx,cy]=pt(r,a1),[dx,dy]=pt(R0,a1);
+          const off=this.gkOff[m];
+          el('path',{d:`M${ax},${ay} L${bx},${by} A${r},${r} 0 0 1 ${cx},${cy} L${dx},${dy} A${R0},${R0} 0 0 0 ${ax},${ay} Z`,
+            fill:off?'#374151':col(p),'fill-opacity':off?0.35:0.85,stroke:'#111827','stroke-width':1});
+          // valor
+          const [tx,ty]=pt(r-13,(a0+a1)/2);
+          const v=el('text',{x:tx,y:ty+3,'font-size':'9','text-anchor':'middle',fill:'#0b1220','font-weight':'700'});
+          v.textContent=Math.round(p);
+          // label
+          const [lx,ly]=pt(R1+16,(a0+a1)/2);
+          const mid=(a0+a1)/2, anchor=Math.cos(mid)>0.25?'start':(Math.cos(mid)<-0.25?'end':'middle');
+          const t=el('text',{x:lx,y:ly+3,'font-size':'8','text-anchor':anchor,fill:off?'#4b5563':'#9ca3af'});
+          t.textContent=(this.gkLabels[m]||m).replace(/^% /,'').slice(0,26);
+        });
+      },
       async ejRunPost(){
         this.ejPostMsg=''; this.ejPostMsgError=false;
         if (Object.keys(this.ejPartidos).length && !this.ejPartidos[this.league]){ this.ejPostMsg='Esta liga no tiene artefactos de ejes.'; this.ejPostMsgError=true; return; }