# Carga de Estilos y Aislamiento ## Orden de Carga CSS Definido en `resources/views/layout/front/partials/_styles.blade.php`: ``` 1. Vendor CSS (Bootstrap, etc.) 2. Theme CSS (template base) 3. CD-System Base (layout, componentes) 4. Modular CSS (estilos por módulo) 5. Skin CSS (skin-{nombre}.css) 6. Custom CSS (custom.css, overrides) 7. Demo CSS (demos/{demo}.css) ← Después de custom 8. @yield('css') (estilos por página) ``` **Importante**: El Demo CSS se carga **después** de custom.css para que la identidad visual del demo prevalezca sobre overrides genéricos. ## Demo CSS **Archivo:** `public/template/css/demos/{demo}.css` Ejemplo: `demo-restaurant.css` para el demo de restaurantes. ### Scoping Para aislamiento multi-tenant, los demos scopean sus reglas: ```css html.demo-restaurant .page-header-modern { ... } html.demo-restaurant .custom-heading { ... } html.demo-restaurant .btn-primary { ... } ``` La clase `demo-restaurant` se añade al `` en master cuando el demo activo es demo-restaurant. ### Skin El skin aporta colores y variables. Se carga con `get_theme_skin()`: ```php $skin = get_theme_skin(); // ej: skin-restaurant // → public/template/css/skins/skin-restaurant.css ``` ## Aislamiento entre Demos - **Un demo por proyecto**: Solo se carga el CSS del demo activo. - **Clase HTML**: `html.demo-{nombre}` permite selectores específicos sin afectar otros demos. - **Variables CSS**: Los skins pueden definir `--color-primary`, `--font-heading`, etc., que el demo utiliza. ## Archivos por Demo | Asset | Ruta | Condición | |-------|------|-----------| | CSS Demo | `public/template/css/demos/demo-restaurant.css` | Siempre para demo-restaurant | | CSS Skin | `public/template/css/skins/skin-restaurant.css` | get_theme_skin() | | JS Demo | `public/template/js/demos/demo-restaurant.js` | Si existe | | JS Custom | `public/template/js/demos/demo-restaurant-custom.js` | demo_has_custom_js() | | CSS Custom | `public/template/css/demos/demo-restaurant-custom.css` | demo_has_custom_css() | ## Extensibilidad Para añadir un nuevo demo: 1. Crear `public/template/css/demos/demo-nuevo.css` con reglas bajo `html.demo-nuevo`. 2. Añadir la clase al `` en master cuando `get_theme_demo() === 'demo-nuevo'`. 3. Añadir el demo a `get_demo_layout_mapping()` en helpers. 4. Crear header y footer `demo-nuevo.blade.php`. 5. Crear vistas base en `modules/cd-base/frontend/demos/demo-nuevo/`. 6. Actualizar page-headers.php si requiere tipo distinto. 7. Documentar en `docs/demos/demo-nuevo/`.