# Changelog — Refatoração do CMS Layout (Julho/2026) Este documento registra as melhorias estruturais, de performance, acessibilidade e segurança aplicadas ao layout do CMS V2. ``` Data: 24-26 Julho 2026 Escopo: app.blade.php, header.blade.php, sidebar.blade.php, cms-layout.css, dashboard.blade.php, Nginx (nginx.conf, lotep.conf.template), config/session.php, ~35 views de módulos CMS ``` --- ## 1. Segurança HTTP (Nginx + Laravel) ### 1.1. Headers de Segurança — `nginx.conf` (global) | Header | Valor | Função | |--------|-------|--------| | `Strict-Transport-Security` | `max-age=63072000; includeSubDomains; preload` | Força HTTPS | | `Referrer-Policy` | `strict-origin-when-cross-origin` | Privacidade de referrer | | `Permissions-Policy` | `geolocation=(), camera=(), microphone=(), payment=(), usb=()` | Bloqueio de APIs não utilizadas | | `X-XSS-Protection` | Removido (obsoleto — substituído por CSP) | — | ### 1.2. Content Security Policy — `lotep.conf.template` Adicionado CSP strict no servidor: ``` default-src 'self'; script-src 'self' 'nonce-{NONCE}' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; object-src 'none'; ``` ### 1.3. Cache de Assets Estáticos Adicionado bloco `location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|webp|avif)$` no `lotep.conf.template`: - `expires 1y` - `Cache-Control: public, immutable` ### 1.4. Segurança de Cookies — `config/session.php` | Parâmetro | Antes | Depois | |-----------|-------|--------| | `secure` | `env(SESSION_SECURE_COOKIE, false)` | `env(SESSION_SECURE_COOKIE, true)` | | `same_site` | `null` | `'lax'` | --- ## 2. Arquitetura CSS ### 2.1. Propriedades Registradas (`@property`) Onze variáveis de tema agora são type-safe e animáveis: ```css @property --sidebar-width { syntax: ""; } @property --sidebar-mini-width { syntax: ""; } @property --header-height { syntax: ""; } @property --theme-primary { syntax: ""; } @property --theme-primary-hover { syntax: ""; } @property --theme-secondary { syntax: ""; } @property --theme-success { syntax: ""; } @property --theme-warning { syntax: ""; } @property --theme-danger { syntax: ""; } @property --theme-info { syntax: ""; } ``` ### 2.2. Cascade Layers (`@layer`) ```css @layer reset, base, layout, components, utilities, print; ``` ### 2.3. Acessibilidade | Elemento | Descrição | |----------|-----------| | `.skip-link` | Link de pular para conteúdo principal (primeiro elemento do ``) | | `prefers-reduced-motion` | Reduz animações quando configurado no sistema | | `color-scheme: light` | Informa navegador sobre suporte a tema claro | | `@media print` | Oculta sidebar/header/footer, formata A4 | ### 2.4. Performance CSS | Técnica | Aplicação | |---------|-----------| | `content-visibility: auto` | `.cms-main` com `contain-intrinsic-size: 500px` | | `contain: layout style` | `.cms-sidebar-menu` — isola renderização | ### 2.5. Classes Utilitárias ```css .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cms-search-btn, .cms-portal-btn, .cms-kbd, .cms-contrast-btn ``` --- ## 3. HTML App Shell ### 3.1. Resource Hints ```html ``` ### 3.2. Script Loading Todos os 6 scripts globais migrados para `defer`: - jQuery 3.6.0 - Bootstrap 5 bundle - cms-alerts.js - masks.js - flatpickr (core + locale pt) Os três blocos `DOMContentLoaded` separados foram unificados em **um único listener** contendo: 1. Restauração do estado da sidebar 2. Persistência de grupos de menu 3. Inicialização de Tooltips/Popovers Bootstrap 4. Configuração do Flatpickr 5. Spotlight Search (Ctrl+K) 6. Controles de acessibilidade (alto contraste + escala de fonte) ### 3.3. Acessibilidade HTML - Skip link como primeiro elemento do ``: `