# Templates (Demos) — Estado y Optimizacion

> Ultima actualizacion: 2026-03-29

---

## Contexto

Un "template" o "demo" es la capa visual del CMS. Controla como se ve el sitio:
header, footer, CSS, page-header, y paginas base (welcome, about, contact).

El principio fundamental: **el demo controla la estetica, el modulo controla la funcionalidad**.
Los modulos son agnosticos al demo. La adaptacion visual se logra via CSS overrides y vistas especificas.

### Documentacion tecnica existente

| Documento | Contenido | Ubicacion |
|-----------|-----------|-----------|
| Arquitectura demo-modular | Principio fundamental, 3 capas de adaptacion | `docs/demos/arquitectura-demo-modular.md` |
| Checklist integracion | 44 items de validacion por demo | `docs/demos/checklist-integracion-demo-modulos.md` |
| Guia integracion | Paso a paso para crear/iterar demos | `docs/demos/guia-integracion-demo-modular.md` |
| Proceso Porto | Extraer demos del theme Porto → CMS | `docs/demos/proceso-adaptacion-demo-porto.md` |
| Plantilla demo | Template para documentar nuevos demos | `docs/demos/_plantilla-demo.md` |
| Sistema demos (core) | Helpers, mapeo, carga de assets | `docs/core/02-sistema-demos.md` |
| Guia demos y cores | Seleccion de producto por rubro | `docs/compania2.0/guia-demos-y-cores.md` |
| Prompt new-demo | Prompt operativo detallado | `docs/prompts/new-demo-template.md` |

---

## Modelo de Madurez: 3 Niveles de Adaptacion

Cada demo tiene 3 capas de integracion con los modulos:

```
NIVEL A: OPTIMIZADO
    Estructura base completa (header, footer, CSS, page-header, vistas cd-base)
    + Dynamic headers registrados (10/10 modulos)
    + CSS overrides globales (dark/light mode, componentes, tipografia)
    + Module overrides (vistas de modulos adaptadas al diseno del demo)
    + Validado con proyecto real

NIVEL B: FUNCIONAL
    Estructura base completa
    + Dynamic headers registrados
    + CSS overrides parciales
    - Sin module overrides (modulos usan vistas genericas)
    - Funciona pero los modulos se ven "genericos"

NIVEL C: ESTRUCTURA BASE
    Estructura base completa
    + Dynamic headers registrados
    - Sin CSS overrides significativos
    - Sin module overrides
    - Se ve funcional pero sin pulir
```

La diferencia entre B y A es la que el usuario final percibe.
Un sitio Nivel B funciona. Un sitio Nivel A se ve profesional y cohesivo.

---

## Dashboard: Estado de los 17 Demos

### Leyenda

```
Estructura:  Header + Footer + Page-Header + CSS + CdBase Views (welcome/about/contact)
DynHeaders:  Registrado en los 10 dynamic-header.blade.php de modulos
CSS Size:    Indicador de profundidad de customizacion CSS
Mod Override: Vistas de modulos adaptadas al demo (NO cd-base)
Extras:      Vistas adicionales en cd-base (partials, paginas custom)
Cores:       Cantidad de core presets que usan este demo
Shop Prods:  Total de shop products que dependen de este demo
```

### Demos activos (usados por al menos 1 core preset)

| Demo | Estructura | DynH | CSS | Mod Override | Extras | Cores | Shop | Nivel |
|------|-----------|------|-----|-------------|--------|-------|------|-------|
| demo-digital-agency-2 | OK | 10/10 | 15 KB | **products(3)** | - | 5 | 61 | **A-** |
| demo-insurance | OK | 10/10 | 5.5 KB | - | - | 4 | 30 | B |
| demo-accounting-1 | OK | 10/10 | 37 KB | - | - | 2 | 19 | B+ |
| demo-business-consulting | OK | 10/10 | 56 KB | - | - | 2 | 19 | B |
| demo-accounting-2 | OK | 10/10 | 36 KB | - | partials(2) | 1 | 50 | B+ |
| demo-architecture-2 | OK | 10/10 | 18 KB | - | - | 1 | 22 | B |
| demo-marketing-1 | OK | 10/10 | 10 KB | - | parque-lineal* | 1 | 11 | B |
| demo-construction | OK | 10/10 | 40 KB | - | - | 1 | 9 | B |
| demo-real-estate | OK | 10/10 | 3.8 KB | - | - | 1 | 9 | C+ |
| demo-restaurant | OK | 10/10 | 9 KB | - | menu | 1 | 8 | B |
| demo-photography-3 | OK | 10/10 | 65 KB | - | - | 1 | 6 | B |
| demo-law-firm-2 | OK | 10/10 | 11 KB | - | - | 1 | 6 | B |

*parque-lineal = vista project-specific, probable debt tecnico.

### Demos huerfanos (sin core preset asignado)

| Demo | Estructura | DynH | CSS | Extras | Candidato para | Nivel |
|------|-----------|------|-----|--------|---------------|-------|
| demo-sass | OK | 10/10 | 4.8 KB | - | startup-tech | C |
| demo-transportation-logistic | OK | 10/10 | 2.4 KB | - | municipalities | C |
| demo-construction-2 | OK | 10/10 | 18 KB | - | *(sin candidato)* | B |
| demo-creative-agency-2 | OK | 10/10 | 6.6 KB | - | website-reseller ya asignado | B |
| demo-product-landing | OK | 10/10 | 17 KB | 3 custom + partials(2) | *(landing pages)* | B |

### Resumen

