# 🎮 Rediseño Pixel Art - Documentación Web

## 📋 Resumen de Cambios

Se ha transformado completamente el diseño de la documentación web (`src/server/views/**`) desde un estilo moderno con glassmorphism y gradientes a un **diseño pixel art retro** inspirado en RPGs de 8/16 bits.

---

## 🎨 Cambios Visuales Implementados

### **1. Sistema de Fuentes**
- **Primary**: `'Press Start 2P'` (Google Fonts) - Para títulos y UI importante
- **Secondary**: `'VT323'` (Google Fonts) - Para texto general y código
- Aplicado `image-rendering: pixelated` globalmente

### **2. Paleta de Colores Retro**
```css
--pixel-bg-dark: #0f0a1e       /* Fondo oscuro principal */
--pixel-bg-medium: #1a1433     /* Contenedores */
--pixel-bg-light: #2d2347      /* Cards y cajas */
--pixel-accent-1: #ff006e      /* Rosa/Magenta (misiones) */
--pixel-accent-2: #8338ec      /* Púrpura (IA) */
--pixel-accent-3: #3a86ff      /* Azul (minijuegos) */
--pixel-accent-4: #06ffa5      /* Verde/Cyan (economía) */
```

### **3. Elementos UI Pixel Art**

#### **Botones** (`.pixel-btn`)
- Bordes de 4px con efecto 3D
- Box-shadow con desplazamiento al hover
- Fuente Press Start 2P
- Transiciones instantáneas (0.1s)

#### **Cajas/Contenedores** (`.pixel-box`)
- Bordes cuadrados (border-radius: 0)
- Box-shadow con offset de 8px
- Borde doble con `::before` pseudo-element
- Animación de pulso sutil

#### **Navbar Pixel** (`.pixel-navbar`)
- Borde inferior de 4px
- Franja animada con degradado en la parte inferior
- Logo con moneda pixelada animada

#### **Badges** (`.pixel-badge`)
- Fuente pequeña (10px) Press Start 2P
- Animación de rebote (`pixelBounce`)
- Box-shadow 3D

#### **Tablas**
- `border-spacing: 4px` para separación visual
- Headers con fondo morado y fuente pixel
- Hover con glow verde

#### **Scrollbar Personalizado**
- Track oscuro con bordes
- Thumb con color accent-2
- Efecto inset 3D

---

## 📁 Archivos Creados/Modificados

### **Archivos CSS Nuevos**

#### 1. `/src/server/public/assets/css/pixel-art.css`
**Propósito**: Estilos base pixel art y componentes reutilizables

**Contenido principal**:
- Variables CSS globales
- Reset con pixelated rendering
- Componentes: `.pixel-btn`, `.pixel-box`, `.pixel-badge`, `.pixel-navbar`
- Animaciones: `pixelGlow`, `pixelPulse`, `pixelScroll`, `pixelBounce`, `pixelShake`
- Elementos decorativos: `.pixel-heart`, `.pixel-coin`, `.pixel-hp-bar`
- Tooltips pixel art
- Scrollbar custom

**Líneas clave**:
```css
/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* Background grid */
.pixel-grid-bg {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
}
```

#### 2. `/src/server/public/assets/css/pixel-sections.css`
**Propósito**: Sobrescribir estilos de secciones individuales

**Contenido principal**:
- Estilos para `<section>` con bordes pixel
- Títulos H2/H3/H4 con fuentes pixel
- Listas con bullets custom (`■`)
- Code blocks con borde de acento
- Tablas responsive
- Forms con estilo retro

**Sobrescrituras importantes**:
```css
section {
  background: var(--pixel-bg-medium) !important;
  border: 4px solid var(--pixel-border) !important;
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.5) !important;
}

section h2 {
  font-family: 'Press Start 2P', cursive !important;
  text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.8), 0 0 20px var(--pixel-accent-4) !important;
}
```

---

### **Archivos EJS Modificados**

#### 1. `/src/server/views/layouts/layout.ejs`
**Cambios**:
- ✅ Eliminado config de Tailwind con animaciones smooth
- ✅ Incluido `pixel-art.css` y `pixel-sections.css`
- ✅ Cambiado body class: `pixel-grid-bg` en lugar de gradiente
- ✅ Eliminado los 3 blobs animados (`animate-float`)
- ✅ Footer rediseñado con `.pixel-box` y `.pixel-status-bar`

**Antes**:
```html
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
  <!-- Blobs animados -->
  <div class="absolute ... bg-purple-500/20 ... animate-float"></div>
```

**Después**:
```html
<body class="min-h-screen pixel-grid-bg pt-14">
  <!-- Sin blobs, solo grid background -->
```

#### 2. `/src/server/views/index.ejs`
**Cambios**:
- ✅ Badge con `.pixel-badge` en lugar de gradientes
- ✅ Títulos H1/H2 sin `bg-clip-text` (texto sólido)
- ✅ HP bar decorativo con corazones pixel
- ✅ Descripción dentro de `.pixel-box`
- ✅ Botones con `.pixel-btn` y `.pixel-btn-secondary`
- ✅ Stats footer con `.pixel-box` individuales

