.agent/rules/estilos-design-system.md

---
type: rule
name: estilos-design-system
description: Define os dois design systems do ecossistema — Floreta (iniciativa privada) e Betha (governo/setor público) — parametrizados via memorias-ia/modulo.yml
scope: global
trigger: always_on
updatedAt: "2026-10-14"
---

# Regra: Estilos e Design Systems do Ecossistema

O ecossistema Azteca opera com **dois design systems distintos**, selecionados conforme o público-alvo e a definição em `memorias-ia/modulo.yml` (`modulo-id`, `modulo-descricao` e `modulo-tipo`).

## 1. Estilo Floreta — Iniciativa Privada

Usado nos módulos voltados a empresas privadas e gestão corporativa.

### Características

- **Framework UI:** Vuetify (Vue 3) / `eli-vue`
- **Cores:** paleta própria definida no tema Vuetify do projeto
- **Tipografia:** controlada pelo tema Vuetify
- **Componentes:** componentes Vuetify (`v-btn`, `v-card`, `v-data-table`, etc.)
- **Estilo visual:** moderno, tech, voltado a usabilidade corporativa

### Quando aplicar

- Todo código em pacotes `<modulo>-front` de módulos voltados ao setor privado (conforme descrito em `memorias-ia/modulo.yml`)
- Landing pages e painéis públicos corporativos

---

## 2. Estilo Betha — Governo / Setor Público

Usado em módulos voltados a órgãos governamentais, gestão municipal e e-Gov (conforme identificado em `memorias-ia/modulo.yml`).

**Documentação oficial:** https://design.plataforma.betha.cloud/doc/index.html

### Cores

| Cor         | Hex       | Classe bg          | Classe tx          |
|-------------|-----------|--------------------|--------------------|
| **Brand**   | `#0761FF` | `.bg__brand`       | `.tx__brand`       |
| **Blue**    | `#3374DB` | `.bg__blue`        | `.tx__blue`        |
| **Aqua**    | `#46AFD2` | `.bg__aqua`        | `.tx__aqua`        |
| **Yellow**  | `#E8B730` | `.bg__yellow`      | `.tx__yellow`      |
| **Red**     | `#DD413C` | `.bg__red`         | `.tx__red`         |
| **Green**   | `#3EC18F` | `.bg__green`       | `.tx__green`       |
| **Orange**  | `#E87D30` | `.bg__orange`      | `.tx__orange`      |
| **Purple**  | `#9F62B2` | `.bg__purple`      | `.tx__purple`      |
| **Pink**    | `#CB528F` | `.bg__pink`        | `.tx__pink`        |
| **Gray**    | `#BFBFC0` | `.bg__gray`        | `.tx__gray`        |

**Variações tonais:**
- Dark (mais escura): sufixos `--d10`, `--d20`, `--d30`, `--d40`
- Light (mais clara): sufixos `--l10`, `--l20`, `--l30`, `--l40`
- Exemplo: `.bg__blue--d20`, `.tx__red--l30`

**Cores de linhas de produto:**
| Linha de Produto                     | Hex       |
|--------------------------------------|-----------|
| Gestão Municipal                     | `#9A8B7D` |
| Planejamento e Contabilidade         | `#A6B8FF` |
| Arrecadação e Fiscalização           | `#00BD7E` |
| Atendimento                          | `#A5A6A7` |
| Gestão de Compras e Contratos        | `#FF7F7A` |
| Pessoal e Recursos Humanos           | `#00B0FF` |
| Saúde e Assistência Social           | `#A7C27E` |
| Educação e Gestão Escolar            | `#F9B02E` |
| Gestão de Leis Municipais            | `#F4812E` |
| Componentes genéricos / Perf. Corp.  | `#263E81` |

### Tipografia

- **Fonte:** Open Sans (Regular, Semibold, Bold)
- **Tamanhos:** H1=36px, H2=30px, H3=20px, H4=18px, H5=14px, H6=12px

### Componentes (classes CSS)

#### Botões
- `.btn-default` — ação secundária
- `.btn-primary` — ação principal (`#337AB7`)
- `.btn-success` — ação positiva/adicionar
- `.btn-danger` — ação destrutiva/crítica
- `.btn-warning` — ação que requer atenção
- `.btn-info` — ação principal discreta
- `.btn-link` — estilo link
- Tamanhos: `.btn-lg`, `.btn` (padrão), `.btn-sm`, `.btn-xs`

