Empty States

Estructura vertical

Cinco elementos centrados, todos opcionales menos título y descripción. La ilustración/ícono no es un héroe — es orientación. Sin color de marca, sin entusiasmo gráfico.

Spot art de línea + dos tintas

Un glifo Lucide de 32 px en una pantalla de 844 no sostiene el espacio: los empty states legítimos de pantalla completa se sienten muertos. Se adopta un sistema de ilustración propio —outline + dos tintas, en la dirección que el README recomendó— para llenar ese espacio sin celebrar. El arte ilustra el objeto vacío (un recibo, una bandeja, una tarjeta, un sobre), nunca el resultado deseado. Sigue vigente la regla: la ilustración no es un héroe, es orientación; usa la paleta, pero no festeja.

Cada pieza vive como SVG suelto en assets/illustrations/empty-*.svg (tintas por variable CSS / currentColor: un solo archivo sirve light y dark) e inline en cada preview. En Flutter, el slot illustration del widget EmptyState reemplaza al icon en las variantes de pantalla completa legítimas.

Siete contextos

Cada variante tiene título y copy que respetan el tono. Las de pantalla completa legítimas (b · e · f · g) llevan spot art; las circunstanciales (c) y las inline (d) conservan ícono-en-chip. Todas a ancho mobile real (~328dp).

Full-page vs. inline

Misma anatomía, dos escalas según el espacio disponible. La inline vive dentro de una sección; la full-page ocupa todo el body entre app bar y bottom nav.

Tres estados, tres tratamientos

Confundirlos rompe la confianza. El mismo espacio puede verse vacío legítimamente, con error de red, o cargando — el tratamiento visual y de copy debe dejarlos sin ambigüedad.

Reglas de tono

El copy de empty states es donde más fácil se desliza el tono de "neobank entusiasta". MiCapi no es eso. Las reglas son explícitas porque las trampas son comunes.

Claro y oscuro

El ícono y los textos cambian de color. El CTA primario mantiene --color-primary-500 en ambos modos. Sin cambios estructurales.

Dashboard vacío + Historial vacío

Dos pantallas reales. En el dashboard, el balance card vacío arriba (variante del DS) + empty state portafolio debajo. En el historial, full-page con bottom nav presente.

Notas de implementación Flutter

// Componente reutilizable
class EmptyState extends StatelessWidget {
  final IconData icon;
  final String title;
  final String description;
  final Widget? primaryAction;
  final Widget? secondaryAction;
  final EmptyStateSize size;

  const EmptyState({...});

  Widget build(BuildContext context) {
    final isFullPage = size == EmptyStateSize.fullPage;
    final iconSize = isFullPage ? 48.0 : 28.0;
    final chipSize = isFullPage ? 96.0 : 56.0;

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24, vertical: isFullPage ? 32 : 16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: chipSize, height: chipSize,
            decoration: BoxDecoration(
              color: theme.colorScheme.surfaceVariant,
              shape: BoxShape.circle,
            ),
            child: Icon(icon, size: iconSize, color: theme.colorScheme.outline),
          ),
          const SizedBox(height: 16),
          Text(title, style: theme.textTheme.titleMedium),
          const SizedBox(height: 8),
          Text(description, style: theme.textTheme.bodyMedium, textAlign: TextAlign.center),
          if (primaryAction != null) ...[
            const SizedBox(height: 24),
            primaryAction!,
          ],
          if (secondaryAction != null) ...[
            const SizedBox(height: 4),
            secondaryAction!,
          ],
        ],
      ),
    );
  }
}

// Builder pattern para distinguir estados:
switch (state) {
  Loading() => TxListSkeleton(),
  Error(error: final e) => ErrorStateView(onRetry: refresh),
  Loaded(items: final items) when items.isEmpty => EmptyState(
    icon: LucideIcons.receipt,
    title: 'Aún no tienes transacciones',
    description: 'Cuando compres, vendas o intercambies cripto, todo tu historial aparecerá aquí.',
    primaryAction: FilledButton(onPressed: ..., child: Text('Hacer mi primera compra')),
  ),
  Loaded(items: final items) => TxList(items: items),
};