**Antes**:
```html
<div class="inline-flex ... bg-gradient-to-r from-indigo-500/10 ...">
  <span class="animate-ping ..."></span>
  <span class="bg-clip-text text-transparent bg-gradient-to-r ...">
    <%= appName %> • v<%= version %>
  </span>
</div>
```

**Después**:
```html
<div class="inline-block">
  <div class="pixel-badge">
    <%= appName %> • v<%= version %>
  </div>
</div>
```

#### 3. `/src/server/views/partials/navbar.ejs`
**Cambios**:
- ✅ Clase principal: `.pixel-navbar`
- ✅ Logo con `.pixel-coin` animado
- ✅ Links con `.pixel-tooltip` (hover muestra info)
- ✅ Fuente Press Start 2P para el nombre del bot

**Antes**:
```html
<nav class="fixed ... bg-slate-950/70 backdrop-blur">
  <a href="#" class="text-white font-bold"><%= appName %></a>
```

**Después**:
```html
<nav class="fixed ... pixel-navbar">
  <a href="#" class="flex items-center gap-2">
    <div class="pixel-coin" style="width: 20px; height: 20px;"></div>
    <span class="font-['Press_Start_2P'] text-sm"><%= appName %></span>
  </a>
```

#### 4. `/src/server/views/partials/toc.ejs`
**Cambios**:
- ✅ Contenedor: `.pixel-box`
- ✅ Título con `.pixel-corner` decorativo
- ✅ Links con símbolo `►` en lugar de emojis
- ✅ Navegación simplificada con fuente pixel

**Antes**:
```html
<nav class="... bg-slate-900/80 backdrop-blur-xl border ...">
  <ul>
    <li><a href="#primeros-pasos">🚀 Primeros Pasos</a></li>
```

**Después**:
```html
<nav class="... pixel-box ...">
  <div class="font-['Press_Start_2P'] ... pixel-corner">
    ≡ Índice
  </div>
  <ul>
    <li><a href="#primeros-pasos">► Primeros Pasos</a></li>
```

---

## 🎭 Componentes Pixel Art Disponibles

### **Clase `.pixel-btn`**
Botón principal con efecto 3D
```html
<a href="#" class="pixel-btn">► Comenzar ahora</a>
```

### **Clase `.pixel-btn-secondary`**
Botón secundario con colores alternativos
```html
<button class="pixel-btn pixel-btn-secondary">☰ Ver comandos</button>
```

### **Clase `.pixel-box`**
Contenedor con borde pixel y sombra
```html
<div class="pixel-box">
  <p>Contenido aquí</p>
</div>
```

### **Clase `.pixel-badge`**
Badge animado con rebote
```html
<div class="pixel-badge">NEW!</div>
```

### **Clase `.pixel-navbar`**
Navbar con franja animada inferior
```html
<nav class="pixel-navbar">...</nav>
```

### **Clase `.pixel-tooltip`**
Tooltip que aparece al hover
```html
<a href="#" class="pixel-tooltip" data-tooltip="Info aquí">Link</a>
```

### **Clase `.pixel-corner`**
Decoración de esquinas tipo RPG
```html
<div class="pixel-corner">
  <h3>Título</h3>
</div>
```

### **Clase `.pixel-hp-bar`**
Barra de corazones decorativa
```html
<div class="pixel-hp-bar">
  <div class="pixel-heart"></div>
  <div class="pixel-heart"></div>
  <div class="pixel-heart"></div>
</div>
```

### **Clase `.pixel-status-bar`**
Barra de estado con fuente pixel
```html
<div class="pixel-status-bar">
  <span>VER 1.0.0</span>
  <span>•</span>
  <span>LVL 50</span>
</div>
```

### **Clase `.pixel-coin`**
Moneda giratoria animada
```html
<span class="pixel-coin"></span>
```

---

## 🎬 Animaciones Implementadas

### **@keyframes pixelGlow**
```css
/* Uso: títulos H1 */
animation: pixelGlow 2s ease-in-out infinite;
```
Efecto de brillo pulsante en texto

### **@keyframes pixelPulse**
```css
/* Uso: backgrounds de .pixel-box::before */
animation: pixelPulse 3s ease-in-out infinite;
```
Opacidad que varía de 0.1 a 0.3

### **@keyframes pixelScroll**
```css
/* Uso: franja inferior de .pixel-navbar::after */
animation: pixelScroll 2s linear infinite;
```
Desplazamiento horizontal de colores

### **@keyframes pixelBounce**
```css
/* Uso: .pixel-badge */
animation: pixelBounce 1s ease-in-out infinite;
```
Rebote vertical de -4px

### **@keyframes pixelShake**
```css
/* Uso: errores o alertas */
animation: pixelShake 0.5s;
```
Shake horizontal de ±2px

### **@keyframes pixelRotate**
```css
/* Uso: .pixel-coin */
animation: pixelRotate 3s linear infinite;
```
Rotación 3D en eje Y

