# InQ ROI — Sistema de Diseño

> Documento de referencia visual para Sprint 2+.
> Fuente de verdad para la paleta, tipografía y componentes.
> Actualizar en cada sprint que modifique la identidad visual.

---

## 1. Identidad de Marca

### Nombre del producto
**InQ ROI** — herramienta interna de InQuality para cuantificación de ROI de automatización.

### Regla de ortografía (NO NEGOCIABLE)
```
✅ InQ         ← I mayúscula, n minúscula, Q mayúscula
✅ InQuality   ← nombre completo
❌ INQ / Inq / inq / inQ  ← cualquiera es bug
```

### Tagline en footers PDF
`"Powered by InQuality"` — obligatorio en todos los footers de PDF.

---

## 2. Paleta Cromática

### 2.1 InQ Orange — Color protagonista

| Token Tailwind | CSS Var | Hex | HSL | Uso |
|---|---|---|---|---|
| `bg-inq-orange` | `--inq-orange` | `#F59845` | 28° 90% 62% | Principal: logo, KPIs hero, CTAs primarios |
| `bg-inq-orange-dark` | `--inq-orange-dark` | `#B45309` | 34° 93% 37% | Texto sobre fondos claros, hover de CTAs |
| `bg-inq-orange-light` | `--inq-orange-light` | `#FEF3E2` | 36° 95% 88% | Fondos de KPI cards |
| `bg-inq-orange-lighter` | `--inq-orange-lighter` | `#FFF8ED` | 36° 100% 94% | Fondos de banner narrativo, hover sutiles |

### 2.2 InQ Magenta — Gradiente identidad

| Token Tailwind | CSS Var | Hex | Uso |
|---|---|---|---|
| `bg-inq-magenta` | `--inq-magenta` | `#ED3E8F` | Segundo color del gradiente identidad |

#### Gradiente identidad
```css
background: linear-gradient(135deg, #F59845 0%, #ED3E8F 100%);
```

**Uso exclusivo:** KPI Hero "Ahorro proyectado" en PDF y web. NUNCA en bordes, separadores ni fondos secundarios.

### 2.3 Semánticos

| Token Tailwind | CSS Var | Hex | Uso |
|---|---|---|---|
| `bg-success` | `--color-success` | `#16A34A` | Ahorros positivos, payback alcanzado |
| `bg-success-light` | `--color-success-light` | `#F0FDF4` | Fondos de mensajes positivos |
| `bg-warning` | `--color-warning` | `#F59E0B` | Advertencias, sección transparencia |
| `bg-warning-bg` | `--color-warning-bg` | `#FFFBEB` | Fondo de sección transparencia |
| `bg-destructive` / `--color-danger` | — | `#EF4444` | Costos altos, valores negativos |
| `--color-danger-light` | — | `#FEE2E2` | Fondos de heatmap alto costo |

### 2.4 Heatmap — Paleta saturada (FIJA hasta Sprint 3-4)

| Token Tailwind | Hex | RGB | Uso |
|---|---|---|---|
| `bg-heatmap-low` | `#10B981` | (16, 185, 129) | Actividades de bajo costo |
| `bg-heatmap-mid` | `#F59E0B` | (245, 158, 11) | Actividades de costo medio |
| `bg-heatmap-high` | `#EF4444` | (239, 68, 68) | Actividades de alto costo |

#### Decisión sobre paleta de heatmap

**Se mantiene saturada** (verde-ámbar-rojo) en lugar de la variante pastel del brief por dos razones:

1. **Tests E2E calibrados**: los análisis de píxeles del heatmap (`export-pdf.spec.ts`, `validate-dod-etapa4.spec.ts`) tienen umbrales calibrados para estos colores. Cambiar la paleta requiere recalibrar todos esos umbrales.

2. **Visibilidad en pantallas grandes**: el producto se usa en talleres y charlas InQuality proyectadas en pantalla. Los colores saturados mantienen contraste a distancia. Los pasteles se "lavan" a 3+ metros.

**Revisión programada**: Sprint 3-4 con feedback real de uso en talleres.

**Invariante crítica**: los valores de `tailwind.config.js` `heatmap.*` DEBEN coincidir con las constantes `HEATMAP_LOW/MID/HIGH` en `src/lib/colors.ts`. Si se modifica uno, debe actualizarse el otro.

