aprimoração de ia

global/rules/modal-dialog-padrao-betha

@@ -1,105 +0,0 @@
----
-type: rule
-name: modal-dialog-padrao-betha
-description: Define a estrutura obrigatória de modais e dialogs MUI no padrão Betha — header escuro, body branco, footer cinza — para os frontends React do ecossistema GOV
-scope: global
-trigger: context_match
-priority: alta
-updatedAt: "2026-07-02"
----
-
-# Regra: Padrão Modal/Dialog MUI — Estrutura Betha
-
-Todo modal/dialog nos frontends React do ecossistema GOV deve seguir a estrutura visual Betha: **header escuro + body branco + footer cinza**.
-
-## Estrutura Obrigatória
-
-```typescript
-<Dialog
-  open={open}
-  onClose={onClose}
-  PaperProps={{
-    sx: {
-      borderRadius: "0.25rem",
-      boxShadow: "0 0.5rem 1rem rgba(0,0,0,.15)",
-    }
-  }}
->
-  {/* HEADER — escuro */}
-  <DialogTitle
-    sx={{
-      backgroundColor: "#343a40",
-      color: "#ffffff",
-      padding: "0.75rem 1rem",
-      position: "relative",
-    }}
-  >
-    Título do Modal
-    <IconButton
-      onClick={onClose}
-      size="small"
-      sx={{ position: "absolute", right: 8, top: 8, color: "#ffffff" }}
-    >
-      <CloseIcon fontSize="small" />
-    </IconButton>
-  </DialogTitle>
-
-  {/* BODY — branco */}
-  <DialogContent sx={{ backgroundColor: "#ffffff", padding: "1rem" }}>
-    {/* conteúdo */}
-  </DialogContent>
-
-  {/* FOOTER — cinza claro */}
-  <DialogActions
-    sx={{
-      backgroundColor: "#f8f9fa",
-      borderTop: "1px solid #dee2e6",
-      padding: "0.75rem 1rem",
-    }}
-  >
-    <Button variant="outlined" color="secondary" onClick={onClose}>
-      Cancelar
-    </Button>
-    <Button variant="contained" color="primary" onClick={onConfirm}>
-      Confirmar
-    </Button>
-  </DialogActions>
-</Dialog>
-```
-
-## Tokens dos Estilos
-
-| Região | Cor | Hex |
-|--------|-----|-----|
-| DialogTitle bg | Dark | `#343a40` |
-| DialogTitle color | Branco | `#ffffff` |
-| DialogContent bg | Branco | `#ffffff` |
-| DialogActions bg | Light | `#f8f9fa` |
-| DialogActions border | Border | `#dee2e6` |
-| Dialog shadow | — | `0 0.5rem 1rem rgba(0,0,0,.15)` |
-| Dialog radius | — | `0.25rem` |
-
-## Botões de Ação
-
-| Papel | Variante | Cor |
-|-------|---------|-----|
-| Cancelar / Fechar | `outlined` | `secondary` |
-| Confirmar / Salvar | `contained` | `primary` |
-| Destrutivo (excluir) | `contained` | `error` |
-
-## Regras
-
-✅ **Correto:** sempre usar `IconButton` com `CloseIcon` no `DialogTitle` em posição `absolute`  
-✅ **Correto:** `DialogActions` sempre com `borderTop` e `backgroundColor` cinza  
-❌ **Incorreto:** header branco ou sem cor de fundo definida  
-❌ **Incorreto:** botões sem variante e cor explícitas  
-❌ **Incorreto:** usar `Modal` nu do MUI — sempre usar `Dialog` com as 3 regiões  
-
-## Impacto
-
-Evita modais com aparências inconsistentes entre telas e garante conformidade com a identidade visual Betha exigida pelo parceiro.
-
-## Referências
-
-- Rule: `theme-provider-mui-betha`
-- Rule: `estilos-design-system`