| Nivel | Cantidad | Demos |
|-------|----------|-------|
| A (optimizado) | 0 | - |
| A- (casi optimizado) | 1 | demo-digital-agency-2 |
| B+ (funcional avanzado) | 2 | demo-accounting-1, demo-accounting-2 |
| B (funcional) | 9 | insurance, business-consulting, architecture-2, marketing-1, construction, restaurant, photography-3, law-firm-2, construction-2, creative-agency-2, product-landing |
| C/C+ (base) | 5 | real-estate, sass, transportation-logistic |

**0 demos en Nivel A completo. 1 en A-. El 94% necesita optimizacion de module overrides.**

---

## Que significa "optimizar" un demo

Pasar de Nivel B a Nivel A requiere adaptar las vistas de los modulos activos al estilo del demo.

### Ejemplo: demo-digital-agency-2 (el unico con overrides)

```
resources/views/modules/products/frontend/demos/demo-digital-agency-2/
├── catalogue.blade.php    ← listado de productos adaptado al demo
├── category.blade.php     ← categoria adaptada al demo
└── show.blade.php         ← detalle de producto adaptado al demo
```

### Que hay que hacer para cada demo activo

Para cada modulo que usa el core preset, crear vistas adaptadas en:
`resources/views/modules/{modulo}/frontend/demos/demo-{name}/`

| Modulo | Vistas principales | Prioridad |
|--------|--------------------|-----------|
| services | index, show | ALTA (presente en 17/21 cores) |
| blog | index, show | ALTA (presente en 14/21 cores) |
| faqs | index | ALTA (presente en 16/21 cores) |
| gallery | index | MEDIA (presente en 11/21 cores) |
| projects | index, show | MEDIA (presente en 8/21 cores) |
| products | catalogue, show, category | MEDIA (presente en 5/21 cores) |
| team | index | BAJA (presente en 3/21 cores) |
| references | index | BAJA (presente en 3/21 cores) |
| menu | index | BAJA (presente en 1/21 cores) |

### Alcance por demo (modulos que necesitan override)

| Demo | Cores | Modulos a optimizar | Esfuerzo |
|------|-------|---------------------|----------|
| demo-digital-agency-2 | 5 | services, blog, faqs, gallery, projects (products YA HECHO) | Alto |
| demo-insurance | 4 | services, blog, faqs, references, team, gallery, products | Alto |
| demo-accounting-1 | 2 | services, blog, faqs, gallery, projects, team, references | Alto |
| demo-business-consulting | 2 | services, faqs | Bajo |
| demo-accounting-2 | 1 | gallery, blog, faqs, projects | Medio |
| demo-architecture-2 | 1 | services, gallery, blog, faqs, projects | Medio |
| demo-marketing-1 | 1 | services, gallery, faqs, projects | Medio |
| demo-construction | 1 | services, blog, faqs, gallery, projects | Medio |
| demo-real-estate | 1 | tokko, services, blog, faqs, gallery, projects | Alto |
| demo-restaurant | 1 | menu, blog, faqs, gallery | Medio |
| demo-photography-3 | 1 | gallery, blog, projects | Bajo |
| demo-law-firm-2 | 1 | services, blog, faqs, team, references | Medio |

---

## Estrategia de optimizacion

### Enfoque: por modulo, no por demo

Dado que los modulos son compartidos entre demos, tiene mas sentido optimizar **por modulo**:

```
1. services (17 cores)  → crear vistas para cada demo que lo usa
2. faqs (16 cores)      → crear vistas para cada demo que lo usa
3. blog (14 cores)      → crear vistas para cada demo que lo usa
4. gallery (11 cores)   → crear vistas para cada demo que lo usa
...
```

Pero hay un matiz: cada vista de modulo adaptada a un demo es trabajo de frontend que requiere conocer el estilo del demo.

### Enfoque alternativo: por demo de mayor impacto

```
1. demo-digital-agency-2 (61 shop products)  → completar module overrides
2. demo-accounting-2 (50 shop products)      → crear module overrides
3. demo-insurance (30 shop products)         → crear module overrides
4. demo-accounting-1 (19 shop products)      → crear module overrides
5. demo-business-consulting (19 shop products) → crear module overrides
...
```

### Enfoque recomendado: HIBRIDO

Empezar por el modulo mas comun (services) en los demos de mayor impacto.
Esto maximiza cobertura con el menor esfuerzo.

---

## Airtable Tracking

Los campos de template ya estan en la tabla Products:
- `Demo_Assets_Complete` → estructura base (ya OK para los 21 activos)
- `Dynamic_Headers` → registro en modulos (ya OK para 20/21)
- `Template` → linked record a tabla Templates

**Campos que podrian agregarse para tracking de optimizacion:**
- `Module_Overrides` (text) → que modulos tienen vistas adaptadas
- `Template_Level` (select: A / B / C) → nivel de madurez

---

## Demos CSS-only (upgrade candidates)

42 CSS files sin header/footer Blade. Los mas relevantes:

| CSS Demo | Industria | CSS Size | Candidato para |
|----------|----------|----------|---------------|
| demo-hotel | Turismo | existe | tourism-rentals |
| demo-medical / demo-medical-2 | Salud | existe | medical-suite |
| demo-education | Educacion | existe | *(futuro)* |
| demo-gym | Fitness | existe | *(futuro)* |
| demo-dentist | Salud dental | existe | *(futuro)* |
| demo-finance | Finanzas | existe | *(futuro, o reusa insurance)* |

Upgrade = crear header + footer + page-header + vistas cd-base.
Esfuerzo medio por demo (~2-4h basado en proceso Porto documentado).