# Vista de la Nueva Interfaz

## 🖥️ Vista Desktop (> 768px)

```
┌─────────────────────────────────────────────────────────────────────────────┐
│                          NEXUS AI - MODERN CHAT UI                          │
└─────────────────────────────────────────────────────────────────────────────┘

┌──────────────────────┬──────────────────────────────────────────────────────┐
│  ≡  [+ Nuevo chat]   │                                                      │
│──────────────────────│                                                      │
│                      │                    [Logo Nexus]                      │
│  RECIENTES           │           ¿Cómo puedo ayudarte hoy?                 │
│                      │                                                      │
│  💬 Nueva conversa...│  ┌──────────────┐  ┌──────────────┐                │
│                      │  │  💡          │  │  📝          │                │
│                      │  │  Ideas       │  │  Escribir    │                │
│                      │  │  creativas   │  │  código      │                │
│                      │  └──────────────┘  └──────────────┘                │
│                      │                                                      │
│                      │  ┌──────────────┐  ┌──────────────┐                │
│                      │  │  🎯          │  │  📚          │                │
│                      │  │  Resolver    │  │  Aprender    │                │
│                      │  │  problemas   │  │  algo nuevo  │                │
│                      │  └──────────────┘  └──────────────┘                │
│                      │                                                      │
│                      │                                                      │
│                      │                                                      │
│                      │                                                      │
│                      │                                                      │
│ ┌──────────────────┐ │                                                      │
│ │ 👤 Usuario       │ │                                                      │
│ │    Plan gratuito │ │                                                      │
│ └──────────────────┘ │                                                      │
│──────────────────────│──────────────────────────────────────────────────────│
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 📎  Envía un mensaje...              [Enviar] │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │  Nexus puede cometer errores. Verifica información. │
└──────────────────────┴──────────────────────────────────────────────────────┘
    280px                               Flexible (resto de pantalla)
```

## 📱 Vista Mobile (< 768px)

```
┌────────────────────────────────────────┐
│  ≡  Nexus AI                      [+] │  ← Header móvil
├────────────────────────────────────────┤
│                                        │
│           [Logo Nexus]                 │
│    ¿Cómo puedo ayudarte hoy?          │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  💡                            │   │
│  │  Ideas creativas               │   │
│  │  Ayúdame con ideas innovadoras │   │
│  └────────────────────────────────┘   │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  📝                            │   │
│  │  Escribir código               │   │
│  │  Ayúdame a programar algo      │   │
│  └────────────────────────────────┘   │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  🎯                            │   │
│  │  Resolver problemas            │   │
│  │  Analiza y encuentra soluciones│   │
│  └────────────────────────────────┘   │
│                                        │
│  ┌────────────────────────────────┐   │
│  │  📚                            │   │
│  │  Aprender algo nuevo           │   │
│  │  Explícame conceptos complejos │   │
│  └────────────────────────────────┘   │
│                                        │
├────────────────────────────────────────┤
│  ┌──────────────────────────────┐     │
│  │ 📎  Envía un mensaje... [➤] │     │
│  └──────────────────────────────┘     │
│  Nexus puede cometer errores...       │
└────────────────────────────────────────┘
```

## 💬 Vista Con Conversación Activa

```
┌──────────────────────┬──────────────────────────────────────────────────────┐
│  ≡  [+ Nuevo chat]   │                                                      │
│──────────────────────│                                                      │
│  RECIENTES           │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 👤  Hola, ¿puedes ayudarme con Python?        │ │
│  💬 Ayuda con Python │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 🤖  ¡Claro! Python es un lenguaje de          │ │
│                      │  │     programación versátil. ¿Qué necesitas     │ │
│                      │  │     aprender específicamente?                  │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 👤  Necesito crear una función para ordenar   │ │
│                      │  │     una lista                                  │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 🤖  Typing...                                  │ │
│                      │  │     ● ● ●                                      │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │                                                      │
│ ┌──────────────────┐ │                                                      │
│ │ 👤 Usuario       │ │                                                      │
│ │    Plan gratuito │ │                                                      │
│ └──────────────────┘ │                                                      │
│──────────────────────│──────────────────────────────────────────────────────│
│                      │  ┌────────────────────────────────────────────────┐ │
│                      │  │ 📎  Envía un mensaje...              [Enviar] │ │
│                      │  └────────────────────────────────────────────────┘ │
│                      │  Nexus puede cometer errores. Verifica información. │
└──────────────────────┴──────────────────────────────────────────────────────┘
```

## 🎨 Elementos Visuales Clave

