---
type: rule
name: css-global-betha
description: Define o padrão de CSS global com variáveis --bth-* para todos os frontends do ecossistema GOV (QUIPO-FRONT, QUIPO-PORTAL3, AUTENTICACAO-FRONT, QUIPO-CONSOLE)
scope: global
trigger: context_match
priority: alta
updatedAt: "2026-07-02"
---

# Regra: CSS Global Betha — Variáveis `--bth-*`

Todo frontend do ecossistema GOV deve possuir um arquivo CSS global com as variáveis `--bth-*` e reset visual Betha.

## Localização por Frontend

| Frontend | Arquivo | Importado em |
|----------|---------|-------------|
| QUIPO-FRONT | `src/styles/index.css` | `index.tsx` |
| QUIPO-PORTAL3 | `src/styles/globals.css` | `layout.tsx` |
| AUTENTICACAO-FRONT | `src/styles/global.css` | `App.tsx` |
| QUIPO-CONSOLE | `src/styles/global.css` | `main.ts` |

## Variáveis Obrigatórias

```css
:root {
  /* Cores primárias */
  --bth-primary:     #007bff;
  --bth-dark:        #343a40;
  --bth-body-bg:     #EBEDF0;
  --bth-white:       #ffffff;
  --bth-border:      #dee2e6;

  /* Texto */
  --bth-text:        #212529;
  --bth-text-muted:  #495057;
  --bth-secondary:   #6c757d;

  /* Semânticas */
  --bth-success:     #28a745;
  --bth-danger:      #dc3545;
  --bth-warning:     #ffc107;
  --bth-info:        #17a2b8;

  /* Utilitárias */
  --bth-light-bg:    #f8f9fa;
  --bth-border-radius: 0.25rem;
  --bth-font:        "Open Sans", Arial, sans-serif;
  --bth-shadow-sm:   0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
  --bth-shadow:      0 0.5rem 1rem rgba(0,0,0,.15);

  /* Seleção de itens (cartões interativos) */
  --bth-selected-bg: #cce5ff;
  --bth-selected-hover: #b8daff;
}
```

## Reset Global Obrigatório

```css
body {
  font-family: var(--bth-font);
  font-size: 0.875rem; /* 14px */
  background-color: var(--bth-body-bg);
  color: var(--bth-text);
  margin: 0;
}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6c757d; }
```

## Fonte Open Sans

- **QUIPO-PORTAL3:** usa `@fontsource/open-sans` (npm package) — sem request externo
- **Outros frontends:** importar via `<link>` no `index.html`:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
```

## Regras

✅ **Correto:** usar `var(--bth-primary)` nos componentes  
✅ **Correto:** o arquivo global é a única fonte das variáveis — componentes não redeclaram  
❌ **Incorreto:** declarar cores hardcoded (`#007bff`, `#343a40`) diretamente nos componentes  
❌ **Incorreto:** ter `--bth-*` duplicadas em múltiplos arquivos CSS  

## Impacto

Garante consistência visual entre todos os frontends e facilita troca de tema — alterar uma variável reflete em todo o sistema.

## Referências

- Rule: `estilos-design-system`