feat(sprint-5/etapa-3): heatmap gradiente 4 stops + modo percentil + localStorage + fix zoom

- colors.ts: gradiente continuo verde→amarillo→naranja→rojo (interpolación N-stops genérica)
- Renombra modos: relative→percentile (rank-based), absolute→minmax
- Hook useHeatmapMode(): persiste selección en localStorage con clave inq-roi:heatmap-mode
- HeatmapLegend: barra de 4 stops, labels P0/P50/P100 en modo percentil
- HeatmapModeToggle: etiquetas "Percentil" / "Min-max"
- pdf-sections.ts: leyenda PDF con 4 stops interpolados
- BpmnCanvas: controles de zoom movidos a esquina inferior izquierda (evita logo bpmn.io)
- Tests: 528 unitarios pasan; E2E recalibrados con vecino más cercano (distancia euclidiana)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tests/e2e/export-pdf.spec.ts

@@ -258,32 +258,56 @@ async function extractJpegFromPdf(pdfBuf: Buffer): Promise<Buffer> {
 
 /**
  * Cuenta píxeles por categoría de color en un buffer JPEG.
- * Umbrales calibrados para los colores del heatmap con opacity 0.82 sobre #f8fafc.
+ * Recalibrado Sprint 5 Etapa 3 — gradiente de 4 stops (verde→amarillo→naranja→rojo).
+ * Colores de referencia con opacity 0.82 sobre fondo #f8fafc (blend = bg·0.18 + color·0.82):
  *
- *   Verde   (#10b981 + bg) → RGB ≈ (58, 197, 152)  → G > R·1.4, G > 120
- *   Ámbar   (#f59e0b + bg) → RGB ≈ (246, 175, 54)  → R > 180, G > 120, B < 120, R/G < 1.8
- *   Rojo    (#ef4444 + bg) → RGB ≈ (241, 101, 101) → R > G·1.8, R > B·1.8, R > 180
+ *   Verde   (#10b981 + bg) → RGB ≈ (58, 197, 151)
+ *   Amarillo(#f59e0b + bg) → RGB ≈ (246, 175, 54)
+ *   Naranja (#f97316 + bg) → RGB ≈ (249, 139, 63)
+ *   Rojo    (#ef4444 + bg) → RGB ≈ (241, 101, 101)
+ *
+ * Clasificación por vecino más cercano (distancia euclidiana en RGB) en vez de desigualdades
+ * ad-hoc: con 4 stops, amarillo y naranja quedan demasiado cerca para distinguirlos con
+ * reglas simples de umbral. MAX_DIST excluye fondo/texto/bordes que no son parte del heatmap.
  */
+const HEAT_REF_COLORS = {
+  green: { r: 58, g: 197, b: 151 },
+  amber: { r: 246, g: 175, b: 54 },
+  orange: { r: 249, g: 139, b: 63 },
+  red: { r: 241, g: 101, b: 101 },
+} as const
+
+const MAX_HEAT_COLOR_DIST = 40
+
+function colorDistance(a: { r: number; g: number; b: number }, b: { r: number; g: number; b: number }): number {
+  return Math.sqrt((a.r - b.r) ** 2 + (a.g - b.g) ** 2 + (a.b - b.b) ** 2)
+}
+
 async function analyzeJpegColors(jpegBuf: Buffer): Promise<{
-  greenPx: number; amberPx: number; redPx: number; total: number
+  greenPx: number; amberPx: number; orangePx: number; redPx: number; total: number
 }> {
   const { data, info } = await sharp(jpegBuf).raw().toBuffer({ resolveWithObject: true })
   const ch = info.channels  // 3 para JPEG (RGB)
-  let greenPx = 0, amberPx = 0, redPx = 0
+  let greenPx = 0, amberPx = 0, orangePx = 0, redPx = 0
 
   for (let i = 0; i < data.length; i += ch) {
-    const r = data[i], g = data[i + 1], b = data[i + 2]
+    const px = { r: data[i], g: data[i + 1], b: data[i + 2] }
 
-    if (g > r * 1.4 && g > 120 && g > b) {
-      greenPx++                                              // Verde
-    } else if (r > 180 && g > 120 && b < 120 && r > g && r < g * 1.8) {
-      amberPx++                                             // Ámbar / amarillo cálido
-    } else if (r > g * 1.8 && r > b * 1.8 && r > 180) {
-      redPx++                                               // Rojo
+    let closestName: keyof typeof HEAT_REF_COLORS | null = null
+    let closestDist = Infinity
+    for (const [name, ref] of Object.entries(HEAT_REF_COLORS) as Array<[keyof typeof HEAT_REF_COLORS, typeof HEAT_REF_COLORS['green']]>) {
+      const dist = colorDistance(px, ref)
+      if (dist < closestDist) { closestDist = dist; closestName = name }
     }
+    if (closestDist > MAX_HEAT_COLOR_DIST) continue
+
+    if (closestName === 'green') greenPx++
+    else if (closestName === 'amber') amberPx++
+    else if (closestName === 'orange') orangePx++
+    else if (closestName === 'red') redPx++
   }
 
-  return { greenPx, amberPx, redPx, total: data.length / ch }
+  return { greenPx, amberPx, orangePx, redPx, total: data.length / ch }
 }
 
 // ─── Test: gradiente real con costos dispares ─────────────────────────────────
@@ -366,6 +390,13 @@ test('Heatmap con gradiente real — medium-with-gateways.bpmn', async ({ page }
   await page.waitForURL(/\/report\//, { timeout: 20_000 })
   await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 20_000 })
 
+  // Forzar modo Min-max: este test verifica la mecánica del gradiente de color con
+  // costos diseñados para posicionarse proporcionalmente (task_analisis a la mitad
+  // del rango). El modo 'percentile' (default desde Sprint 5 Etapa 3) normaliza por
+  // rango/rank, no por valor — rompería la posición esperada de "mitad" del fixture.
+  await page.getByRole('button', { name: 'Min-max' }).click()
+  await page.waitForTimeout(300)
+
   // ── 5. Esperar a que el heatmap tenga colores reales (no neutro #cbd5e1) ────
   // Usamos style.fill (inline CSS) porque applyHeatmapToViewer ahora lo usa
   // en vez de setAttribute (para garantizar mayor especificidad que bpmn-js CSS).
@@ -407,14 +438,18 @@ test('Heatmap con gradiente real — medium-with-gateways.bpmn', async ({ page }
   const jpegBuf = await extractJpegFromPdf(pdfBuf)
   console.log(`   JPEG extraído: ${jpegBuf.length} bytes`)
 
-  const { greenPx, amberPx, redPx, total } = await analyzeJpegColors(jpegBuf)
+  const { greenPx, amberPx, orangePx, redPx, total } = await analyzeJpegColors(jpegBuf)
   console.log(`   Total píxeles: ${total.toLocaleString()}`)
-  console.log(`   🟢 Verde:  ${greenPx.toLocaleString()} px`)
-  console.log(`   🟡 Ámbar:  ${amberPx.toLocaleString()} px`)
-  console.log(`   🔴 Rojo:   ${redPx.toLocaleString()} px`)
+  console.log(`   🟢 Verde:   ${greenPx.toLocaleString()} px`)
+  console.log(`   🟡 Ámbar:   ${amberPx.toLocaleString()} px`)
+  console.log(`   🟠 Naranja: ${orangePx.toLocaleString()} px`)
+  console.log(`   🔴 Rojo:    ${redPx.toLocaleString()} px`)
 
   const MIN_PX = 100
   expect(greenPx, `Píxeles verdes en heatmap (≥ ${MIN_PX}): ${greenPx}`).toBeGreaterThanOrEqual(MIN_PX)
   expect(amberPx, `Píxeles ámbar en heatmap (≥ ${MIN_PX}): ${amberPx}`).toBeGreaterThanOrEqual(MIN_PX)
   expect(redPx,   `Píxeles rojos en heatmap (≥ ${MIN_PX}): ${redPx}`).toBeGreaterThanOrEqual(MIN_PX)
+  // orangePx no se exige con mínimo estricto: con solo 11 actividades el stop naranja
+  // (t=0.67) puede no tener ninguna actividad exactamente ahí — alcanza con que exista
+  // la transición suave entre amarillo y rojo (lo prueban los tests unitarios de colors.ts).
 })