feat(ux): incorporar diretrizes M3 de UX writing e organizacao de telas, modais e paineis

rules/refactoring-ui-hierarquia-despoluicao.md

@@ -96,9 +96,9 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
 3. **Estados Vazios Despoluídos (p. 234):**
    - Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA).
 
-### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller)
+### 7. Ergonomia Cognitiva, Orçamento de Viewport e Organização de Telas, Modais e Painéis (Leis de Sweller, Hick, Miller e Material Design 3)
 
-Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial:
+Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 5 limites quantitativos de ergonomia espacial:
 
 1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:**
    - Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban).
@@ -114,7 +114,11 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
    - Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`).
 4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):**
    - Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo.
-   - No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
+   - No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
+5. **Matriz de Superfícies, *Chunking* de Telas e Regiões Fixas em Modais/Painéis (Material Design 3):**
+   - **Agrupamento temático em telas (*Chunking*):** Dividir formulários longos em blocos lógicos de no máximo **4 a 6 campos** encabeçados por título curto em *Sentence case* (`16px–20px`, peso `600`, sem `:` e sem `.`).
+   - **Modais Básicos (*Basic Dialogs*, `400px–560px`):** Usar com parcimônia, apenas para confirmações críticas/destrutivas ou decisões rápidas (até 3–4 campos). **Proibido** usar modal para feedback passivo de sucesso (usar `v-snackbar`) ou formulários extensos de 6+ campos (usar *Side Sheet* ou Página).
+   - **Regiões Fixas (*Pinned Header & Footer*):** Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com título em *Sentence case* e botão fechar `X` nos painéis) e a **Barra de Ações no rodapé** (`[Cancelar]` + `[Verbo específico]`, nunca `Sim/Não/OK`) devem permanecer **sempre fixos**, rolando apenas o corpo central caso necessário.
 
 ---
 
@@ -142,18 +146,18 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
 </v-card>
 ```
 
-### ✅ Correto — Hierarquia clara, menos bordas e pirâmide de ações (*Refactoring UI*)
+### ✅ Correto — Hierarquia clara, menos bordas, *Sentence case* e pirâmide de ações (*Refactoring UI* + M3)
 
 ```vue
 <section class="pa-6">
   <header class="d-flex align-baseline justify-space-between mb-6">
     <div>
-      <h1 class="text-h6 font-weight-semibold">Licenças Ambientais</h1>
+      <h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
       <p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
     </div>
     <div class="d-flex align-center ga-3">
       <v-btn color="secondary" variant="outlined">Exportar</v-btn>
-      <v-btn color="primary" variant="flat">Nova Licença</v-btn>
+      <v-btn color="primary" variant="flat">Nova licença</v-btn>
     </div>
   </header>
 
@@ -180,6 +184,8 @@ Elimina o aspecto amador, sobrecarregado e confuso das interfaces geradas pela I
 ## Referências
 
 - Livro completo no Paiol: `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
+- Material Design 3 — Writing, Layout, Dialogs & Side Sheets: `https://m3.material.io/foundations/writing/best-practices`, `https://m3.material.io/components/dialogs/guidelines`, `https://m3.material.io/components/side-sheets/guidelines`
+- Rule: `global/rules/mensagens-usuario`
 - Rule: `global/rules/estilos-design-system`
 - Skill: `skills/ux/SKILL.md`
 - Skill: `skills/ux-fluxo-funcional/SKILL.md`