### 2.5 Neutrales

| Hex | Tailwind equivalente | Uso |
|---|---|---|
| `#0F172A` | `slate-900` | Títulos, números importantes |
| `#475569` | `slate-600` | Texto del cuerpo |
| `#64748B` | `slate-500` | Labels, metadatos |
| `#94A3B8` | `slate-400` | Placeholders, texto muy secundario |
| `#E2E8F0` | `slate-200` | Bordes generales |
| `#F1F5F9` | `slate-100` | Separadores sutiles |
| `#F8FAFC` | `slate-50` | Fondo de la app, canvas BPMN |

### 2.6 Colores que NO usar

```
❌ #572FA2  Morado primario de CONCILIA — marca hermana, no mezclar
❌ #CB1889  Magenta de CONCILIA
❌ azul shadcn por defecto (221.2 83.2% 53.3%) — reemplazado por InQ orange
```

---

## 3. Tipografía

### 3.1 Familias

```css
/* Primaria — web app y body de PDFs */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

/* Mono — números en tablas, datos financieros */
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
```

Tailwind: `font-sans` / `font-mono`

### 3.2 Escala PDF

| Elemento | Tamaño | Peso | Tracking |
|---|---|---|---|
| Logo "InQ ROI" en header | 22px | 700 | −0.8px |
| Título de sección | 16px | 500 | normal |
| KPI Hero (cifra) | 30px | 700 | −1px |
| KPI secundario (cifra) | 16px | 700 | normal |
| Body text | 11px | 400 | normal |
| Labels en cards | 8px | 500 | 1px uppercase |
| Tabla header | 10px | 500 | normal |
| Tabla body | 10px | 400 | normal |
| Footer | 9px | 400 | normal |

### 3.3 Escala Web App

| Elemento | Tamaño |
|---|---|
| Logo header | 18px / 700 |
| Page title | 16px / 500 |
| KPI Hero | 28px / 700 |
| KPI secundario | 16px / 700 |
| Nav / Tabs | 12px / 400-500 |
| Body | 12-13px / 400 |
| Labels en panels | 10-11px / 400-500 |

---

## 4. Componentes

### 4.1 KPI Hero (gradiente naranja → magenta)

```
Fondo:        linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)
Padding:      16-18px
Border-radius: 6-8px
Label:        9-10px / uppercase / letter-spacing 1.2px / white opacity 0.9
Cifra:        28-30px / 700 / letter-spacing −1px / white
Subtítulo:    10-11px / white opacity 0.85
```

Uso: el KPI "Ahorro proyectado a N años" — el más importante del reporte ROI.

### 4.2 KPI Card (secundario, fondo naranja claro)

```
Fondo:        #FEF3E2 (inq-orange-light)
Padding:      10px 12px
Border-radius: 6px
Label:        8px / 500 / letter-spacing 1px / color #92400E / uppercase
Cifra:        16px / 700 / color #0F172A
Delta:        10px / 500 / color #B45309
```

### 4.3 Banner narrativo (resumen ejecutivo)

```
Fondo:        #FFF8ED (inq-orange-lighter)
Border-left:  3px solid #F59845
Padding:      10-12px 14px
Border-radius: 0 4px 4px 0
Texto:        11px / 400 / line-height 1.55 / color #475569
```

### 4.4 Sección Transparencia Metodológica

```
Fondo:        #FFFBEB (warning-bg)
Border:       0.5px solid #F59E0B
Padding:      12px 14px
Border-radius: 6px
Título:       11px / 500 / color #92400E / con ícono ⚠
Texto:        10px / 400 / line-height 1.6 / color #78350F
```

4 condiciones que activan la sección:
1. Actividades `automatable=true` con `automatedCostFixed=0` y `automatedTimeMinutes=0`
2. `automationInvestment=0`
3. `roiAnnualPercent > 1000` (finito)
4. (reservado para futuras reglas)

### 4.5 Tabla comparativa PDF

