# Guía de Estilos Tailwind CSS - Studio Panel

## Actualización: 2025-11-10

Se ha aplicado Tailwind CSS de forma consistente en todo el `studio-panel`, siguiendo el patrón establecido en `broadcast-panel`.

## Principios de Diseño

### Colores Base
- **Fondo principal**: `bg-[#1f1f1f]` (gris oscuro)
- **Fondo secundario**: `bg-gray-900` 
- **Gradientes**: `bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900`
- **Bordes sutiles**: `border-white/[0.04]` a `border-white/[0.12]`
- **Superficies elevadas**: `bg-white/[0.02]` a `bg-white/[0.06]`

### Texto
- **Primario**: `text-white`
- **Secundario**: `text-white/80`
- **Terciario**: `text-white/60`
- **Muted**: `text-gray-400`

### Espaciado Consistente
- **Padding pequeño**: `px-3 py-2` o `p-3`
- **Padding medio**: `px-4 py-2.5` o `p-4`
- **Padding grande**: `px-6 py-3` o `p-6`
- **Gaps**: `gap-2`, `gap-3`, `gap-4`

### Bordes y Radios
- **Border radius estándar**: `rounded-lg` (0.5rem)
- **Border radius pequeño**: `rounded-md` (0.375rem)
- **Border radius extra**: `rounded-xl` (0.75rem)
- **Border radius completo**: `rounded-full`

### Sombras
- **Sombra ligera**: `shadow-sm`
- **Sombra media**: `shadow-md`
- **Sombra grande**: `shadow-lg`
- **Sombra extra**: `shadow-xl` y `shadow-2xl`
- **Sombras de color**: `shadow-blue-500/20`, `shadow-red-500/20`

## Componentes Actualizados

### Header
```tsx
className="bg-[#1f1f1f] shadow-md border-b border-white/[0.04]"
```

### Button
- **Default**: Fondo semitransparente con hover
- **Primary**: Gradiente azul con sombra
- **Ghost**: Transparente con hover sutil
- **Danger**: Gradiente rojo con sombra

### IconButton
```tsx
className="px-2.5 py-2.5 rounded-lg hover:bg-white/10 active:bg-white/5 transition-all duration-200"
```

### Cards
```tsx
className="bg-white/[0.02] border border-white/[0.06] rounded-lg p-6 hover:bg-white/[0.04] hover:border-white/[0.12] transition-all duration-200"
```

## Transiciones Estándar

### Duración
- **Rápida**: `duration-150`
- **Normal**: `duration-200`
- **Lenta**: `duration-300`

### Propiedades
- **Colores**: `transition-colors`
- **Todo**: `transition-all`
- **Opacidad**: `transition-opacity`

### Hover States
```tsx
hover:bg-white/10
hover:shadow-xl
hover:scale-105
active:scale-95
```

## Focus States
```tsx
focus:outline-none 
focus:ring-2 
focus:ring-white/20 
focus:ring-offset-2 
focus:ring-offset-gray-900
```

## Estados Disabled
```tsx
disabled:opacity-50 
disabled:cursor-not-allowed 
disabled:pointer-events-none
```

## Mejores Prácticas

1. **Usar clases utilitarias** en lugar de CSS personalizado
2. **Mantener consistencia** con espaciado (múltiplos de 4px)
3. **Aplicar transiciones** a elementos interactivos
4. **Usar opacidad** para variaciones de color (`white/10`, `white/60`)
5. **Gradientes sutiles** para profundidad visual
6. **Sombras contextuales** con colores de acento

## Paleta de Colores Acento

### Blue (Primary)
- `from-blue-600 to-blue-500`
- `hover:from-blue-500 hover:to-blue-400`
- `shadow-blue-500/20`

### Red (Danger/Record)
- `from-red-600 to-red-500`
- `hover:from-red-500 hover:to-red-400`
- `shadow-red-500/20`

### Green (Success)
- `bg-green-400`
- `shadow-green-400/50`

### Yellow (Warning)
- `bg-yellow-400`
- `shadow-yellow-400/50`

## Responsive Design

### Breakpoints
- `sm:` - 640px
- `md:` - 768px
- `lg:` - 1024px
- `xl:` - 1280px

### Grid Patterns
```tsx
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4
```

## Archivos Modificados

- `src/components/Header.tsx`
- `src/components/header/Brand.tsx`
- `src/components/header/LiveBadge.tsx`
- `src/components/header/RecordButton.tsx`
- `src/components/ui/Button.tsx`
- `src/components/ui/IconButton.tsx`
- `src/components/figma/FigmaHeader.tsx`
- `src/components/figma/PersonCard.tsx`
- `src/components/figma/MediaGrid.tsx`
- `src/App.tsx`

## Validación

✅ TypeCheck: OK
✅ Lint: OK
✅ Consistencia visual con broadcast-panel
✅ Transiciones suaves aplicadas
✅ Estados hover/focus/active implementados