inq-roi-simulador-web/sprints/sprint-1-5/ETAPA_8_PROMPT.md

Sprint 1.5 — Etapa 8: PDFs Actual y Automatizado con identidad InQ

Objetivo: aplicar el sistema de design InQ a los PDFs Actual y Automatizado de forma consistente con el PDF ROI, manteniendo una jerarquía visual clara: el PDF ROI es el "reporte de cierre" (con KPI Hero gradiente), los PDFs Actual/Automatizado son "reportes de soporte" (con paleta consistente pero sin gradiente).

Pre-requisitos: Etapas 1-7 cerradas. Sistema de design tokens InQ disponible. Módulo pdf-sections-shared.ts con header/footer compartidos. Layout híbrido funcionando (portrait/landscape/portrait/portrait).

Etapa siguiente: Etapa 9 — Badge ⚡ naranja en BpmnCanvas del web app.

---

1. Decisión arquitectónica de esta etapa

Jerarquía visual entre los 3 PDFs del producto:

PDF	Rol	Tratamiento visual
ROI	Reporte de cierre / discusión con cliente	KPI Hero gradiente, banner narrativo, top 3, trayectoria
Actual	Reporte de soporte: detalla escenario actual	Paleta InQ + cards consistentes, SIN KPI Hero gradiente
Automatizado	Reporte de soporte: detalla escenario automatizado	Paleta InQ + cards consistentes, SIN KPI Hero gradiente

Justificación: si los 3 PDFs tuvieran KPI Hero gradiente, el impacto del ROI se diluye. El gradiente debe ser exclusivo del "reporte principal" para que funcione como anchor visual.

---

2. Alcance estricto

Sí entra