```
Header row:
  Fondo:       #FFF8ED
  Border-bottom: 1px solid #F59845
  Texto:       10px / 500 / #92400E

Body row — automatizable:
  Fondo:       white

Body row — no automatizable:
  Fondo:       #F8FAFC
  Texto:       color #64748B (más tenue)

Total row:
  Fondo:       #FFF8ED
  Border-top:  1.5px solid #F59845
  Texto:       10px / 500 / #0F172A
```

### 4.6 Header PDF

```
Layout:       flex justify-between
Border-bottom: 3px solid #F59845 (pág. 1) / 2px (otras)
Padding-bottom: 10-12px
Margin-bottom: 14-16px

Izquierda:
  "InQ ROI"  18-22px / 700 / #F59845
  Tagline:   9px / letter-spacing 1.5px / #94A3B8 (solo pág. 1)

Derecha:
  "UN PRODUCTO DE"  9px / letter-spacing 1px / #94A3B8
  "InQ"             16px / 700 / #475569
  "InQuality"       9px / #64748B
```

### 4.7 Footer PDF

```
Position:     absolute bottom 14-16mm
Padding-top:  6-8px
Border-top:   0.5px solid #E2E8F0
Layout:       flex justify-between
Font:         9px / 400 / #94A3B8

Izquierda:   "InQ ROI" bold #F59845 " · Powered by InQuality · " cliente · fecha
Derecha:     "Página X de Y"
```

### 4.8 Badge ⚡ (Automatizable)

#### En canvas BPMN overlay
```
Diámetro:    14px
Fondo:       #F59845 (naranja sólido)
Border:      1.5px solid white
Posición:    { top: -8, left: nodeWidth - 12 }
Símbolo:     ⚡ blanco 8px
```

Nota: en Sprint 1 el badge usa fondo `#fffbeb` (ámbar-50) con ícono ámbar. La migración a naranja sólido se hace en **Etapa 9** de Sprint 1.5.

#### En tablas y leyendas
```
Diámetro:    14px inline
Fondo:       #F59845
Color:       white
```

### 4.9 Layout híbrido de PDFs (portrait + landscape)

Los PDFs combinan orientaciones por página:

- **Páginas SIN diagrama**: A4 vertical (210×297mm) — texto, tablas, KPIs
- **Página DEL diagrama BPMN**: A4 horizontal (297×210mm) — para que el diagrama ocupe espacio real

Implementación jsPDF: `doc.addPage([297, 210], 'landscape')`

---

## 5. Tokens en código

### Web (Tailwind)

```tsx
// Colores de marca
<div className="bg-inq-orange">          // #F59845
<div className="bg-inq-orange-dark">     // #B45309
<div className="bg-inq-orange-light">    // #FEF3E2
<div className="text-inq-orange">        // texto naranja
<div className="border-inq-orange">      // borde naranja

// Gradiente identidad (como style prop — Tailwind no soporta gradientes dinámicos)
<div style={{ background: 'linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)' }}>

// Semánticos
<div className="bg-success text-white">  // #16A34A
<div className="bg-warning-bg">          // #FFFBEB
```

### PDF (jsPDF)

```typescript
// Constante en pdf-sections.ts (a migrar en Etapas 4-8)
const PDF_ORANGE: [number, number, number] = [245, 152, 69]  // #F59845
const PDF_ORANGE_LIGHT: [number, number, number] = [254, 243, 226]  // #FEF3E2
const PDF_MAGENTA: [number, number, number] = [237, 62, 143]  // #ED3E8F

// Gradiente en jsPDF se simula con pasos (ver pdf-sections-roi.ts)
```

---

## 6. Reglas de uso — DO / DON'T

### DO ✅
- Usar `bg-primary` / `text-primary` para todos los CTAs — hereda el naranja de `--primary`
- Usar gradiente identidad en exactamente 1 KPI Hero por página/vista
- Usar `font-mono` para todos los números financieros
- Escribir siempre **InQ** con I-n-Q

### DON'T ❌
- Usar `bg-blue-*` donde debería ir naranja InQ
- Aplicar el gradiente en más de un elemento por vista
- Usar colores de CONCILIA (`#572FA2`, `#CB1889`)
- Cambiar los colores del heatmap sin recalibrar los tests E2E

---

*Actualizado: Sprint 1.5 Etapa 1 — 2026-05-16*
