# Especificaciones Técnicas - Plataforma Economía

## 1. Arquitectura Frontend

### Tecnologías Principales
- **Framework**: React 18.2+
- **Lenguaje**: TypeScript 5.0+
- **Styling**: Tailwind CSS 3.4+
- **Build Tool**: Vite 5.0+
- **Package Manager**: npm

### Dependencias Clave
```json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.20.0",
    "d3": "^7.8.0",
    "recharts": "^2.10.0",
    "zustand": "^4.4.0",
    "lucide-react": "^0.294.0",
    "framer-motion": "^10.16.0"
  }
}
```

## 2. Componentes Interactivos Planificados

### 2.1 GraficoCurva (Módulos 2, 3, 4)
```typescript
interface GraficoCurvaProps {
  tipo: 'oferta' | 'demanda' | 'equilibrio' | 'costos';
  datos: Punto[];
  interactivo: boolean;
  onPuntoClick?: (punto: Punto) => void;
}
```

### 2.2 SimuladorPrecios (Módulo 2)
- Sliders para ajustar curvas
- Visualización de excedentes
- Animaciones de transición

### 2.3 CalculadoraElasticidad (Módulo 3)
- Inputs para valores Q1, Q2, P1, P2
- Cálculo automático con fórmula
- Visualización del resultado

### 2.4 JuegoFlujoCircular (Módulo 1)
- Drag & drop de elementos
- Conexiones entre agentes económicos
- Validación de respuestas

## 3. Estructura de Estado

```typescript
interface AppState {
  progreso: {
    modulo1: { completado: number; ejercicios: boolean[] };
    modulo2: { completado: number; ejercicios: boolean[] };
    modulo3: { completado: number; ejercicios: boolean[] };
    modulo4: { completado: number; ejercicios: boolean[] };
  };
  usuario: {
    nombre: string;
    puntuacion: number;
    logros: string[];
  };
  preferencias: {
    modoOscuro: boolean;
    notificaciones: boolean;
  };
}
```

## 4. Configuración Docker

### Dockerfile
```dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
```

### docker-compose.yml
```yaml
version: '3.8'
services:
  econ-learning:
    build: .
    ports:
      - "3000:80"
    restart: unless-stopped
```

## 5. Rutas de la Aplicación

```
/                    → Landing page
/modulos             → Lista de módulos
/modulo/1            → Módulo 1: Fundamentos
/modulo/2            → Módulo 2: Oferta/Demanda
/modulo/3            → Módulo 3: Elasticidad
/modulo/4            → Módulo 4: Productor
/ejercicios/:id      → Ejercicio específico
/progreso            → Dashboard de progreso
```

## 6. Diseño UI/UX

### Paleta de Colores
- Primary: #2563eb (Azul)
- Secondary: #7c3aed (Violeta)
- Success: #10b981 (Verde)
- Warning: #f59e0b (Naranja)
- Error: #ef4444 (Rojo)
- Background: #f8fafc (Gris claro)
- Surface: #ffffff (Blanco)

### Tipografía
- **Headings**: Inter, 600-700 weight
- **Body**: Inter, 400 weight
- **Monospace**: JetBrains Mono (para fórmulas)

### Breakpoints
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px

## 7. Optimizaciones Planificadas

### Performance
- Lazy loading de módulos
- Code splitting por ruta
- Virtualización de listas largas
- Caché de assets con service worker

### Accesibilidad
- ARIA labels en elementos interactivos
- Soporte para navegación por teclado
- Contraste WCAG AA
- Screen reader compatible

## 8. Testing Strategy

### Unit Tests (Vitest)
- Lógica de cálculos económicos
- Hooks personalizados
- Utilidades

### Integration Tests (React Testing Library)
- Flujo de navegación
- Interacción con gráficos
- Formularios

### E2E Tests (Playwright)
- Rutas críticas
- Ejercicios completos
- Persistencia de datos