### **@keyframes pixelBarScroll**
```css
/* Uso: .pixel-status-bar-fill::after */
animation: pixelBarScroll 1s linear infinite;
```
Patrón de líneas en movimiento

---

## 📊 Comparativa Antes/Después

| Elemento | Antes (Glassmorphism) | Después (Pixel Art) |
|----------|----------------------|---------------------|
| **Fuente principal** | Default sans-serif | Press Start 2P |
| **Fuente código** | Monospace | VT323 |
| **Bordes** | `border-radius: 24px` | `border-radius: 0` |
| **Sombras** | Smooth blur | Hard offset (8px 8px) |
| **Colores** | Gradientes suaves | Paleta limitada (5 colores) |
| **Animaciones** | Smooth (0.3s ease) | Instantáneas (0.1s) |
| **Background** | 3 blobs animados | Grid pixel estático |
| **Botones** | Hover scale + gradiente | 3D push effect |
| **Navbar** | Backdrop blur | Borde con franja animada |
| **Tables** | Bordes colapsados | Border-spacing 4px |
| **Scrollbar** | Default | Custom pixel art |

---

## 🔧 Cómo Usar los Componentes

### **Crear una sección nueva**
```html
<section id="mi-seccion" class="pixel-box">
  <h2>🎮 Mi Sección</h2>
  <p>Descripción aquí</p>
  
  <div class="pixel-corner">
    <h3>Subsección</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  
  <a href="#" class="pixel-btn">Acción</a>
</section>
```

### **Agregar tooltips**
```html
<span class="pixel-tooltip" data-tooltip="HP: 100/100">
  ♥ Salud
</span>
```

### **Crear barra de progreso**
```html
<div class="pixel-status-bar">
  <span>EXP:</span>
  <div class="pixel-status-bar-fill" style="width: 75%"></div>
  <span>750/1000</span>
</div>
```

### **Mostrar código pixel art**
```html
<pre><code class="language-bash">!minar
!pescar
!pelear</code></pre>
```

---

## 🚀 Próximos Pasos Sugeridos

### **1. Agregar Iconos Pixel Art Custom**
Crear sprites para reemplazar emojis:
- ⚔️ → Espada pixel (16x16)
- 🛡️ → Escudo pixel (16x16)
- 💎 → Diamante pixel (16x16)

### **2. Loading States**
```css
.pixel-loading {
  animation: pixelBounce 0.6s infinite;
}
```

### **3. Notificaciones/Toasts**
```html
<div class="pixel-box" style="position: fixed; top: 20px; right: 20px;">
  <p>✓ Guardado exitoso</p>
</div>
```

### **4. Modo Oscuro/Claro**
Agregar toggle para cambiar paleta:
```css
[data-theme="light"] {
  --pixel-bg-dark: #f0f0f0;
  --pixel-text: #1a1433;
}
```

### **5. Sound Effects**
Agregar sonidos 8-bit en botones (requiere JS):
```javascript
document.querySelectorAll('.pixel-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    new Audio('/assets/sounds/click.wav').play();
  });
});
```

---

## 🐛 Troubleshooting

### **Las fuentes no cargan**
**Solución**: Verificar que Google Fonts está accesible. Backup:
```css
@font-face {
  font-family: 'Press Start 2P';
  src: url('/assets/fonts/PressStart2P.woff2') format('woff2');
}
```

### **Los estilos no se aplican**
**Solución**: Verificar orden de carga de CSS:
```html
<link rel="stylesheet" href="/assets/css/pixel-art.css">
<link rel="stylesheet" href="/assets/css/pixel-sections.css">
<link rel="stylesheet" href="/assets/css/styles.css"> <!-- Este último -->
```

### **Las animaciones van lentas**
**Solución**: Reducir box-shadows complejos en elementos grandes. Usar `will-change`:
```css
.pixel-btn {
  will-change: transform, box-shadow;
}
```

### **Scrollbar custom no funciona en Firefox**
**Solución**: Agregar soporte Firefox:
```css
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pixel-accent-2) var(--pixel-bg-dark);
}
```

---

## 📝 Notas Finales

- ✅ Backup creado en: `src/server/views.backup`
- ✅ Todos los archivos EJS mantienen la misma estructura de contenido
- ✅ Solo cambió la capa visual (CSS)
- ✅ Compatible con dispositivos móviles (responsive)
- ✅ Accesibilidad: todos los colores tienen contraste suficiente (WCAG AA)

---

## 🔗 Referencias

- [Press Start 2P Font](https://fonts.google.com/specimen/Press+Start+2P)
- [VT323 Font](https://fonts.google.com/specimen/VT323)
- [CSS Pixel Art Techniques](https://css-tricks.com/snippets/css/pixel-art-box-shadow/)
- [8-bit Color Palettes](https://lospec.com/palette-list)

---

**Última actualización**: <%= new Date().toLocaleDateString('es-ES') %>  
**Versión diseño**: 1.0.0 (Pixel Art RPG)