• ✅ Página 1 de PDFs Actual/Automatizado: aplicar paleta InQ a las 4 KPI cards (Costo Total, Directo/Overhead, Tiempo, Actividades)
• ✅ Página 1: header denso similar al ROI (con título "ANÁLISIS DE COSTOS — ESCENARIO ACTUAL" / "ESCENARIO AUTOMATIZADO")
• ✅ Página 3 (Análisis de composición + Tabla): aplicar paleta InQ a tabla, mantener estructura
• ✅ Página 4 (Nota metodológica): aplicar paleta InQ al título y tipografía
• ✅ Estilo de KPI cards de página 1 consistente con el grid 2x2 del ROI (fondo #FEF3E2, labels #92400E, cifras #0F172A)
• ✅ Mantener footer compartido (Etapa 4) — sin cambios
• ✅ Mantener página 2 landscape con diagrama BPMN — sin cambios estructurales

NO entra

• ❌ KPI Hero gradiente en página 1 — exclusivo del PDF ROI
• ❌ Banner narrativo en página 1 — los PDFs Actual/Automatizado no narran resultado de inversión
• ❌ Top 3 actividades con barras horizontales en página 1 — los PDFs ya tienen tabla detallada
• ❌ Cambios al PDF ROI (cerrado en Etapas 6 y 7)
• ❌ Cambios al diagrama BPMN landscape (cerrado en Etapa 5)
• ❌ Resolver fórmulas truncadas o Unicode roto (Sprint 2)
• ❌ Cambios al web app (no es scope de esta etapa)

---

3. Decisiones ya tomadas (no consultar de nuevo)

Decisión	Justificación
PDFs Actual/Automatizado mantienen 4 páginas	Sin cambios estructurales
KPI cards de página 1 usan paleta InQ (fondo #FEF3E2)	Consistencia con grid 2x2 del ROI
NO incluir gradiente naranja → magenta en estos PDFs	Decisión Camino B — preserva jerarquía visual
Título de página 1 diferencia el escenario	"ANÁLISIS DE COSTOS — ESCENARIO ACTUAL" vs "ESCENARIO AUTOMATIZADO"
Tabla página 3 con header naranja claro #FFF8ED + border #F59845	Mismo tratamiento que tabla del ROI Etapa 7
Nota metodológica página 4 con título naranja oscuro	Mismo tratamiento que nota del ROI Etapa 7

---

4. Especificación detallada por página

4.1 Página 1 — Header denso + KPI cards

Estado actual (post-Etapa 7):

• Header básico con "InQ ROI" y "medium-with-gateways"
• 4 KPI cards en grid 2x2 (Costo Total, Directo/Overhead, Tiempo, Actividades)
• KPI "Costo Total" con cifra en naranja (decisión retroactiva de Etapa 4)
• Footer estándar

Cambios en Etapa 8:

Header denso (similar al ROI página 1, sin subtítulo de "Análisis de retorno")

Layout: flex justify-between, border-bottom 3px solid #F59845
Padding-bottom: 12mm
Margin-bottom: 14mm

Izquierda (60% ancho):
  Línea 1: "InQ ROI"
    - Tamaño: 22pt
    - Peso: 700 (bold)
    - Color: #F59845
    - Tracking: -0.5pt
  Línea 2: "ANÁLISIS DE COSTOS — ESCENARIO ACTUAL"
           (o "ANÁLISIS DE COSTOS — ESCENARIO AUTOMATIZADO")
    - Tamaño: 9pt
    - Peso: 500
    - Color: #94A3B8 (text-tertiary)
    - Letter-spacing: 1.5pt
    - Margin-top: 4mm

Derecha (40% ancho):
  Línea 1: "UN PRODUCTO DE"
    - Tamaño: 9pt
    - Color: #94A3B8
    - Letter-spacing: 1pt
    - Align: right
  Línea 2: "InQ"
    - Tamaño: 16pt
    - Peso: 700
    - Color: #475569
    - Align: right
  Línea 3: "InQuality"
    - Tamaño: 9pt
    - Color: #64748B
    - Align: right

Strip de metadata (similar al ROI)

Fondo: #FAFBFC
Padding: 8mm horizontal, 5mm vertical
Border-radius: 4mm
Layout: grid 3 columnas (proceso 2fr, fecha 1fr, moneda 1fr)
Margin-bottom: 10mm

Cada celda:
  Label (top): 8pt, color #94A3B8, uppercase, letter-spacing 1pt
  Valor (bottom): 11pt, peso 500, color #0F172A

Contenido:

• Proceso: nombre del proceso BPMN
• Fecha: fecha de simulación
• Moneda: USD u otra

Grid 2x2 de KPI cards (estilo consistente con ROI página 1)

Layout: grid 2 columnas × 2 filas
Gap: 4mm horizontal, 4mm vertical
Margin-bottom: 10mm

Cada card:
  Fondo: #FEF3E2 (inq-orange-light)
  Padding: 10mm 12mm
  Border-radius: 4mm
  
  Label superior:
    - Tamaño: 9pt
    - Peso: 500
    - Color: #92400E (inq-orange-dark)
    - Letter-spacing: 1pt
    - Uppercase
    - Margin-bottom: 5mm
  
  Cifra:
    - Tamaño: 18pt
    - Peso: 700 (bold)
    - Color: #0F172A
    - Font-family: mono (alineación)
  
  Subtítulo (opcional, contexto):
    - Tamaño: 9pt
    - Peso: 400
    - Color: #B45309 (inq-orange-dark)
    - Margin-top: 3mm

Contenido de los 4 cards (mismo orden actual):

Card	Label	Cifra	Subtítulo
1	COSTO TOTAL ESPERADO	formatCurrency(totalCost)	(vacío)
2	COSTO DIRECTO / OVERHEAD	formatCurrency(direct) / formatCurrency(overhead)	{percentDirect}% directo
3	TIEMPO TOTAL ESPERADO	{totalMinutes} min	(vacío)
4	ACTIVIDADES COSTEADAS	{count}	(vacío)

Importante: la altura de página 1 con header denso + metadata strip + grid 2x2 debe dejar espacio razonable abajo (no apretar contra el footer). Si no entra, el grid pasa a una sola columna apilada, o reducir padding de cards. Reportar la decisión.

4.2 Página 2 — Diagrama BPMN landscape (sin cambios)

Mantener tal como quedó en Etapa 5. NO TOCAR.

Validar visualmente que sigue funcionando correctamente.

4.3 Página 3 — Análisis de composición + Tabla

Estado actual (post-Etapa 5):

• "Análisis de composición: 83.3% directo (USD 500,00) · 16.7% overhead (USD 100,00)"
• "Top 3 actividades por costo: 1. ... 2. ... 3. ..."
• "Sin recursos asignados (costos son fijos por actividad)"
• Tabla con header simple y filas

Cambios en Etapa 8:

Sección "Análisis de composición" (tratamiento ligero)

Título:
  - Texto: "ANÁLISIS DE COMPOSICIÓN"
  - Tamaño: 11pt
  - Peso: 500
  - Color: #92400E (inq-orange-dark)
  - Letter-spacing: 1pt
  - Uppercase
  - Margin-bottom: 6mm

Texto descriptivo:
  - Tamaño: 11pt
  - Color: #0F172A
  - Line-height: 1.5
  - Margin-bottom: 4mm

Tabla (mismo tratamiento que tabla del ROI Etapa 7)

TABLA (autotable):

Header row:
  - Fondo: #FFF8ED (inq-orange-lighter)
  - Border-bottom: 1.5pt solid #F59845
  - Padding: 8pt 6pt
  - Texto: 10pt / peso 500 / color #92400E
  - Letter-spacing: 0.5pt
  - Uppercase

Body row (default):
  - Fondo: white
  - Border-bottom: 0.5pt solid #E2E8F0
  - Padding: 7pt 6pt
  - Texto: 10pt / peso 400 / color #0F172A
  - Números: font mono, color #0F172A

Body row (probabilidad < 100%):
  - Fondo: #F8FAFC (slate-50)
  - Texto: color #64748B (más tenue)
  - Comunica visualmente que es "ejecución condicional"

Columnas existentes: Actividad | Dir. (USD) | Indir. (USD) | Total (USD) | % total | Tiempo | Prob.

Mantener estructura de columnas.

4.4 Página 4 — Nota metodológica

Estado actual:

• Título "Nota metodológica"
• Fórmulas matemáticas con caracteres Unicode rotos (Sprint 2)

Cambios en Etapa 8:

Título:
  - Texto: "NOTA METODOLÓGICA"
  - Tamaño: 11pt
  - Peso: 500
  - Color: #92400E (inq-orange-dark)
  - Letter-spacing: 1pt
  - Uppercase
  - Margin-bottom: 10mm

Caja contenedora (opcional, sutil):
  - Fondo: #F8FAFC
  - Padding: 14pt
  - Border-radius: 4pt
  - Border-left: 2pt solid #94A3B8

Cada fórmula:
  Sub-título:
    - Tamaño: 10pt
    - Peso: 600
    - Color: #0F172A
    - Margin-bottom: 2mm
    
  Fórmula:
    - Tamaño: 10pt
    - Font-family: mono
    - Color: #475569
    - Line-height: 1.5
    - Margin-bottom: 6mm

Contenido textual: mantener el actual. NO arreglar caracteres rotos (Sprint 2).

---

5. Validaciones automatizadas mandatorias

Para CADA uno de los 2 PDFs (Actual y Automatizado):

1. Cantidad de páginas: 4
2. Orientaciones: ['portrait', 'landscape', 'portrait', 'portrait']

3. Página 1 contiene:
   - Texto "ANÁLISIS DE COSTOS — ESCENARIO ACTUAL" (o "AUTOMATIZADO")
   - 4 KPI cards detectables (al menos 4 ocurrencias del fondo #FEF3E2)
   - Strip de metadata con label "PROCESO"
   - Análisis de píxeles confirma paleta naranja InQ dominante

4. Página 1 NO contiene:
   - Gradiente naranja → magenta (verificar ausencia de píxeles magenta #ED3E8F)
   - Es decir: NO debe parecerse al KPI Hero del ROI

5. Página 3 contiene:
   - Título "ANÁLISIS DE COMPOSICIÓN"
   - Tabla con header de fondo naranja claro (#FFF8ED visible)
   - Border-bottom naranja en header de tabla

6. Página 4 contiene:
   - Título "NOTA METODOLÓGICA" en naranja oscuro
   - Caracteres £ y " presentes (esperado, Sprint 2)

7. Footers correctos en TODAS las páginas:
   - "InQ ROI · Powered by InQuality · ..."
   - "Página X de 4"

8. Sin regresiones de marca:
   - "InQ ROI" presente
   - "Process Cost Platform" ausente
   - "v0.1.0" ausente

PDF ROI: SIN CAMBIOS respecto a Etapa 7
   - 5 páginas, todas portrait
   - Página 1 con KPI Hero gradiente intacto
   - Hash del archivo igual o muy similar al de Etapa 7

Tests previos verdes: >= 489 (estimado, ajustar al real)

Si CUALQUIER validación falla, NO uses present_files. Reportá qué falló.

---

6. Entregables (Definition of Done)

[ ] PDF Actual: páginas 1, 3 y 4 rediseñadas con identidad InQ
[ ] PDF Automatizado: páginas 1, 3 y 4 rediseñadas con identidad InQ
[ ] Página 1 de ambos: NO incluye KPI Hero gradiente
[ ] Página 2 de ambos: SIN CAMBIOS (BPMN landscape de Etapa 5)
[ ] Header denso aplicado en página 1 (con título diferenciador)
[ ] Strip de metadata en página 1
[ ] Grid 2x2 de KPI cards con paleta consistente
[ ] Tabla página 3 con header naranja claro
[ ] Nota metodológica página 4 con título naranja oscuro
[ ] PDF ROI NO MODIFICADO
[ ] 8 validaciones automatizadas confirmadas
[ ] PDFs presentados con paths absolutos del filesystem
[ ] Tests previos verdes + nuevos tests específicos (al menos 3 casos por PDF)
[ ] npm run build limpio
[ ] Decisiones por iniciativa documentadas según política CLAUDE.md

---

7. Reporte final a entregar

1. Tabla de archivos modificados/creados con líneas
2. 8 validaciones automatizadas confirmadas (resultado de cada una)
3. Cantidad final de tests verdes
4. 3 PDFs presentados con paths absolutos del filesystem:
   • /Users/marcos/.../tests/e2e/__output__/etapa-8-actual.pdf
   • /Users/marcos/.../tests/e2e/__output__/etapa-8-automatizado.pdf
   • /Users/marcos/.../tests/e2e/__output__/etapa-8-roi.pdf (regenerar para confirmar no-regresión)
5. Comparación lado a lado del antes y después de los PDFs Actual/Automatizado:
   • Cantidad de píxeles naranja InQ antes vs después
   • Tamaño de archivo antes vs después
6. Hallazgos no esperados
7. Decisiones tomadas por iniciativa según política CLAUDE.md con clasificación por nivel

---

8. Reglas operativas

1. NO TOCAR PDF ROI. Cerrado en Etapas 6 y 7. Cualquier cambio ahí es Nivel 3 (consulta previa).

2. NO TOCAR PÁGINA 2 (BPMN landscape). Cerrada en Etapa 5.

3. NO INCLUIR KPI Hero gradiente en página 1 de Actual/Automatizado. Decisión arquitectónica de jerarquía visual.

4. NO ARREGLAR caracteres Unicode rotos o fórmulas truncadas. Sprint 2.

5. Política de iniciativa proactiva refinada (post-Etapa 5):

   • Cualquier cambio que afecte layout, paginación, contenido visible más allá del scope: mínimo Nivel 2
   • Cambio que choca con restricción explícita del prompt: Nivel 3 (consultar previo)
   • Cambio en página 2 (BPMN), PDF ROI, o web app: SIEMPRE Nivel 3 en esta etapa
   • Cambio en pdf-sections-shared.ts (módulo compartido de Etapa 4): SIEMPRE Nivel 3

6. Si encontrás contradicción entre prompt y código: PARÁ y consultá.

7. Validación visual antes de declarar etapa terminada. Los tests verdes no sustituyen mirar el PDF con tus ojos antes de present_files.

---

9. Por qué esta etapa importa

Los PDFs Actual y Automatizado son el material de soporte que un consultor lleva a la reunión cuando el cliente pregunta "¿de dónde sale este número del ROI?". El PDF ROI le da el headline. Los PDFs Actual/Automatizado le dan la evidencia.

Si los PDFs de soporte se ven inconsistentes con el reporte principal, el consultor pierde credibilidad. Si se ven coherentes pero diferenciados (mismo sistema, distinta jerarquía), el consultor proyecta profesionalismo.

El éxito de esta etapa se mide en consistencia visual, no en wow factor. El wow ya está en el ROI.