# Sistema de Diseño Unificado - AvanzaCast

## 📋 Resumen

Se ha implementado un **sistema de diseño unificado** basado en el template **Techwind** para toda la aplicación AvanzaCast, asegurando consistencia visual entre:
- Landing Page
- Broadcast Studio
- Admin Panel

---

## 🎨 Configuración Tailwind Compartida

### Archivo: `tailwind.config.shared.js`

#### **Colores Principales**
```javascript
{
  primary: {
    // Indigo - Color principal de AvanzaCast
    500: '#8b5cf6',
    600: '#7c3aed', // Principal
    700: '#6d28d9',
  },
  secondary: {
    // Blue - Color secundario
    500: '#3b82f6',
    600: '#2563eb', // Principal
    700: '#1d4ed8',
  },
  dark: '#3c4858',
  black: '#161c2d',
  'dark-footer': '#192132',
}
```

#### **Tipografía**
- **Font Family**: Nunito (Google Fonts)
- **Weights**: 300, 400, 500, 600, 700
- Fuentes alternativas: Alex Brush (cursiva), EB Garamond (serif)

#### **Breakpoints**
```javascript
{
  xs: '540px',
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}
```

#### **Shadows (Techwind Style)**
```javascript
{
  sm: '0 2px 4px 0 rgb(60 72 88 / 0.15)',
  DEFAULT: '0 0 3px rgb(60 72 88 / 0.15)',
  md: '0 5px 13px rgb(60 72 88 / 0.20)',
  lg: '0 10px 25px -3px rgb(60 72 88 / 0.15)',
  xl: '0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)',
  '2xl': '0 25px 50px -12px rgb(60 72 88 / 0.25)',
}
```

#### **Animaciones**
```javascript
{
  'float': 'float 6s ease-in-out infinite',
  'float-delayed': 'float 6s ease-in-out infinite 3s',
  'fadeInUp': 'fadeInUp 0.6s ease-out',
  'marquee': 'marquee 30s linear infinite',
  'spin-slow': 'spin 10s linear infinite',
}
```

---

## 🧩 Componentes UI Compartidos

Todos disponibles en `@avanzacast/shared-components`

### 1. **Button Component**

```tsx
import { Button } from '@avanzacast/shared-components'

// Variantes
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

// Tamaños
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// Loading state
<Button isLoading>Processing...</Button>
```

**Props:**
- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
- `size`: 'sm' | 'md' | 'lg'
- `isLoading`: boolean
- Todos los props nativos de `<button>`

**Estilos aplicados:**
- Indigo 600/700 para primary
- Border radius: `rounded-md`
- Transition: `duration-500`
- Disabled state con opacity 60%

---

### 2. **Card Component**

```tsx
import { Card, CardHeader, CardBody } from '@avanzacast/shared-components'

// Variantes
<Card variant="default">
  <CardHeader>Card Title</CardHeader>
  <CardBody>Card content</CardBody>
</Card>

<Card variant="hover">Hover effect card</Card>
<Card variant="gradient">Gradient card</Card>
```

**Props:**
- `variant`: 'default' | 'hover' | 'gradient'

**Estilos aplicados:**
- Rounded: `rounded-xl`
- Padding: `p-6`
- Shadow: Techwind shadow system
- Dark mode support

---

### 3. **Input & Textarea Components**

```tsx
import { Input, Textarea } from '@avanzacast/shared-components'

// Con label y error
<Input
  label="Email"
  placeholder="tu@email.com"
  error="Email requerido"
/>

// Con helper text
<Input
  label="Username"
  helperText="Min 3 caracteres"
/>

// Textarea
<Textarea
  label="Descripción"
  rows={4}
  placeholder="Escribe aquí..."
/>
```

**Props:**
- `label`: string
- `error`: string (muestra mensaje de error en rojo)
- `helperText`: string (texto de ayuda en gris)
- Todos los props nativos de `<input>` / `<textarea>`

**Estilos aplicados:**
- Focus ring: indigo-500
- Error state: red-500
- Dark mode support
- Smooth transitions

---

### 4. **Badge Component**

```tsx
import { Badge } from '@avanzacast/shared-components'

// Variantes
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>

// Tamaños
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>
```

**Props:**
- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
- `size`: 'sm' | 'md' | 'lg'

**Estilos aplicados:**
- Background: color/10 opacity
- Rounded: `rounded-md`
- Dark mode: color/20 opacity

---

## 📁 Estructura de Archivos Actualizada

