---
id: UI-<CMS|PORTAL>
tipo: ui
onda: <1|2>
status: pendente
unidades: [UI-<CMS|PORTAL>]
fontes:
  - V2/layouts/<cms|portal>/
depende_de: []
consumidores: []
criticidade: alta
dono:
---

# UI <CMS|Portal>

> Guia: documentar garantia visual/funcional, composição, singularidades e forma de
> extensão. Não descrever classe por classe do Bootstrap; descrever o contrato.

## 0. Ficha de identidade

| Campo | Valor |
|---|---|
| Efeito primário | o que toda página herda (estrutura, navegação, tema, a11y) |
| Entrada | `@extends`, `@section`, variáveis compartilhadas |
| Saída | HTML/head, navegação, conteúdo, scripts |
| Efeitos colaterais | CSS/JS carregados, cookies de tema, cache |
| Particularidade central | |
| Como se integra | namespace, layout, seções obrigatórias |
| Se removido, quebra | todas as páginas do contexto |

## 1. Efeito

### 1.1 Garantias para qualquer página
> Ex.: skip-link, `<main id="main-content">`, meta viewport, nonce CSP, barra de
> acessibilidade, tema persistido, ordem de scripts.

### 1.2 O que muda por página
> Seções obrigatórias/opcionais e o que cada uma injeta.

### 1.3 O que o layout NÃO faz
> Limites (ex.: não carrega JS de módulo, não define breadcrumb).

## 2. Abordagem

### 2.1 Hierarquia de composição
```mermaid
flowchart TD
  app[app.blade] --> header
  app --> sidebar
  app --> content[@yield content]
```
> Quem inclui quem, com caminhos e namespaces.

### 2.2 Ordem de carregamento (CSS, JS, diretivas)
> Ordem exata e por quê; dependências entre parciais.

### 2.3 Trechos de código pivô
```blade
{{-- V2/layouts/.../arquivo.blade.php:10-24 — o que mostra --}}
```

### 2.4 Tema e configuração
> Variáveis CSS, origem dos valores (`v2_cms_theme_configs`, `v2_portal_configs`),
> fallback, cache.

## 3. Particularidades

### 3.1 Parciais únicas
> Catálogo do que existe só aqui (barra de acessibilidade, VLibras, print, metadata,
> paginação) e o comportamento específico.

### 3.2 Invariantes de acessibilidade
> eMAG/WCAG: skip, foco, contraste, atalhos, `aria-*`, redução de movimento, zoom.

### 3.3 Armadilhas
> Parciais que exigem variáveis, namespaces, duplicação CMS×portal, `.bak` morto,
> scripts que dependem de jQuery, conflito de IDs.

### 3.4 Divergências e dívidas

## 4. Integrabilidade

### 4.1 Contrato de uso
| Item | Obrigatório | Tipo | Efeito |
|---|---|---|---|
| `@extends('v2-cms::layouts.app')` | sim | layout | herda chrome |
| `@section('title')` | sim | string | `<title>` |
| ... | | | |

### 4.2 Parciais e componentes
| Parcial | Props/variáveis | Slots | Consumidores | Efeito |
|---|---|---|---|---|

### 4.3 Receitas de uso
> Página CMS completa mínima; página portal completa mínima; inclusão de parcial.

### 4.4 Anti-uso
> O que quebra (variável ausente, ordem de script, `@include` em vez de componente).

## 5. Catálogo de arquivos

| Arquivo | Papel | Variáveis | Observação |
|---|---|---|---|

## 6. Acessibilidade e responsividade
> Breakpoints, reflow, contraste, teclado, leitores de tela, VLibras, fontes
> (OpenDyslexic), impressão.

## 7. Assets e build
> CSS/JS próprios, vendor, nonce CSP, versões, cache-busting.

## 8. Lacunas

## 9. Checklist de paridade

- [ ] `PC-...-01` — ...

## 10. Evidências consultadas