# Paquete de Diseño · Corresponsabilidad desde el Sur
## Guía de uso y estructura

Bienvenido al paquete de diseño de **Corresponsabilidad desde el Sur** de la Fundación Derechos en Red.

Este paquete contiene mockups en alta fidelidad (HTML + Tailwind CSS) listos para traspasar a Next.js 15 + React.

---

## 🚀 Cómo abrir el paquete

1. **Descarga los archivos** a tu computadora
2. **Abre `index.html`** en tu navegador (no requiere servidor)
3. **Explora navegando** los links del índice

> **Nota:** Sin servidor = sin API, sin JavaScript de backend. Todo es estático para visualizar.

---

## 📁 Estructura de archivos

```
corresponsabilidad1/
├── design/
│   ├── index.html                    # Página de navegación principal (START HERE)
│   │
│   ├── system/                       # Design System (fuente de verdad visual)
│   │   ├── tokens.html               # Paleta, tipografía, espaciado
│   │   ├── components.html           # Botones, inputs, cards, badges, etc
│   │   ├── patterns.html             # Hero, grid, footer, mega-menu
│   │   └── icons.html                # 35 iconos Lucide mapeados
│   │
│   ├── public/                       # Frontend público (lo que ven visitantes)
│   │   ├── home.html                 # Página de inicio
│   │   ├── congresos-hub.html        # Hub de jornadas académicas
│   │   ├── congreso-individual.html  # Detalles de 1 jornada
│   │   ├── fundacion.html            # Misión, equipo, líneas
│   │   ├── aula-landing.html         # Catálogo de cursos virtuales
│   │   ├── inscripcion.html          # Formulario de inscripción
│   │   └── contacto.html             # Contacto + mapa
│   │
│   ├── admin/                        # Backoffice privado (para editores)
│   │   ├── login.html                # Autenticación
│   │   ├── dashboard.html            # Panel principal
│   │   ├── page-editor.html          # ⭐ Editor visual (pantalla crítica)
│   │   ├── pages-list.html           # Árbol de páginas
│   │   ├── media-manager.html        # Gestor de imágenes
│   │   ├── importer.html             # Importador de contenido
│   │   ├── users-roles.html          # Gestión de usuarios
│   │   └── audit-log.html            # Registro de cambios
│   │
│   ├── shared/                       # Recursos compartidos
│   │   ├── styles.css                # Tokens en CSS custom properties
│   │   ├── scripts.js                # (opcional) helpers JS
│   │   └── README.md                 # Este archivo
│   │
│   └── implementation-notes.md        # Decisiones de diseño y mapeo React
│
└── .claude/
    └── settings.local.json           # Configuración local Claude Code
```

---

## 🎨 Convenciones

### Colores
Todos usan Tailwind con escala 50–950:
- **brand-*** (azul): Color primario institucional
- **accent-*** (ámbar): Color de acento/CTA
- **neutral-*** (gris): Fondos y textos
- **Estados:** green (éxito), yellow (warning), red (error), blue (info)

### Espaciado
Base **4px** (Tailwind standard):
```
0.25rem = 4px    0.75rem = 12px   1.5rem = 24px
0.5rem  = 8px    1rem    = 16px   3rem   = 48px
```

### Tipografía
- **Headings:** Source Serif 4 (editorial)
- **Body:** Inter (legibilidad)
- **Mono:** JetBrains Mono / Fira Code

### Iconos
Todos usan **Lucide Icons** (CDN):
```html
<i data-lucide="icon-name" style="width:24px;height:24px;"></i>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<script>lucide.createIcons();</script>
```

---

## 🔄 Cómo actualizar el paquete

### Agregar una nueva pantalla
1. Copia una pantalla similar (ej: `public/home.html`)
2. Renombra y edita contenido
3. Agrega el link en `index.html` bajo la sección correspondiente
4. Actualiza status: `<span class="status-pending">Pendiente</span>`

### Cambiar colores globales
1. **Opción 1:** Edita `index.html` en la sección `<script>` de Tailwind config
2. **Opción 2:** Edita `shared/styles.css` en las CSS custom properties (`:root`)
3. Propaga cambios a otros HTML (busca-reemplaza: `#2c6db8` → nuevo color)

### Actualizar Lucide Icons
```html
<!-- Última versión en index.html HEAD -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
```

---

## 🎯 Uso en desarrollo (Next.js)

