# Tutorial: crear una pantalla Finaz en minutos

## 1. Escribe la pregunta

Antes de elegir un grafico, escribe la pregunta que debe responder la pantalla.

Ejemplos:

- Que ha pasado?
- Cuanto ha cambiado?
- Por que ha pasado?
- A quien afecta?
- Que debo vigilar?
- Puedo fiarme?
- Esta publicado o pendiente?
- Es urgente?

## 2. Elige perfil y densidad

Selecciona el perfil principal.

- Retail: chart protagonista, takeaway claro y fuente visible.
- Estudiante: cadena causa-efecto, glosario y ejercicio.
- Periodista: claim status, source confidence y audit trail.
- Gestor: watchlist, heatmap, waterfall y comparativas.
- Live: ticker, lower third y ribbon solo si hay umbral.

## 3. Marca el estado del dato

Todo dato visible debe tener estado:

- LIVE: dato en directo confirmado.
- DELAYED: dato con retraso conocido.
- FROZEN: snapshot congelado por Freeze/Explore.
- MOCK: fixture, demo o dato simulado.
- EST: estimacion o consenso.
- CORRECTED: dato revisado o corregido.

## 4. Selecciona el recurso viz.*

Usa el recurso que responde a la pregunta:

- Que ha pasado? `viz.line.episode-aligned-line`
- Cuanto ha cambiado? `viz.composite.kpi-with-spark`
- Por que ha pasado? `viz.water.bridge`
- A quien afecta? `viz.heat.grid`
- Que debo vigilar? `viz.table.watchlist-table`
- Puedo fiarme? `viz.evidence.source-lineage`
- Esta publicable? `viz.newsroom.fact-check-status`
- Es urgente? `viz.broadcast.market-ticker`

## 5. Construye la escena

Orden recomendado:

1. Titular descriptivo, no predictivo.
2. KPI con signo, unidad, timestamp y chip.
3. Grafico con eje y anotaciones legibles.
4. Takeaway en lenguaje claro.
5. Source map visible.
6. Caveat si hay interpretacion o nivel tecnico.

## 6. Abre Freeze/Explore

Cada escena importante debe poder congelarse para:

- Revisar fuentes.
- Ver grafico completo.
- Entender un concepto.
- Abrir una rama de mayor profundidad.

## 7. Pasa quality gates

Bloquea o reescribe:

- "Compra".
- "Vende".
- "Apuesta segura".
- "Oportunidad garantizada".

Usa:

- "Nivel a vigilar".
- "Escenario".
- "Hipotesis".
- "Posible impacto".
- "No recomendacion".

## 8. Entrega a desarrollo

Incluye un contrato conceptual con:

- `cue`
- `renderer`
- `profile`
- `dataState`
- `claim`
- `sourceMap`
- `branchId`
- `qualityGates`

Todos los datos de ejemplo son simulados.