# 🎨 Guía de Personalización del Proyecto

Esta guía te ayudará a personalizar los estilos, colores y branding del proyecto.

## 🎨 **Paso 2: Personalizar Colores y Estilos**

Todo el sistema de diseño está centralizado en un solo archivo:

### **Archivo Principal: `frontend/src/assets/main.css`**

Este archivo contiene **todas las variables CSS** que controlan la apariencia de la aplicación. Solo necesitas modificar las variables en la sección `:root`:

```css
:root {
  /* ===== CAMBIAR ESTOS COLORES PARA PERSONALIZAR ===== */
  
  /* Colores principales del tema */
  --color-primary: #267073;        /* ← Color principal (verde actual) */
  --color-primary-hover: #1e5a5d;  /* ← Hover del color principal */
  --color-primary-light: #3a8488;  /* ← Variante clara */
  --color-primary-dark: #1a5457;   /* ← Variante oscura */
  
  /* Colores secundarios */
  --color-secondary: #ff9900;      /* ← Color secundario (naranja actual) */
  --color-secondary-hover: #e68a00; /* ← Hover del secundario */
  --color-secondary-light: #ffad33; /* ← Variante clara del secundario */
  
  /* Colores de estado (opcional cambiar) */
  --color-success: #28a745;        /* ← Verde de éxito */
  --color-danger: #dc3545;         /* ← Rojo de error */
  --color-warning: #ffc107;        /* ← Amarillo de advertencia */
}
```

## 🏷️ **Paso 3: Personalizar Branding y Nombres**

### **Archivo de Configuración: `frontend/src/utils/appConfig.ts`**

Este archivo maneja los nombres de la aplicación. Para cambiar el branding, modifica las variables de entorno:

### **Archivo: `.env` (crear basado en `env.example`)**

```bash
# Branding Configuration
VITE_APP_NAME=Tu Nueva Plataforma
VITE_APP_COMPANY_NAME=Nombre de tu Empresa
VITE_APP_COMPANY_URL=https://tu-empresa.com/
VITE_APP_FOOTER_TEXT=Todos los derechos reservados
```

### **Archivo HTML: `frontend/index.html`**

Cambiar el título de la página:
```html
<title>Tu Nueva Plataforma</title>
```

## 🖼️ **Paso 4: Reemplazar Logos e Imágenes**

### **Archivos a Reemplazar:**

1. **Logo Principal:**
   - `frontend/public/logo.png` (48x48px recomendado)

2. **Favicon:**
   - `frontend/public/favicon.svg`

3. **Imagen por defecto del bot:**
   - `backend/src/assets/default-bot-image.svg`

## 📁 **Paso 5: Estructura de Archivos Clave**

```
📁 Archivos Principales para Personalización:
├── 🎨 frontend/src/assets/main.css          ← TODOS LOS COLORES
├── 🏷️ frontend/src/utils/appConfig.ts       ← Nombres de la app
├── 📄 frontend/index.html                   ← Título de la página
├── 🖼️ frontend/public/logo.png              ← Logo principal
├── 🖼️ frontend/public/favicon.svg           ← Icono del navegador
├── ⚙️ .env                                  ← Variables de entorno
└── 📄 README.md                             ← Documentación
```

## 🚀 **Proceso de Personalización Completo**

### **Para un Proyecto Nuevo:**

1. **Cambiar colores en `main.css`** (5 minutos)
2. **Actualizar nombres en `.env`** (2 minutos)
3. **Reemplazar logo y favicon** (3 minutos)
4. **Cambiar título en `index.html`** (1 minuto)
5. **Actualizar README.md** con información del nuevo proyecto

**⏱️ Tiempo total estimado: 15-20 minutos**

## 💡 **Tips Adicionales**

1. **Colores de Accesibilidad:** Asegúrate de que los nuevos colores tengan suficiente contraste
2. **Consistencia:** Usa siempre las variables CSS, nunca colores hardcodeados
3. **Testing:** Prueba en diferentes dispositivos después de cambiar colores
4. **Backup:** Mantén una copia del `main.css` original como referencia

---