### 1. Estructura de carpetas React
```
app/
├── page.tsx              # home.html → HomePage
├── (public)/
│   ├── congresos/
│   │   ├── page.tsx      # congresos-hub.html
│   │   └── [id]/page.tsx # congreso-individual.html
│   ├── fundacion/page.tsx
│   └── ...
├── admin/
│   ├── layout.tsx        # Layout con sidebar
│   ├── dashboard/page.tsx
│   ├── editor/page.tsx   # page-editor.html
│   └── ...
└── api/                  # Tu backend
```

### 2. Convertir HTML a JSX
```bash
# Reemplaza <i data-lucide="x"> con <Lucide.X />
# Reemplaza clases Tailwind (ya es compatible)
# Reemplaza inline <script> con useEffect hooks
```

### 3. Agregar estado
```typescript
// Editor: Zustand store
import { create } from 'zustand'

interface PageState {
  blocks: Block[]
  activeBlockId: string | null
  addBlock: (block: Block) => void
  removeBlock: (id: string) => void
}

export const usePageStore = create<PageState>(...)
```

### 4. Integrar API
```typescript
// queries.ts (React Query)
export const usePages = () =>
  useQuery({
    queryKey: ['pages'],
    queryFn: () => fetch('/api/pages').then(r => r.json())
  })
```

---

## ✅ Checklist antes de llevar a producción

- [ ] Reemplazar todas las imágenes placeholder (Unsplash)
- [ ] Agregar logo real en 3 tamaños
- [ ] Configurar fuentes de Google Fonts (compiladas en Next.js, no CDN)
- [ ] Compilar Tailwind CSS (evitar CDN)
- [ ] Implementar server-side rendering
- [ ] Agregar SEO meta tags (Open Graph, Twitter)
- [ ] Validar a11y (accessibility) con WAVE
- [ ] Testear responsive en móvil real
- [ ] Configurar caché de imágenes (Next.js Image)
- [ ] Dark mode (opcional pero recomendado)
- [ ] Analytics (Vercel Analytics o similar)
- [ ] Monitoreo de errores (Sentry)

---

## 📞 Preguntas frecuentes

**P: ¿Por qué HTML en lugar de Figma?**  
R: HTML permite interactividad inmediata, no requiere licencia, y es copy-paste a React.

**P: ¿Puedo editar los estilos en el navegador?**  
R: Sí, DevTools de navegador. Pero guarda cambios en los `.html` directamente.

**P: ¿Dónde están las animaciones?**  
R: Transiciones CSS en Tailwind (hover, focus). Animaciones complejas (Framer Motion) van en React.

**P: ¿Cómo agrego un nuevo icono?**  
R: Lucide tiene 4000+ iconos. Busca el nombre en [lucide.dev](https://lucide.dev) y cámbialo en el `data-lucide`.

**P: ¿El admin requiere autenticación?**  
R: Sí. Este mockup no tiene backend. Implementa JWT en Next.js API Routes.

---

## 📊 Estadísticas del paquete

| Métrica | Valor |
|---------|-------|
| **Total páginas** | 18 |
| **Pantallas públicas** | 7 |
| **Pantallas admin** | 8 |
| **Componentes DS** | 4 (tokens, componentes, patrones, iconos) |
| **Dependencias externas** | 3 (Tailwind CDN, Lucide CDN, Google Fonts) |
| **Tamaño total HTML** | ~3.9 MB (sin imágenes) |

---

## 🛠️ Stack técnico

```
Frontend mockup:
├── HTML5
├── Tailwind CSS v3 (CDN)
├── Lucide Icons (CDN)
└── Google Fonts (CDN)

Producción (Next.js):
├── React 19
├── TypeScript
├── Tailwind CSS (compiled)
├── React Query / SWR
├── Zustand / Recoil
├── TipTap (rich editor)
└── next-auth (auth)
```

---

## 📝 Versioning

**v1.0** (3 mayo 2026)
- 7 páginas públicas
- 8 pantallas admin
- Design system completo
- 18 screenshots / pantallas
- 0 dependencias (puro HTML)

**Roadmap:**
- v1.1: Internacionalización (i18n)
- v1.2: Dark mode
- v2.0: Componentes React reutilizables

---

## 📧 Contacto

**Fundación Derechos en Red**  
Corresponsabilidad desde el Sur  
Ushuaia, Tierra del Fuego, Argentina

---

¡Gracias por usar este paquete de diseño! 🚀