### Sidebar
```
┌─────────────────────┐
│ ≡ [+ Nuevo chat]   │  ← Toggle + Nuevo chat
├─────────────────────┤
│                     │
│ RECIENTES           │  ← Sección título
│                     │
│ 💬 Chat 1           │  ← Item activo (resaltado)
│ 💬 Chat 2           │  ← Items clickeables
│ 💬 Chat 3           │
│                     │
│ ⋮                   │
│                     │
├─────────────────────┤
│ ┌─────────────────┐ │
│ │ 👤 Usuario     ∨│ │  ← Perfil con dropdown
│ │    Plan gratuito│ │
│ └─────────────────┘ │
└─────────────────────┘
```

### Tarjeta de Sugerencia
```
┌──────────────────────┐
│  💡                  │  ← Emoji grande
│                      │
│  Ideas creativas     │  ← Título
│  Ayúdame con ideas   │  ← Descripción
│  innovadoras         │
│                      │
└──────────────────────┘
   ↑ Hover: sube 2px
   ↑ Sombra más grande
```

### Mensaje del Usuario
```
┌────────────────────────────────┐
│ 👤  Hola, ¿cómo estás?        │  ← Avatar + mensaje
└────────────────────────────────┘
   ↑ Fondo: #2f2f2f
```

### Mensaje de AI
```
┌────────────────────────────────┐
│ 🤖  ¡Hola! Estoy muy bien,    │  ← Avatar + mensaje
│     ¿en qué puedo ayudarte?    │
└────────────────────────────────┘
   ↑ Fondo: transparente
```

### Input Area
```
┌──────────────────────────────────────┐
│ 📎  │ Escribe aquí...        │  [➤] │
└──────────────────────────────────────┘
   ↑    ↑                        ↑
Adjuntar Textarea auto-expand  Enviar
```

### Indicador de Escritura
```
┌────────────────────────────────┐
│ 🤖  ● ● ●                      │
└────────────────────────────────┘
   ↑ Animación de typing
```

## 🎯 Estados Interactivos

### Botón Normal
```
┌──────────────┐
│ + Nuevo chat │
└──────────────┘
```

### Botón Hover
```
┌──────────────┐
│ + Nuevo chat │  ← Fondo más claro
└──────────────┘     Escala 1.02
```

### Botón Active
```
┌──────────────┐
│ + Nuevo chat │  ← Fondo aún más claro
└──────────────┘     Escala 0.98
```

### Botón Disabled
```
┌──────────────┐
│ + Nuevo chat │  ← Opacidad 0.5
└──────────────┘     Cursor: not-allowed
```

## 📐 Dimensiones

### Desktop
- Sidebar: 280px fijo
- Chat: Flexible (max-width: 780px centrado)
- Input: max-width: 780px centrado
- Padding: 16-24px

### Tablet
- Sidebar: 280px overlay
- Chat: 100% - padding
- Input: 100% - padding
- Padding: 12-16px

### Mobile
- Sidebar: 280px overlay
- Chat: 100% - padding
- Input: 100% - padding
- Padding: 8-12px

## 🎨 Paleta de Colores Visual

```
█████  #0f0f0f  bg-primary (casi negro)
█████  #171717  bg-secondary (gris muy oscuro)
█████  #2f2f2f  bg-tertiary (gris oscuro)
█████  #1e1e1e  bg-hover
█████  #2d2d2d  bg-active

█████  #ececec  text-primary (blanco suave)
█████  #b4b4b4  text-secondary (gris claro)
█████  #8e8e8e  text-tertiary (gris medio)

█████  #19c37d  accent-primary (verde brillante)
█████  #1aa874  accent-hover (verde medio)
█████  #148f5f  accent-active (verde oscuro)

█████  #303030  border-color
█████  #3f3f3f  border-light
```

## ✨ Animaciones

### fadeIn (mensajes nuevos)
```
0%   → opacity: 0, transform: translateY(10px)
100% → opacity: 1, transform: translateY(0)
Duración: 300ms
```

### typing (indicador)
```
0%   → translateY(0), opacity: 0.5
30%  → translateY(-10px), opacity: 1
60%  → translateY(0), opacity: 0.5
100% → translateY(0), opacity: 0.5
Duración: 1.4s infinite
```

### hover (tarjetas)
```
Normal → Hover
- transform: translateY(0) → translateY(-2px)
- box-shadow: small → medium
Duración: 150ms
```

---

**Nota**: Esta es una representación ASCII. La interfaz real incluye:
- Fuente Inter de Google Fonts
- Iconos SVG vectoriales
- Gradientes sutiles
- Sombras multicapa
- Transiciones suaves
- Animaciones de 60fps