# Notas de Implementación
## Corresponsabilidad desde el Sur · Paquete de Diseño v1.0

---

## 📋 Decisiones de diseño

### Paleta de colores
- **Primario (Azul):** #2c6db8 - Institucional, confianza, profesionalismo
- **Acento (Ámbar):** #f5aa1e - Calidez, energía, patagónica
- **Neutrales (Tierra):** Grises cálidos (#746b63–#f8f8f7) - Reflect tierra fueguina

### Tipografía
- **Display:** Source Serif 4 (Georgia fallback) - Editorial, autoridad
- **Body:** Inter - Legibilidad, claridad, modernidad
- **Mono:** JetBrains Mono para código/datos

### Breakpoints (Tailwind)
- Mobile: < 640px (sm)
- Tablet: ≥ 768px (md)
- Desktop: ≥ 1024px (lg)
- Wide: ≥ 1280px (xl)

---

## 🔗 Mapeo: Mockup → Componente React

| Pantalla | Componente | Notas |
|----------|-----------|-------|
| **Public** | | |
| home.html | `<HomePage />` | Hero + Eventos + Contadores (animan en scroll) |
| congresos-hub.html | `<CongressHub />` | Grid filtrable, card-based layout |
| congreso-individual.html | `<CongressDetail />` | Tabs (Programa/Disertantes/Comité/Galería) + sticky CTA |
| fundacion.html | `<FoundationPage />` | Misión, equipo, líneas de trabajo |
| aula-landing.html | `<ClassroomLanding />` | Hero + Catálogo 6 cursos + Modalidades |
| inscripcion.html | `<SignupForm />` | Form completo, validación en cliente, privacy link |
| contacto.html | `<ContactPage />` | Formulario + datos + mapa estático |
| | | |
| **Admin** | | |
| dashboard.html | `<AdminDashboard />` | KPIs, accesos rápidos, actividad reciente |
| pages-list.html | `<PagesManager />` | Árbol jerárquico (TreeView), drag-drop reorder |
| page-editor.html | `<PageEditor />` | 3-col layout: arbol / canvas / props. TipTap para WYSIWYG |
| media-manager.html | `<MediaManager />` | Grid de archivos, upload drag-drop, preview |
| importer.html | `<Importer />` | 4 tabs, preview en vivo, validación |
| users-roles.html | `<UsersRoles />` | Tabla CRUD, matriz de permisos |
| audit-log.html | `<AuditLog />` | Timeline cronológica, filtros, diff viewer |
| login.html | `<LoginPage />` | Email/password, validación, recuperar contraseña |

---

## 🎨 Componentes a reutilizar

### Botones
- `<Button variant="primary" size="md">` (brand-600)
- `<Button variant="secondary" size="md">` (neutral-200)
- `<Button variant="outline" size="md">` (border-neutral-300)

### Cards
- `.nav-card` - Link cards con hover (-2px translate, shadow)
- `.metric-card` - KPI cards con left border colored
- `.tree-row` - Filas en tablas con estado (left border)

### Formularios
- Input text, email, password, URL, date
- Textarea para contenido largo
- Select para listas
- Checkbox y radio buttons
- Validación inline (error states)

### Avisos
- `.badge-done` / `.badge-pending` / `.badge-future` (status badges)
- `.toast` (fixed corner notification)
- Alert boxes (bg-color-50, border, text-color-900)

### Tabla admin
- Encabezado sticky, hover states
- Status badges en columnas
- Acciones (menu vertical)

---

## ⚙️ Comportamientos esperados

### Home page
- **Hero:** CTA "Inscribirse" y "Ver programa" clickeables
- **Contadores:** Animan del 0 al número cuando entran en viewport (Intersection Observer)
- **Próximo evento chip:** Pulsing indicator (green dot)

### Editor de página
- **Drag-drop:** Reordenar bloques en canvas
- **Click en bloque:** Activa panel de propiedades (derecha)
- **Estados:** Borrador (amarillo) / Publicado (verde)
- **Buttons:** "Previsualizar", "Guardar borrador", "Publicar"

### Media Manager
- **Upload área:** Drag-drop para subir archivos
- **Grid:** Cards con preview, hover muestra delete button
- **Breadcrumb:** Navega entre carpetas

### Usuarios
- **Tabla:** Sorted, filtrable
- **Matriz de permisos:** Referencia visual (✓ o –)

### Auditoría
- **Timeline:** Cronológica de eventos
- **Filtros:** Tipo evento, usuario, fecha
- **Click en evento:** Expande detalles o muestra diff

---

## 🖼️ Assets requeridos

### Imágenes
- Hero background (Unsplash: photos/nature, patagonia vibes)
- Logos: Fundación Derechos en Red (32px, 64px, 256px)
- Avatar placeholders (colores por rol)
- Capturas de ejemplo para aula virtual

### Iconos
- **Librería:** Lucide Icons (35 iconos mapeados)
- Todos los `<i data-lucide="*">` se renderean automáticamente vía CDN

---

## ⚠️ Riesgos detectados

1. **Editor de página (page-editor.html)** 
   - **Riesgo:** Layout 3-col es complejo en responsive mobile
   - **Solución:** Ocultar sidebar/props en md, usar tabs o drawer

2. **Tablas admin** 
   - **Riesgo:** Overflow horizontal en pantallas pequeñas
   - **Solución:** Implementar horizontal scroll o versión responsive (card-based)

3. **Performance** 
   - **Riesgo:** TipTap + Intersection Observers pueden ralentizar
   - **Solución:** Lazy load TipTap, debounce observers

4. **Estado global** 
   - **Riesgo:** Editor de página necesita gestionar múltiples bloques
   - **Solución:** Context API o Zustand para estado ligero

5. **Validación de formularios**
   - **Riesgo:** Inputs sin validación en mocks
   - **Solución:** React Hook Form + Zod para validación

---

## 🚀 Stack recomendado

```
Frontend:
├── React 19
├── Next.js 15 (App Router)
├── TypeScript
├── Tailwind CSS (compilado, no CDN)
├── React Query (server state)
├── Zustand (client state)
├── React Hook Form + Zod (forms)
├── TipTap (rich editor)
├── Lucide React (icons)
└── date-fns (dates)

Backend:
├── Node.js / Bun
├── Express o Hono (lightweight)
├── PostgreSQL + Prisma ORM
├── JWT para autenticación
└── Winston para logging/auditoría
```

---

## 📝 Notas sobre estilo

- **Sin gradientes:** Diseño limpio, profesional
- **Sin sombras pesadas:** Máx. var(--shadow-lg)
- **Spacing:** Múltiplos de 4px (Tailwind base)
- **Radios:** 0.75rem (12px) por defecto, 1rem (16px) para componentes grandes
- **Transiciones:** 150ms (fast), 200ms (base), 300ms (slow)

---

## 🎯 Próximas fases (Post v1.0)

- [ ] Integración API REST
- [ ] Autenticación JWT
- [ ] Caché de imágenes (Next.js Image)
- [ ] Estadísticas avanzadas en dashboard
- [ ] Exportación de contenido (PDF, Markdown)
- [ ] Webhooks para integraciones
- [ ] i18n (soporte multi-idioma)
- [ ] Dark mode

---

**Versión:** 1.0  
**Última actualización:** 3 mayo 2026  
**Mantenedor:** Fundación Derechos en Red