Estados UI obligatorios

Toda pantalla que muestre datos debe especificar explícitamente cómo se ve y actúa en estos siete estados. Ninguna pantalla puede quedarse sin, al menos, un esqueleto para cada uno.

1. Loading

• Skeleton o indicador con copy concreto (no "Cargando..." genérico).
• Mostrar el esqueleto solo si no hay contenido cacheado válido.
• Cancelable cuando aplique.

2. Vacío

• Explicar qué significa que no haya datos (es un estado esperado).
• CTA útil: "Reportar una compra", "Añadir tracking", "Iniciar KYC", "Configurar destinatario".
• Evitar ilustraciones genéricas de "no encontrado".

3. Error

• Mensaje humano, causa probable y acción siguiente.
• Botón "Reintentar" cuando aplique.
• Código técnico solo en detalles / copiar para soporte.
• Si el error es bloqueante, mover foco al primer campo / acción relevante.

4. Éxito

• Qué se creó o cambió.
• ID o referencia visible.
• Próxima acción recomendada.

5. Offline / modo sin red

• Qué puede consultarse sin conexión.
• Qué se guarda para enviar luego (borradores, comprobantes).
• CTA "Reintentar al recuperar conexión".

6. Modo demo

• Banda persistente arriba con copy explícito ("Datos de demostración").
• Datos ficticios identificados.
• Acciones que no tienen efecto real explicadas inline.

7. Bloqueo de negocio

• Motivo del bloqueo (KYC, pago pendiente, destinatario sin definir, etc.).
• Condición para desbloquear.
• CTA para resolver o continuar cuando aplique.
• Alternativas disponibles mientras el bloqueo se resuelve.

Notas

• "Loading + vacío" y "loading + error" son combinaciones válidas solo si la pantalla ya tiene contenido cacheado.
• Estos estados también aplican a overlays (sheet, dialog) cuando pueden bloquear la navegación.
• En modo demo, no mostrar el estado error como si fuera real: señalarlo explícitamente.