```
AvanzaCast/
├── tailwind.config.shared.js        ✅ Nueva - Config compartida
├── packages/
│   ├── landing-page/
│   │   ├── tailwind.config.cjs      ✅ Actualizado
│   │   └── src/
│   │       └── index.css            ✅ Actualizado (Nunito font)
│   ├── broadcast-studio/
│   │   └── tailwind.config.cjs      ✅ Actualizado
│   ├── admin-panel/
│   │   └── tailwind.config.cjs      ✅ Actualizado
│   └── shared-components/
│       └── src/
│           ├── Button.tsx           ✅ Nuevo
│           ├── Card.tsx             ✅ Nuevo
│           ├── Input.tsx            ✅ Nuevo
│           ├── Badge.tsx            ✅ Nuevo
│           └── index.ts             ✅ Actualizado
```

---

## 🎯 Guía de Uso para Desarrolladores

### **1. Importar Componentes Compartidos**

```tsx
// En cualquier módulo (landing-page, broadcast-studio, admin-panel)
import { Button, Card, Input, Badge } from '@avanzacast/shared-components'
```

### **2. Usar Colores del Sistema**

```tsx
// Usar clases de Tailwind con colores compartidos
<div className="bg-indigo-600 text-white">
  <h1 className="text-2xl font-semibold">Título</h1>
</div>

// Gradientes
<div className="bg-gradient-to-t from-indigo-600 to-indigo-500">
  Gradiente
</div>
```

### **3. Aplicar Sombras Techwind**

```tsx
// Sombras consistentes en toda la app
<div className="shadow">Default shadow</div>
<div className="shadow-md">Medium shadow</div>
<div className="shadow-lg">Large shadow</div>
<div className="dark:shadow-gray-800">Dark mode shadow</div>
```

### **4. Usar Animaciones**

```tsx
// Animaciones predefinidas
<div className="animate-float">Floating element</div>
<div className="animate-fadeInUp">Fade in animation</div>
<div className="animate-marquee">Marquee scroll</div>
```

### **5. Dark Mode Support**

```tsx
// Todos los componentes soportan dark mode automáticamente
<Card>
  {/* Se adapta a dark mode automáticamente */}
  <p className="text-gray-700 dark:text-gray-300">
    Texto que cambia en dark mode
  </p>
</Card>
```

---

## 🎨 Paleta de Colores Completa

### **Primarios**
- **Indigo**: `indigo-50` a `indigo-900` (Principal de AvanzaCast)
- **Blue**: `blue-50` a `blue-900` (Secundario)

### **Semánticos**
- **Success**: `green-500`, `green-600`
- **Danger**: `red-500`, `red-600`
- **Warning**: `orange-500`, `orange-600`
- **Info**: `blue-500`, `blue-600`

### **Neutrales**
- **Gray**: `gray-50` a `gray-900`
- **Dark**: `#3c4858`
- **Black**: `#161c2d`

---

## ✅ Checklist de Implementación

- [x] Crear `tailwind.config.shared.js` con configuración Techwind
- [x] Actualizar `tailwind.config.cjs` en landing-page
- [x] Actualizar `tailwind.config.cjs` en broadcast-studio
- [x] Actualizar `tailwind.config.cjs` en admin-panel
- [x] Crear componentes UI compartidos (Button, Card, Input, Badge)
- [x] Exportar componentes en `@avanzacast/shared-components`
- [x] Aplicar fuente Nunito en landing-page
- [ ] Migrar componentes existentes a usar nuevos componentes compartidos
- [ ] Verificar consistencia visual en las 3 apps
- [ ] Documentar patrones de diseño adicionales

---

## 📝 Próximos Pasos

1. **Migrar componentes existentes**
   - Reemplazar botones custom por `<Button>` compartido
   - Reemplazar cards custom por `<Card>` compartido
   - Reemplazar inputs custom por `<Input>` compartido

2. **Crear componentes adicionales**
   - Modal/Dialog
   - Dropdown/Select
   - Tabs
   - Alert/Toast
   - Avatar
   - Tooltip

3. **Optimizar rendimiento**
   - Lazy load de componentes pesados
   - Code splitting por ruta
   - Optimización de imágenes

4. **Testing**
   - Unit tests para componentes compartidos
   - Visual regression testing
   - Accessibility testing (A11y)

---

## 🔗 Referencias

- **Techwind Template**: Fuente de inspiración para el diseño
- **Tailwind CSS**: https://tailwindcss.com/docs
- **Nunito Font**: https://fonts.google.com/specimen/Nunito

---

**Última actualización**: 3 de noviembre de 2025  
**Versión**: 1.0.0  
**Autor**: GitHub Copilot