# Guía Rápida: Actualización Porto 12.1.0 → 13.0.0

## 🎯 Resumen Ejecutivo

**Cambios Principales:**
- ✅ Nuevo demo: Accounting 2
- ✅ Nuevo elemento: Cards Glass Morphism
- 🔄 FontAwesome: 6.5.1 → 6.7.2 (actualizar)
- ✅ Bootstrap: 5.3.3 → 5.3.3 (sin cambios, pero actualizar por fixes)

## 📋 Checklist Rápido

### 1. Pre-Actualización
- [ ] Ejecutar script de análisis: `php scripts/analyze-porto-update.php`
- [ ] Crear backup completo
- [ ] Documentar personalizaciones en `custom.css` y `custom.js`

### 2. Actualización de Plugins
```bash
# FontAwesome (CRÍTICO - actualizar)
cp -r /Users/cokecolombres/Downloads/themeforest-DR9jyGXD-porto-responsive-html5-template/HTML/vendor/fontawesome-free/* \
      public/template/vendor/fontawesome-free/

# Bootstrap (actualizar por posibles fixes)
cp -r /Users/cokecolombres/Downloads/themeforest-DR9jyGXD-porto-responsive-html5-template/HTML/vendor/bootstrap/* \
      public/template/vendor/bootstrap/
```

### 3. Actualización de Archivos Core

#### CSS Core (⚠️ Usar herramienta de diff)
```bash
PORTO_NUEVO="/Users/cokecolombres/Downloads/themeforest-DR9jyGXD-porto-responsive-html5-template/HTML"

# Comparar antes de copiar
kdiff3 $PORTO_NUEVO/css/theme.css public/template/css/theme.css
kdiff3 $PORTO_NUEVO/css/theme-elements.css public/template/css/theme-elements.css
kdiff3 $PORTO_NUEVO/css/theme-blog.css public/template/css/theme-blog.css
kdiff3 $PORTO_NUEVO/css/theme-shop.css public/template/css/theme-shop.css

# Después de revisar, copiar
cp $PORTO_NUEVO/css/theme.css public/template/css/theme.css
cp $PORTO_NUEVO/css/theme-elements.css public/template/css/theme-elements.css
cp $PORTO_NUEVO/css/theme-blog.css public/template/css/theme-blog.css
cp $PORTO_NUEVO/css/theme-shop.css public/template/css/theme-shop.css
```

#### JavaScript Core (⚠️ Usar herramienta de diff)
```bash
# Comparar antes de copiar
kdiff3 $PORTO_NUEVO/js/theme.js public/template/js/theme.js
kdiff3 $PORTO_NUEVO/js/theme.init.js public/template/js/theme.init.js

# Después de revisar, copiar
cp $PORTO_NUEVO/js/theme.js public/template/js/theme.js
cp $PORTO_NUEVO/js/theme.init.js public/template/js/theme.init.js
```

### 4. Actualización de Demos (Solo los que se usan)
```bash
# Identificar demos activos primero
# Ejemplo si se usa architecture-2:
cp $PORTO_NUEVO/css/demos/demo-architecture-2.css public/template/css/demos/
```

### 5. Nuevo Demo Accounting 2 (Opcional)
```bash
# Solo si se necesita
cp $PORTO_NUEVO/css/demos/demo-accounting-2.css public/template/css/demos/
cp $PORTO_NUEVO/js/demos/demo-accounting-2.js public/template/js/demos/ 2>/dev/null || true
```

## ⚠️ Archivos que NO Tocar

**NUNCA actualizar estos archivos:**
- ❌ `public/template/css/custom.css` - Personalizaciones
- ❌ `public/template/js/custom.js` - Personalizaciones
- ❌ `public/template/css/cd-system-base.css` - Sistema CD
- ❌ `public/template/css/admin-*.css` - Admin personalizado
- ❌ Cualquier archivo en `modules/` - Módulos del sistema

## 🔍 Verificaciones Post-Actualización

### Testing Básico
- [ ] Iconos FontAwesome funcionan (verificar iconos usados en el proyecto)
- [ ] Componentes Bootstrap funcionan
- [ ] Layouts no se rompieron
- [ ] Menús y navegación funcionan
- [ ] Formularios funcionan
- [ ] Carousels/sliders funcionan
- [ ] Responsive funciona
- [ ] No hay errores en consola del navegador

### Testing por Sección
- [ ] Header/Navegación
- [ ] Footer
- [ ] Páginas de Blog
- [ ] Páginas de Productos/Servicios
- [ ] Formularios de Contacto
- [ ] Galerías
- [ ] Portfolios

## 🛠️ Herramientas Recomendadas

### Comparación de Archivos
```bash
# Instalar kdiff3 (recomendado por Okler)
brew install kdiff3

# Comparar archivos
kdiff3 archivo1.css archivo2.css

# Comparar directorios
kdiff3 /ruta/viejo/porto /ruta/nuevo/porto
```

### Alternativas
- **VS Code**: Extensión "Compare Folders"
- **Beyond Compare**: Comercial pero muy potente
- **Meld**: Alternativa open source

## 📊 Orden de Prioridad

1. **ALTA PRIORIDAD** (Hacer primero)
   - FontAwesome (6.5.1 → 6.7.2)
   - CSS Core (theme.css, theme-elements.css)
   - JS Core (theme.js, theme.init.js)

2. **MEDIA PRIORIDAD** (Hacer después)
   - Bootstrap (aunque versión igual)
   - Demos en uso
   - Skins en uso

3. **BAJA PRIORIDAD** (Opcional)
   - Nuevo demo Accounting 2
   - Nuevo elemento Glass Morphism

## 🚨 Problemas Comunes y Soluciones

### Iconos FontAwesome no aparecen
- Verificar que se copiaron los webfonts
- Limpiar cache del navegador
- Verificar rutas en CSS

### Estilos rotos después de actualizar
- Comparar `custom.css` con nuevos estilos
- Verificar que no hay conflictos de clases
- Revisar selectores CSS que puedan haber cambiado

### JavaScript no funciona
- Verificar consola del navegador
- Comparar `custom.js` con nuevos métodos
- Verificar inicializaciones de plugins

## 📞 Recursos

- **Documento Completo**: `docs/PORTO_UPDATE_STRATEGY.md`
- **Script de Análisis**: `php scripts/analyze-porto-update.php`
- **Changelog Porto**: https://www.okler.net/forums/topic/porto-changelog/

## ✅ Checklist Final

- [ ] Backup creado
- [ ] FontAwesome actualizado y verificado
- [ ] Bootstrap actualizado
- [ ] CSS core actualizado (con diff)
- [ ] JS core actualizado (con diff)
- [ ] Demos actualizados (solo los necesarios)
- [ ] Testing completo realizado
- [ ] Personalizaciones verificadas
- [ ] Sin errores en consola
- [ ] Deploy a staging
- [ ] Testing en staging
- [ ] Deploy a producción

---

**Tiempo Estimado**: 2-4 horas (dependiendo de personalizaciones)
**Riesgo**: Medio (mitigado con backups y testing)