# Referencia Completa — Wireframes y Flujos de Usuario

## Ejemplo: Flujo de Crear Usuario (multi-paso)

```
[Lista Usuarios]
  → Click "+ Nuevo Usuario"
  → [Modal: Paso 1/3 — Datos Básicos]
      Campos: Nombre, Email, Teléfono (opcional)
      [Cancelar] [Siguiente →]
          │
          └─ Validación front
               ├─ falla → Errores inline, permanecer en Paso 1
               └─ ok → [Modal: Paso 2/3 — Rol y Permisos]
                           Selector: Rol (Admin/Usuario/Moderador)
                           Checkboxes de permisos granulares
                           [← Anterior] [Siguiente →]
                               │
                               └─ ok → [Modal: Paso 3/3 — Confirmar]
                                           Resumen de datos a crear
                                           [← Anterior] [Crear Usuario]
                                               │
                                               ▼
                                            {API: POST /usuarios}
                                               │
                                               ├─ 201 Created
                                               │    → Cerrar modal
                                               │    → Toast: "Usuario creado exitosamente"
                                               │    → Actualizar tabla (invalidar caché)
                                               │
                                               └─ 409 Conflict (email duplicado)
                                                    → Volver a Paso 1
                                                    → Error en campo email
```

---

## Information Architecture — Mapa de Sitio

```
APP SIGAF
├── Auth (sin sidebar)
│   ├── /login
│   ├── /recuperar-contrasena
│   └── /reset-contrasena/:token
│
├── Dashboard /               (todos los roles)
│
├── Usuarios /usuarios        (ADMIN, AUDITOR)
│   ├── Lista /usuarios
│   ├── Detalle /usuarios/:id
│   └── Crear  /usuarios/nuevo
│
├── Reportes /reportes        (todos los roles, datos filtrados por rol)
│   ├── Resumen /reportes
│   ├── Por período /reportes/periodo
│   └── Exportar  /reportes/exportar
│
└── Configuración /config     (solo ADMIN)
    ├── General /config
    ├── Usuarios /config/usuarios
    └── Integraciones /config/integraciones
```

### Reglas de jerarquía visual

```
H1 — Una por página (título de la sección)
H2 — Subsecciones del contenido principal
H3 — Títulos de tarjetas o paneles
H4 — Etiquetas de grupos dentro de formularios
Texto: Sans-serif, 16px base, 24px line-height
Microcopy: 14px, color secundario
```

---

## Navigation Patterns

### Tabs (uso y cuándo)

```
USAR TABS cuando:
- 3-6 vistas relacionadas del mismo contenido
- El usuario necesita cambiar entre vistas frecuentemente
- El contenido de cada tab es independiente

EVITAR TABS cuando:
- Hay más de 6 opciones (usar sidebar o dropdown)
- Las vistas tienen jerarquía (usar breadcrumbs + sub-páginas)
- En móvil con tabs de contenido largo (usar accordion)

FORMATO:
[Tab Activa] [Tab 2] [Tab 3] [Tab 4]
─────────────────────────────────────
[Contenido de Tab Activa]
```

### Drawer / Sidebar

```
USAR DRAWER cuando:
- Navegación principal de la app (5+ secciones)
- El estado de navegación se reutiliza entre páginas

COLAPSABLE: sí (desktop: sidebar fijo 240px ↔ iconos 64px, móvil: overlay)

ESTRUCTURA SIDEBAR:
Logo
─────────────────
Sección Principal (con ícono)
  ├─ Subsección activa (highlight)
  └─ Subsección 2
Sección 2 (con ícono)
─────────────────
[Divider]
Configuración (ícono engranaje)
Avatar del usuario + nombre
```

### Breadcrumbs

```
USAR cuando: el usuario está 2+ niveles de profundidad

FORMATO:
Inicio > Usuarios > Ana López > Editar

REGLAS:
- Último item = página actual (no es link, no clickeable)
- Máximo 4 niveles visibles (truncar intermedios con "...")
- En móvil: mostrar solo el nivel inmediato anterior con "← Anterior"
```

---

## Responsive Breakpoints — Decisiones por Pantalla

```
Pantalla: Gestión de Usuarios (tabla con acciones)

DESKTOP (≥1024px):
  Sidebar fijo 240px + tabla completa con todas las columnas

TABLET (768px-1023px):
  Sidebar colapsado a iconos 64px + tabla con columnas reducidas
  (ocultar: Último acceso, Rol — accesibles en detalle del panel lateral)

MÓVIL (<768px):
  Sidebar = drawer oculto (abrir con hamburger icon)
  Tabla → Lista vertical de cards
  Cada card: Avatar + Nombre + Email + [Acciones: ...]
  Búsqueda: campo expandible (lupa → input)
  Paginación: scroll infinito o "Cargar más"

BREAKPOINT KEY DECISIONS:
- ¿Tabla o cards en móvil? → Cards (tabla no es usable en pantallas <480px)
- ¿Sidebar o drawer en tablet? → Íconos (preserve space for content)
- ¿Modal o página nueva en móvil? → Página nueva (modales en móvil son difíciles de cerrar)
```

---

## Checklist de Entrega de Wireframe

```
PANTALLA
[ ] Nombre y ruta URL
[ ] Propósito en 1 oración
[ ] Layout descrito (grid, columnas, proporciones)
[ ] Todos los elementos nombrados (no "botón" — "botón Crear Usuario")
[ ] Jerarquía tipográfica especificada (H1/H2/texto/microcopy)
[ ] Comportamientos interactivos descritos (hover, click, debounce, etc.)

ESTADOS
[ ] Empty state definido
[ ] Loading state definido
[ ] Error state definido
[ ] Estado de éxito (si aplica)

FLUJO
[ ] Entradas a esta pantalla (¿desde dónde se llega?)
[ ] Salidas de esta pantalla (¿a dónde va?)
[ ] Acciones con API calls marcadas con {API: ...}
[ ] Manejo de errores de API especificado

RESPONSIVE
[ ] Comportamiento en desktop descrito
[ ] Comportamiento en tablet descrito
[ ] Comportamiento en móvil descrito
[ ] Decisiones de breakpoint justificadas
```
