feat(sprint-1-5): cierre Etapa 2 - formatPayback + fixes de marca

- Helper formatPayback con 12 casos cubiertos
- Aplicado en RoiKpiBar, drawRoiKpiCards, csv-export
- Auditoría WCAG: ratio 2.22:1, opción D (font-bold) para Etapa 3
- Adelanto: strings 'InQ ROI' y 'Powered by InQuality' en footers PDF
- Threshold ROI: '1.000%' sin decimal
- 455 tests verdes + 2 E2E

Refs: sprints/sprint-1-5/ETAPA_2_PROMPT.md

tests/e2e/screenshots-etapa-3.spec.ts

@@ -0,0 +1,134 @@
+/**
+ * Screenshots de validación visual — Etapa 3 Sprint 1.5.
+ *
+ * Captura 8 vistas que demuestran la identidad InQ aplicada en el web app:
+ *  1. e3-workspace.png           — topbar + CTAs naranjas bold
+ *  2. e3-switch-on.png           — ActivityPanel switch ON (caja naranja)
+ *  3. e3-report-tabs.png         — tab activo naranja en reporte
+ *  4. e3-roi-kpi-hero.png        — KPI Hero con gradiente naranja→magenta
+ *  5. e3-comparison-table.png    — tabla comparativa con header naranja
+ *  6. e3-cumulative-chart.png    — gráfico acumulado con línea naranja
+ *  7. e3-donut-chart.png         — donut directo/overhead (naranja/slate)
+ *  8. e3-transparency.png        — TransparencySection con ROI > 1000%
+ */
+import { test } from '@playwright/test'
+import { resolve } from 'path'
+import { mkdirSync } from 'fs'
+import { fileURLToPath } from 'url'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+const BPMN_DIR = resolve(__dirname, '../../public/sample-processes')
+const OUT_DIR = resolve(__dirname, '../screenshots/etapa-3')
+
+test.beforeAll(() => { mkdirSync(OUT_DIR, { recursive: true }) })
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+async function importBpmn(page: import('@playwright/test').Page, filename: string) {
+  await page.goto('/')
+  await page.locator('#bpmn-file-input').setInputFiles(resolve(BPMN_DIR, filename))
+  await page.waitForURL(/\/workspace\//, { timeout: 15_000 })
+  await page.waitForSelector('button:has-text("Simular")', { timeout: 10_000 })
+  await page.waitForTimeout(800)
+}
+
+async function setActivityCosts(
+  page: import('@playwright/test').Page,
+  elementId: string,
+  directCost: number,
+  automatedCost: number
+) {
+  await page.locator(`[data-element-id="${elementId}"]`).first().click()
+  await page.waitForTimeout(400)
+  const toggle = page.getByRole('switch', { name: /automatizable/i })
+  if (await toggle.getAttribute('aria-checked') === 'false') await toggle.click()
+  await page.waitForTimeout(200)
+  await page.getByLabel(/Costo directo fijo/i).fill(String(directCost))
+  await page.getByLabel(/Costo automatizado/i).fill(String(automatedCost))
+  await page.getByLabel(/Tiempo automatizado/i).fill('10')
+  await page.getByRole('button', { name: /Guardar/i }).click()
+  await page.waitForTimeout(400)
+}
+
+async function configureGlobal(page: import('@playwright/test').Page, freq: number, inv: number) {
+  await page.getByRole('tab', { name: /Global/i }).click()
+  await page.waitForTimeout(300)
+  await page.getByLabel(/Frecuencia anual/i).fill(String(freq))
+  await page.getByLabel(/Inversión en automatización/i).fill(String(inv))
+  await page.getByRole('button', { name: /Guardar/i }).click()
+  await page.waitForTimeout(400)
+}
+
+async function goToRoiTab(page: import('@playwright/test').Page) {
+  const roiTab = page.getByRole('tab', { name: /Comparación/i })
+  await roiTab.click()
+  await page.waitForSelector('[data-testid="roi-kpi-card"]', { timeout: 10_000 })
+  await page.waitForTimeout(600)
+}
+
+// ─── 1. Workspace — topbar + CTAs ─────────────────────────────────────────────
+
+test('e3-1: workspace — CTAs naranjas bold', async ({ page }) => {
+  await importBpmn(page, 'simple-linear.bpmn')
+  await page.waitForTimeout(500)
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-workspace.png'), fullPage: false })
+})
+
+// ─── 2. Switch ON en ActivityPanel ────────────────────────────────────────────
+
+test('e3-2: switch ON — caja automatización naranja', async ({ page }) => {
+  await importBpmn(page, 'simple-linear.bpmn')
+  await page.locator('[data-element-id="task1"]').first().click()
+  await page.waitForTimeout(400)
+  const toggle = page.getByRole('switch', { name: /automatizable/i })
+  if (await toggle.getAttribute('aria-checked') === 'false') await toggle.click()
+  await page.waitForTimeout(300)
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-switch-on.png'), fullPage: false })
+})
+
+// ─── 3-8. Setup realista para los screenshots del reporte ─────────────────────
+
+test('e3-3-to-8: reporte — 6 screenshots del tab ROI', async ({ page }) => {
+  await importBpmn(page, 'medium-with-gateways.bpmn')
+  await setActivityCosts(page, 'task_recv', 200, 20)
+  await setActivityCosts(page, 'task_score', 200, 20)
+  await setActivityCosts(page, 'task_analisis', 200, 20)
+  await configureGlobal(page, 5000, 80000)
+
+  const simBtn = page.getByRole('button', { name: 'Simular' })
+  await simBtn.click()
+  await page.waitForURL(/\/report\//, { timeout: 20_000 })
+  await page.waitForSelector('button:has-text("Exportar PDF")', { timeout: 15_000 })
+  await page.waitForTimeout(800)
+
+  // 3. Tabs
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-report-tabs.png'), fullPage: false })
+
+  await goToRoiTab(page)
+
+  // 4. KPI Hero
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-roi-kpi-hero.png'), fullPage: false })
+
+  // 5. Comparison Table (scroll down)
+  await page.evaluate(() => window.scrollBy(0, 420))
+  await page.waitForTimeout(300)
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-comparison-table.png'), fullPage: false })
+
+  // 6. Cumulative chart (scroll to charts section)
+  await page.evaluate(() => window.scrollBy(0, 500))
+  await page.waitForTimeout(400)
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-cumulative-chart.png'), fullPage: false })
+
+  // 7. Donut chart (actual tab)
+  await page.getByRole('tab', { name: 'Actual' }).click()
+  await page.waitForTimeout(600)
+  await page.evaluate(() => window.scrollTo(0, 0))
+  await page.waitForTimeout(300)
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-donut-chart.png'), fullPage: false })
+
+  // 8. Transparency section — ROI > 1000% (back to ROI tab, scroll to bottom)
+  await goToRoiTab(page)
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
+  await page.waitForTimeout(500)
+  await page.screenshot({ path: resolve(OUT_DIR, 'e3-transparency.png'), fullPage: false })
+})