# **CD-System: Análisis Detallado de la Arquitectura Multi-Demo**

Este documento analiza los componentes y mecanismos técnicos que estructuran y diferencian a cada una de las demostraciones (demos) activas del sistema, permitiendo su dinamismo, aislamiento CSS y adaptabilidad multi-tenant.

---

## **1. Vistas Base del Frontend (Vistas de Contenido)**

Las páginas principales que visualiza el usuario cambian por completo de estructura según el demo activo.

- **Controlador Central**: `App\Modules\CdBase\Controllers\Frontend\HomepageController`
- **Carga Dinámica**: Se utiliza el helper `App\Helpers\DemoViewHelper::getDemoView($viewName)` para resolver la vista.
- **Rutas por Demo**:
    - **Welcome (Inicio)**: `resources/views/modules/cd-base/frontend/demos/{demo-slug}/welcome.blade.php`
    - **About (Nosotros)**: `resources/views/modules/cd-base/frontend/demos/{demo-slug}/about.blade.php`
    - **Contact (Contacto)**: `resources/views/modules/cd-base/frontend/demos/{demo-slug}/contact.blade.php`
    - **Fallback (Global)**: Si un archivo no existe para el demo activo, el helper recurre a las plantillas base en `resources/views/modules/cd-base/frontend/{viewName}.blade.php`.

---

## **2. Componentes de Estructura y Maquetación (Layouts)**

Los marcos generales del sitio (cabeceras y pies de página) varían estéticamente para adecuarse al rubro de cada demo.

- **Master Layout**: `resources/views/layout/front/master.blade.php`
- **Inclusión Dinámica**: Llama a los partials `_header.blade.php` y `_footer.blade.php` en `resources/views/layout/front/partials/`.
- **Mapeo de Layouts**:
    - El helper `get_demo_layout($component)` consulta el mapeo dinámico en `get_demo_layout_mapping()` (definido en `app/helpers.php`).
    - **Headers**: `resources/views/layout/front/headers/{layout-slug}.blade.php` (ej. `demo-law-firm-2`, `demo-insurance`, `default`).
    - **Footers**: `resources/views/layout/front/footers/{layout-slug}.blade.php` (ej. `demo-law-firm-2`, `demo-insurance`, `default`).

---

## **3. Page Headers Dinámicos para Módulos**

Cuando el usuario navega a un módulo autónomo (como el Blog, Servicios o Proyectos), el encabezado de página (breadcrumb y banner superior) debe corresponder al estilo del demo activo.

- **Clase Helper**: `App\Helpers\PageHeaderHelper`
- **Configuración Centralizada**: `config/page-headers.php`
- **Tipos de Headers**:
    - **Modern (`modern`)**: Renderiza el componente reutilizable `<x-page-header>` con estilo dinámico y variables CSS de marca.
    - **Classic (`classic`)**: Carga plantillas específicas o integraciones legacy de Porto.
- **Archivos asociados**:
    - Componente Moderno: `resources/views/components/page-header.blade.php`
    - Partials Clásicos: `resources/views/layout/front/partials/page-header-{demo-slug}.blade.php`
    - Partials Modulares: `resources/views/modules/{module}/frontend/partials/dynamic-header.blade.php`

---

## **4. Recursos Estáticos: Hojas de Estilo y Scripts (CSS / JS)**

Cada demo carga su propio set de personalización de UI, fuentes y comportamientos dinámicos mediante scripts dedicados.

- **Carga en Plantilla**: Se gestiona en `resources/views/layout/front/partials/_styles.blade.php` y `_scripts.blade.php`.
- **Hojas de Estilo (CSS)**:
    - **Skins de Porto**: Mapeo inteligente en `get_theme_skin()` (de demo a skin slug, ej. `demo-law-firm-2` ➔ `skin-law-firm-2`). Cargado desde `public/template/css/skins/{skin-slug}.css`.
    - **Demo CSS**: Cargado desde `public/template/css/demos/{demo-slug}.css` (contiene layouts estructurales particulares).
    - **Custom Demo CSS (opcional)**: Evaluado por `demo_has_custom_css()` y cargado desde `public/template/css/demos/{demo-slug}-custom.css`.
- **Scripts (JS)**:
    - **Demo JS**: Evaluado por `demo_has_js()` y cargado de `public/template/js/demos/{demo-slug}.js` (inicializadores del carrusel y librerías del demo).
    - **Custom Demo JS (opcional)**: Evaluado por `demo_has_custom_js()` y cargado de `public/template/js/demos/{demo-slug}-custom.js`.

---

## **5. Aislamiento CSS y Overrides de Módulos (Scoping)**

Dado que los estilos de módulos (`services.css`, `projects.css`, `blog.css`, etc.) se cargan globalmente, para evitar colisiones visuales entre diferentes demos, se implementa una técnica de **scoping CSS**.

- **Clase del Demo en HTML**: En `master.blade.php`, se añade el slug del demo activo como clase al elemento raíz `<html>`:
    
    ```
    html
    
    <htmlclass="light {{ $activeDemo }}">
    ```
    
- **Overrides en Demos**: Los archivos de estilo específicos del demo (`public/template/css/demos/{demo-slug}.css`) pueden sobrescribir cualquier propiedad visual de un módulo anteponiendo la clase del demo. Por ejemplo:
    
    ```
    css
    
    .demo-law-firm-2.services-list-item {
    border-left:3px solidvar(--primary);
    }
    ```
    

---

## **6. Schemas Declarativos (Source of Truth)**

Para lograr que el Panel de Administración y los datos por defecto se auto-generen según el demo activo del tenant, el sistema usa schemas JSON.

- **Ubicación**: `database/schemas/demos/{demo-slug}.json`
- **Propósito**:
    1. **Admin form auto-render**: El admin lee el JSON y dibuja los inputs del formulario dinámicamente (`SchemaDrivenAdminRenderer`).
    2. **JSON seed template**: Estructura de base descargable para resellers.
    3. **CI parity check**: Script de paridad que detecta campos no declarados en el schema pero utilizados en las plantillas Blade.

---

## **7. Configuración de Características de Demo (Demo Features)**

- **Archivo de configuración**: `config/demos.php`
- **Definición**: Declara de forma centralizada qué "features" (ej: `carousel`, `about_inline`, `testimonials`, `projects_preview`) están activas para cada demo y qué estilo de diseño se aplica en la sección Nosotros (`about_style`)