#### Grid
- 12 colunas responsivas (Bootstrap 3)
- Container fixo: max-width `1360px`
- Gutter: `8px`
- Classes: `.col-xs-*`, `.col-sm-*`, `.col-md-*`, `.col-lg-*`

### Integração (CDN)

```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.betha.cloud/base/g4/design/4.0.0/bth-design.css" />

<!-- JS -->
<script src="https://cdn.betha.cloud/base/g4/front-end/2.7/js/base.js"></script>
<script src="https://cdn.betha.cloud/base/g4/design/4.0.0/bth-design.js"></script>
```

### Tokens para Frontends `<modulo>-front` (React/MUI e Vue 3/Vuetify)

Nos módulos governamentais (`memorias-ia/modulo.yml`), os pacotes `<modulo>-front` utilizam estes tokens:

| Token | Hex | Uso |
|-------|-----|-----|
| primary | `#007bff` | botões, links, destaques |
| primary dark | `#0069d9` | hover de botões primários |
| secondary | `#6c757d` | ações secundárias |
| dark (header) | `#343a40` | header de telas, DialogTitle, navbar |
| body bg | `#EBEDF0` | background da aplicação |
| light bg | `#f8f9fa` | DialogActions, cards neutros |
| border | `#dee2e6` | bordas de separadores |
| text | `#212529` | texto principal |
| text muted | `#495057` | texto secundário/labels |
| success | `#28a745` | status positivo |
| danger | `#dc3545` | erro/exclusão |
| warning | `#ffc107` | alerta |
| info | `#17a2b8` | informação |
| white-label primary alternativo | `#688c00` | substituição de primary quando marca alternativa ativa |

**Seleção de itens (cartões interativos):**
- Selecionado: `#cce5ff` / hover: `#b8daff`
- Não selecionado: `#f8f9fa` / hover: `#e9ecef`

### Configuração Vue 3 + Vuetify (`src/plugins/vuetify.ts` em `<modulo>-front`)

```typescript
theme: {
  defaultTheme: "bethaTema",
  themes: {
    bethaTema: {
      dark: false,
      colors: {
        primary:    "#007bff",
        secondary:  "#6c757d",
        background: "#EBEDF0",
        surface:    "#ffffff",
        error:      "#dc3545",
        warning:    "#ffc107",
        success:    "#28a745",
        info:       "#17a2b8",
      }
    }
  }
}
```

- **Navbar** (`App.vue`): `<v-app-bar flat color="#343a40" theme="dark">`
- **Botões:** sempre `color="primary"` para usar o token do tema

---

## 3. Branding Dinâmico — `eBetha()` nos Footers

Quando o módulo suporta white-label dinâmico, os footers de `<modulo>-front` utilizam a função `eBetha()` para determinar a identidade exibida:

```typescript
import { eBetha } from "p-ambiente";

// eBetha() == true  → Betha Sistemas Ltda, CNPJ 00.456.865/0001-67, Criciúma-SC
// eBetha() == false → Azteca Software LTDA, CNPJ 29.979.144/0001-13, Içara-SC
```

- O footer exibe sempre a versão da API e do frontend
- O logotipo é condicional conforme a marca ativa

---

## Decisão: Como identificar qual estilo usar

1. **Consultar `memorias-ia/modulo.yml`:** verificar `modulo-id`, `modulo-descricao` e `modulo-tipo` para identificar se o projeto é privado (Floreta/Vuetify) ou governamental (Betha)
2. **Nunca misturar:** um módulo usa UM estilo — nunca combinar ambos na mesma tela
3. **Header identifica:** header `#343a40` = padrão governamental/Betha; barra lateral com menu Vuetify customizado = padrão privado/Floreta

## Referências

- Identidade do Módulo: `memorias-ia/modulo.yml`
- Betha Design System: https://design.plataforma.betha.cloud/doc/index.html
- Framework Design CDN: https://cdn.betha.cloud/base/g4/design/4.0.0/
- Rule: `css-global-betha` (variáveis --bth-*)
- Rule: `theme-provider-mui-betha` (arquitetura ThemeProvider)
- Rule: `modal-dialog-padrao-betha` (estrutura de modais)