{
  const searchInput = html`<input type="text" placeholder="Ej. Oaxaca, Guerrero..."
    style="padding: 0.5rem 0.65rem; border: 1px solid #d1d5db; border-radius: 6px;
           font-family: Inter, sans-serif; font-size: 0.95rem;
           width: min(400px, 100%); outline: none;
           transition: border-color 0.2s, box-shadow 0.2s;">`;
           
  searchInput.addEventListener("focus", () => {
    searchInput.style.borderColor = "#78350F";
    searchInput.style.boxShadow = "0 0 0 3px rgba(120, 53, 15, 0.12)";
  });
  
  searchInput.addEventListener("blur", () => {
    searchInput.style.borderColor = "#d1d5db";
    searchInput.style.boxShadow = "none";
  });

  const searchRow = html`<label style="display:flex; gap:0.75rem; align-items:center;
    font-family:Inter, sans-serif; font-weight:600; color:#1a1a1a;
    font-size:0.95rem; margin:0; padding:0; flex-wrap:wrap;">
    <span>Busca tu municipio o entidad federativa:</span>${searchInput}</label>`;

  const chartWrapper = html`<div style="flex:1; position:relative; min-height:420px; width:100%; margin-top:0.5rem;"></div>`;
  const chartEl = html`<div style="position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;"></div>`;
  chartWrapper.append(chartEl);

  const container = html`<div style="display:flex; flex-direction:column;
    height:100%; width:100%; padding:0.25rem 0;"></div>`;

  container.append(searchRow, chartWrapper);

  // Tooltip HTML personalizado — Plot.tip NO soporta fill dinámico por canal
  // (doc oficial: "tip mark does not support the standard style channels such as varying fill").
  // Implementamos tooltip como <div> con hit-testing por búsqueda lineal O(n).
  const tooltip = html`<div style="
    position:absolute; pointer-events:none; opacity:0; left:0; top:0;
    padding:0.55rem 0.8rem; border-radius:8px;
    font-family:Inter,sans-serif; font-size:11.5px; line-height:1.55;
    box-shadow:0 6px 20px rgba(0,0,0,0.22);
    z-index:30; max-width:280px; white-space:nowrap;
    transition:opacity 0.08s ease-out;
    border:1.5px solid rgba(255,255,255,0.35);"></div>`;
  chartWrapper.append(tooltip);

  // Interpolador de color idéntico a la escala de Plot [0,35,65,100] → verde→naranja→rojo→rojo oscuro
  function severityColor(v) {
    const stops = [
      [0,   [39, 174, 96]],
      [35,  [243, 156, 18]],
      [65,  [231, 76, 60]],
      [100, [127, 29, 29]]
    ];
    v = Math.max(0, Math.min(100, v || 0));
    for (let i = 1; i < stops.length; i++) {
      const [s0, c0] = stops[i - 1];
      const [s1, c1] = stops[i];
      if (v <= s1) {
        const t = (v - s0) / (s1 - s0);
        const rr = Math.round(c0[0] + (c1[0] - c0[0]) * t);
        const gg = Math.round(c0[1] + (c1[1] - c0[1])  * t);
        const bb = Math.round(c0[2] + (c1[2] - c0[2])  * t);
        return `rgb(${rr},${gg},${bb})`;
      }
    }
    return 'rgb(127,29,29)';
  }

  // Contraste automático vía luminancia YIQ — el naranja necesita texto oscuro, el resto blanco
  function textColorFor(bg) {
    const [r, g, b] = bg.match(/\d+/g).map(Number);
    const y = 0.299 * r + 0.587 * g + 0.114 * b;
    return y > 150 ? '#0f172a' : '#ffffff';
  }

  // Estado compartido entre render() y handler de mousemove
  // pointsWithPx: Array<{d, px, py}> — posiciones en píxeles precomputadas
  let pointsWithPx = [];
  let svgCache = null;

  function render() {
    const q = searchInput.value.trim().toLowerCase();
    const hasSearch = q !== "";
    const ok = d =>
      (d.Municipio || "").toLowerCase().includes(q) ||
      (d.Estado || "").toLowerCase().includes(q);

    const activos = hasSearch ? municipios_scatter.filter(ok) : municipios_scatter;
    const inactivos = hasSearch ? municipios_scatter.filter(d => !ok(d)) : [];

    const top5_peores = municipios_scatter
      .slice()
      .sort((a, b) => (b.severidad || 0) - (a.severidad || 0))
      .slice(0, 5);

    const w = chartEl.clientWidth || 800;
    const h = (chartEl.clientHeight || 420) - 60;

    const plotFig = Plot.plot({
      width: w,
      height: h,
      marginLeft: 60,
      marginBottom: 50,
      x: { label: "% Sin Agua Entubada (CONAGUA)", grid: true },
      y: { label: "% en Pobreza Extrema (CONEVAL)", grid: true },
      color: {
        type: "linear",
        domain: [0, 35, 65, 100],
        range: ["#27ae60", "#f39c12", "#e74c3c", "#7f1d1d"],
        label: "Índice de Severidad",
        legend: true
      },
      marks: [
        Plot.dot(inactivos, {
          x: "carencia_agua_conagua_pct",
          y: "Pobreza_extrema_pct",
          fill: "#cccccc",
          opacity: 0.15,
          r: 4
        }),
        Plot.dot(activos, {
          x: "carencia_agua_conagua_pct",
          y: "Pobreza_extrema_pct",
          fill: "severidad",
          stroke: "rgba(255,255,255,0.4)",
          strokeWidth: 1,
          r: 4,
          opacity: 0.85
        }),
        Plot.arrow(top5_peores, {
          x1: (d, i) => d.carencia_agua_conagua_pct - (27 - (i * 2)),
          y1: (d, i) => d.Pobreza_extrema_pct + (18 - (i * 1)),
          x2: "carencia_agua_conagua_pct",
          y2: "Pobreza_extrema_pct",
          bend: true,
          stroke: "#4b5563",
          strokeWidth: 1.5,
          headLength: 5
        }),
        Plot.text(top5_peores, {
          x: (d, i) => d.carencia_agua_conagua_pct - (27 - (i * 2)),
          y: (d, i) => d.Pobreza_extrema_pct + (18 - (i * 1)),
          text: d => `${d.Municipio},\n${d.Estado}`,
          textAnchor: "end",
          dx: -4,
          lineHeight: 1.1,
          fill: "#1f2937",
          fontSize: 10,
          fontFamily: "Inter, sans-serif",
          fontWeight: 600,
          stroke: "white",
          strokeWidth: 4
        }),
        // Halo al hover — Plot.dot SÍ soporta fill por canal
        Plot.dot(activos, Plot.pointer({
          x: "carencia_agua_conagua_pct",
          y: "Pobreza_extrema_pct",
          fill: "severidad",
          r: 8,
          stroke: "white",
          strokeWidth: 2
        }))
      ]
    });

    chartEl.replaceChildren(plotFig);

    // Plot con legend:true retorna <figure> con MÚLTIPLES <svg> (legend ramp + plot).
    // Elegimos el SVG más grande (el plot principal) — querySelector('svg') agarraba el legend.
    let svgEl = null;
    if (plotFig.tagName && plotFig.tagName.toLowerCase() === 'svg') {
      svgEl = plotFig;
    } else {
      const svgs = plotFig.querySelectorAll('svg');
      let maxArea = -1;
      for (const s of svgs) {
        const r = s.getBoundingClientRect();
        const area = (r.width || 0) * (r.height || 0);
        if (area > maxArea) { maxArea = area; svgEl = s; }
      }
      // Fallback si todos tienen dimensiones 0 (no-rendered yet): el último
      if (!svgEl && svgs.length > 0) svgEl = svgs[svgs.length - 1];
    }

    if (!svgEl) {
      console.warn('[scatter-tip] no SVG en plotFig');
      pointsWithPx = [];
      svgCache = null;
      return;
    }

    // Extraer escalas — API oficial Plot 0.6.11: plot.scale(name).apply(value) → pixel
    let xApply = null, yApply = null;
    try {
      const xs = plotFig.scale("x");
      const ys = plotFig.scale("y");
      if (xs && typeof xs.apply === "function") xApply = v => xs.apply(v);
      if (ys && typeof ys.apply === "function") yApply = v => ys.apply(v);
      if (xApply && yApply) {
        const tx = xApply(50), ty = yApply(50);
        if (!Number.isFinite(tx) || !Number.isFinite(ty)) { xApply = null; yApply = null; }
      }
    } catch (err) { /* fallback below */ }

    // Fallback: reconstruir escala lineal manualmente si plot.scale falla
    if (!xApply || !yApply) {
      const xVals = municipios_scatter.map(d => d.carencia_agua_conagua_pct || 0);
      const yVals = municipios_scatter.map(d => d.Pobreza_extrema_pct || 0);
      const xMax = Math.max(...xVals);
      const yMax = Math.max(...yVals);
      const actualW = svgEl.clientWidth || w;
      const actualH = svgEl.clientHeight || h;
      const marginL = 60, marginR = 20, marginT = 20, marginB = 50;
      xApply = v => marginL + (v / xMax) * (actualW - marginL - marginR);
      yApply = v => (actualH - marginB) - (v / yMax) * (actualH - marginB - marginT);
    }

    // Precomputar posiciones en píxeles + filtrar NaN (si domain no matchea datos)
    pointsWithPx = activos
      .map(d => ({
        d,
        px: xApply(d.carencia_agua_conagua_pct),
        py: yApply(d.Pobreza_extrema_pct)
      }))
      .filter(p => Number.isFinite(p.px) && Number.isFinite(p.py));

    svgCache = svgEl;
    svgEl.style.cursor = "crosshair";
    // Listener backup directo en SVG por si chartWrapper pierde eventos
    svgEl.addEventListener("mousemove", handleMouseMove);
  }

  function handleMouseMove(event) {
    if (!svgCache || pointsWithPx.length === 0) {
      tooltip.style.opacity = 0;
      return;
    }

    const svgRect = svgCache.getBoundingClientRect();
    const mx = event.clientX - svgRect.left;
    const my = event.clientY - svgRect.top;

    if (mx < 0 || my < 0 || mx > svgRect.width || my > svgRect.height) {
      tooltip.style.opacity = 0;
      return;
    }

    // Búsqueda lineal O(n) — 2469 puntos × 60fps = 148k ops/s, trivial
    let bestIdx = -1;
    let bestDist = Infinity;
    for (let i = 0; i < pointsWithPx.length; i++) {
      const p = pointsWithPx[i];
      const dx = p.px - mx;
      const dy = p.py - my;
      const dist = dx * dx + dy * dy;
      if (dist < bestDist) {
        bestDist = dist;
        bestIdx = i;
      }
    }

    // Umbral 40px (1600 = 40²)
    if (bestIdx < 0 || bestDist > 1600) {
      tooltip.style.opacity = 0;
      return;
    }

    const pt = pointsWithPx[bestIdx].d;

    const bg = severityColor(pt.severidad);
    const fg = textColorFor(bg);
    tooltip.style.background = bg;
    tooltip.style.color = fg;
    tooltip.innerHTML =
      `<div style="font-weight:700;margin-bottom:3px;">${pt.Municipio}, ${pt.Estado}</div>` +
      `<div style="opacity:0.92;">RHA: ${pt.RHA}</div>` +
      `<div style="opacity:0.92;">Población: ${pt.poblacion_total.toLocaleString("es-MX")}</div>` +
      `<div style="opacity:0.92;">Clasificación: ${pt.clasificacion_rural}</div>` +
      `<div style="margin-top:3px;font-weight:600;">Severidad: ${pt.severidad}</div>` +
      `<div>% Sin Agua: ${pt.carencia_agua_conagua_pct}%</div>` +
      `<div>% Pobreza Extrema: ${pt.Pobreza_extrema_pct}%</div>`;

    // Medir después de set innerHTML (offsetWidth/Height funcionan con opacity:0)
    const tipW = tooltip.offsetWidth;
    const tipH = tooltip.offsetHeight;

    // Posicionar relativo a chartWrapper (donde vive el tooltip)
    const wrapperRect = chartWrapper.getBoundingClientRect();
    const localX = event.clientX - wrapperRect.left;
    const localY = event.clientY - wrapperRect.top;

    let tx = localX + 14;
    let ty = localY + 14;
    if (tx + tipW > wrapperRect.width) tx = localX - tipW - 14;
    if (ty + tipH > wrapperRect.height) ty = localY - tipH - 14;
    if (tx < 0) tx = 4;
    if (ty < 0) ty = 4;

    tooltip.style.left = `${tx}px`;
    tooltip.style.top = `${ty}px`;
    tooltip.style.opacity = 1;
  }

  chartWrapper.addEventListener("mousemove", handleMouseMove);
  chartWrapper.addEventListener("mouseleave", () => { tooltip.style.opacity = 0; });

  searchInput.addEventListener("input", render);
  requestAnimationFrame(() => requestAnimationFrame(render));

  const ro = new ResizeObserver(() => render());
  ro.observe(chartWrapper);

  invalidation.then(() => {
    ro.disconnect();
    chartWrapper.removeEventListener("mousemove", handleMouseMove);
  });

  return container;
}