# Sistema de Demos

## Concepto

Cada **demo** es un template visual completo que incluye:

- Vistas base (welcome, about, contact)
- Header y footer
- CSS y skin
- Estilos de page headers para módulos

Cada demo tiene un **proyecto de referencia** que valida que la implementación sea correcta.

## Helpers Principales

### get_theme_demo() / get_active_demo()

```php
// app/helpers.php
get_theme_demo()  // config('cd-system.theme.demo', 'demo-accounting-1')

// PageHeaderHelper
get_active_demo()  // config('cd-system.theme.demo', 'demo-construction')
```

Ambos retornan el mismo valor: el demo activo para el proyecto actual.

## Mapeo de Demos

Definido en `app/helpers.php` → `get_demo_layout_mapping()`:

| Demo | Proyecto Referencia | Header | Footer | Descripción |
|------|-------------------|--------|--------|-------------|
| demo-restaurant | **Muma** | demo-restaurant | demo-restaurant | Restaurantes, gastronomía |
| demo-law-firm-2 | Bewpro Law Firm | demo-law-firm-2 | demo-law-firm-2 | Bufetes de abogados |
| demo-construction | - | demo-construction | demo-construction | Construcción y obras |
| demo-construction-2 | - | demo-construction-2 | demo-construction-2 | Construcción v2 |
| demo-accounting-1 | - | demo-accounting-1 | demo-accounting-1 | Servicios contables |
| demo-accounting-2 | - | demo-accounting-2 | demo-accounting-2 | Contabilidad v2 |
| demo-architecture-2 | - | demo-architecture-2 | demo-architecture-2 | Arquitectura |
| demo-creative-agency-2 | - | demo-creative-agency-2 | demo-creative-agency-2 | Agencias creativas |
| demo-digital-agency-2 | - | demo-digital-agency-2 | demo-digital-agency-2 | Agencias digitales |
| demo-insurance | - | demo-insurance | demo-insurance | Seguros |
| demo-marketing-1 | - | demo-marketing-1 | demo-marketing-1 | Marketing |
| demo-sass | - | demo-sass | demo-sass | SaaS |
| demo-transportation-logistic | - | demo-transportation-logistic | demo-transportation-logistic | Transporte y logística |
| demo-product-landing | - | demo-product-landing | demo-product-landing | Landing de productos |
| demo-photography-3 | - | demo-photography-3 | demo-photography-3 | Fotografía (side header) |

## Carga de Assets

### Orden en _styles.blade.php

```
Vendor CSS → Theme CSS → CD-System Base → Modular CSS →
Skin CSS → Custom CSS → Demo CSS → @yield('css')
```

**Importante**: El **Demo CSS** se carga **después** de custom.css para que los overrides de identidad de marca del demo prevalezcan.

### Archivos por Demo

| Tipo | Ubicación | Carga |
|------|-----------|-------|
| CSS Demo | `public/template/css/demos/{demo}.css` | Siempre (get_theme_demo()) |
| CSS Skin | `public/template/css/skins/skin-{nombre}.css` | get_theme_skin() |
| JS Base | `public/template/js/demos/{demo}.js` | Si existe |
| JS Custom | `public/template/js/demos/{demo}-custom.js` | Si existe |

### Skin por Demo

`get_theme_skin()` resuelve el skin según `get_demo_skin_mapping()` en helpers. Por defecto:

- demo-restaurant → skin-restaurant
- demo-law-firm-2 → skin-law-firm-2
- etc.

## Clase HTML para Scoping

En `layout/front/master.blade.php`:

```php
if ($activeDemo === 'demo-restaurant') {
    $htmlClasses .= ' demo-restaurant';
}
```

Demos como restaurant scopean sus reglas CSS bajo `html.demo-restaurant` para aislamiento total en multi-tenant.

## Extensiones por Demo

Algunos demos tienen extensiones custom:

- **demo-construction**: demo-construction-custom.js (Load More Projects)
- **demo-construction-2**: demo-construction-2-custom.js, demo-construction-2-custom.css
- **demo-photography-3**: Usa demo-photography.js

Verificar con `demo_has_custom_js()` y `demo_has_custom_css()`.