# Impulsamos DS — design system da Impulsamos

Esta pasta é o design system completo da Impulsamos (paleta **Bruma**, rebranding
de outubro/2026). Ela substitui e amplia a pasta "Identidade Visual Sistemas
Impulsamos" (que ficou na frente azul, anterior ao rebranding): para trabalho
novo, use **esta** pasta. Qualquer sistema, painel, ferramenta ou tela criada
para a Impulsamos deve seguir estas regras para parecer o mesmo produto. A
estrutura dos componentes e dos layouts veio do kit VOIT DS (Figma), já adaptada
— **uma variante escolhida por elemento**, nas fundações da marca.

**Para um agente de IA:** leia este arquivo inteiro antes de escrever qualquer
tela. Depois abra os arquivos de `exemplos/` no navegador e no código, e
parta deles. Não invente cor, fonte, raio, sombra ou ícone fora do que está em
`tokens.css`.

## O que tem aqui

| Arquivo | Para que serve |
|---|---|
| `LEIA-PRIMEIRO.md` | As regras (este arquivo). |
| `tokens.css` | Todas as fundações: cores, tipografia, raios, sombras, vidro, degradês, espaços, movimento. Carregue antes dos outros. |
| `base.css` | Os componentes prontos (classes). Copie para o projeto e use; não reescreva. |
| `layouts.css` | As cascas de tela: sistema (lateral + painel), tela de entrar, grades, responsivo. |
| `comum.js` | Comportamentos: tema claro/escuro (`[data-alternar-tema]`), menu da conta, sino (`.sino-caixa`), **menu ⋯ da linha** (`.popover.menu-linha` ligado por `aria-controls`, 28/10/2026), gaveta (`.abrir-gaveta`), `select[data-combo]`, calendário do campo de data, véu do topo ao rolar, lateral recolhível, `avisar()` (aviso flutuante), zona de arquivo. |
| `marca.js` | O nome do sistema ao lado do logotipo embaralha as letras ao passar o mouse (`data-marca="NOME"`). |
| `simbolo-led.js` | O símbolo "Caminhos" em LED para a subaplicação escura (tela de entrar, capa): contorno que brilha, LEDs correndo pelas bordas em 3 faixas, luz refletida no chão, ponteiro acende os LEDs por perto, clique dispara pulso Lima do centro. `<canvas data-simbolo-led>` dentro da `.vitrine`. Canvas 2D, sem dependência (porte do Triangle LED Hero do vgpu.sh). |
| `icones.svg` | Ícones Lucide (traço 1.5) como `<symbol>`, para colar no fim do `<body>`. |
| `logotipo.svg` | Logotipo oficial novo (símbolo + IMPULSAMOS, 566,95 × 74,97 = 7,56 : 1, `fill: currentColor`). |
| `simbolo.svg` | Símbolo oficial "Caminhos" (74,97 × 74,97, `fill: currentColor`). |
| `exemplos/painel.html` | **A tela de referência**: painel de métricas no estilo aprovado (casca Névoa + painel Tela, vidro, degradês, pílulas). |
| `exemplos/componentes.html` | Galeria de todos os componentes, por seção. |
| `exemplos/acesso.html` | **Tela de acesso** (entrar), exemplo oficial desde 28/10/2026, cópia da versão viva aprovada (`frontend/conta/entrar.html`): `body.acesso`, fundo Névoa com luz do painel, manchas e símbolo grande suave, marca no canto e nome do sistema à direita, e **só o cartão, de vidro** (`.acesso-grade.so-cartao` › `.acesso-cartao.cartao.vidro`) com `h1` "Entrar", `.botao.claro.cheio.sem-seta` "Entrar com Google" e notas. Nunca cartão branco. |
| `exemplos/entrar.html` | Tela de entrar **legada** (vitrine Tinta do sistema anterior), travada no Drive. Não parta dela: use `exemplos/acesso.html`. |
| `exemplos/perfil.html` | **Tela padrão de Perfil** (minha conta): foto, nome de exibição, e-mail do Google, fuso, idioma, avisos, sessões. |
| `exemplos/configuracoes.html` | **Tela padrão de Configurações** do sistema: geral, equipe (@impulsamos.es), avisos, dados (baixar, lixeira, excluir). |

**Como usar num projeto novo:**
1. Copie `tokens.css`, `base.css`, `layouts.css`, `comum.js`, `marca.js` para o front.
2. Monte cada tela a partir de `exemplos/painel.html` (sistema) ou
   `exemplos/acesso.html` (login), com o mesmo `<head>`: fontes do Google
   (Sora + Inter), os três CSS na ordem tokens → base → layouts, o logotipo
   embutido na `.marca` e o bloco de `icones.svg` no fim do `<body>`.
3. Estilo que só existe numa tela vai num `<style>` dessa tela ou num CSS do
   projeto, **sempre com os tokens** (`var(--tinta)`, `var(--r-cartao)` etc.).
   Não mude `base.css` por causa de um caso só.

```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=Sora:wght@100..800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script>try{if(localStorage.getItem('impulsamos:tema')==='escuro')document.documentElement.dataset.tema='escuro'}catch(e){}</script>
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layouts.css">
```

## Princípios

- **Calmo e claro.** Névoa `#EAF0F5` atrás, painel Tela `#F5F8FB`, cartões
  brancos, texto tinta. A cor aparece pouco e sempre na família da Bruma.
- **Luz, vidro e desfoque.** A tela tem profundidade: luz radial no topo do
  painel (`--g-painel`), manchas desfocadas (`.mancha`), cartões de vidro
  (`.cartao.vidro`) e véu no topo que rola (`--veu`). É o jogo visual aprovado
  (tela "Sistema · modelo VOIT DS" do canvas de rebranding). Use com parcimônia:
  a luz fica no topo da tela, um ou dois vidros por tela.
- **Raio por camada** (nunca fora destes): painel `28`, cartão e janela `24`,
  bloco interno `20`/`16`, controles (campos, menus, itens de nav) `12`,
  botões/chips/pílulas/barras de gráfico `999` (pílula). Círculo (50%) só em
  avatares, discos de ícone, bolinhas e pinos. **Exceções registradas
  (28/10/2026, mantidas para não mexer no visual aprovado):** item dentro de
  menu (`.menu-linha`, `.menu-conta`, `.combo-item`) e balão de dica
  (`.com-dica`) em `10`, porque ficam dentro de um contêiner de 12/16 com
  respiro de 6 e precisam de canto concêntrico; balões curtos (`.ponto-s`,
  `.dica-lateral`) em `8`; peças de 18–20px (caixa de marcar, `.tecla`) em
  `6`, que é o raio proporcional ao tamanho. Não use esses raios em peça nova.
- **Texto sempre tinta** sobre fundo claro, com uma exceção: a **cor
  semântica** (27/10/2026, pedido da Isabela). Verde = certo/feito
  (`--positivo` sobre `--st-ok`), vermelho = errado/erro/perigo (`--negativo`
  sobre `--st-alerta`), âmbar = aguardando (`--aviso-texto` sobre
  `--st-espera`). Ela aparece em pílula de estado (fundo claro + texto e ponto
  na cor forte), em ✓/✕ de listas "é / não é", "faça / evite" (lado sim
  esverdeado, lado não avermelhado, ícones e rótulo na cor forte), em erro de
  campo, em ação de perigo e no bloco `.cuidado` (aviso de atenção dentro do
  conteúdo: risco, armadilha, ressalva — fundo âmbar `--st-espera`, ícone
  `i-alerta` e rótulo `--aviso-texto`). Nunca como decoração nem em texto corrido. Chip ou tag tem **um tamanho só** em todo lugar (12px, altura 26–32 conforme o componente): destaque se faz com peso e cor, nunca com outro tamanho de letra. **Tudo o que entra numa caixa semântica segue a cor da caixa** (regra da Isabela, reforçada em 28/10/2026): chip, tag, pílula neutra, **cartão interno** e rótulo. Fundo claro do estado, texto e contorno na cor forte; nunca chip cinza, cartão branco ou cartão Névoa dentro de caixa verde, vermelha ou âmbar. No código: a caixa usa `.sem-ok`, `.sem-alerta` ou `.sem-espera` (o `.cuidado` já é âmbar), que declaram `--sem`; o cartão de dentro usa `.interno`; chip, tag e pílula neutra já seguem sozinhos (`base.css`). Caixa semântica nova não precisa de CSS próprio.
  Branco sobre Tinta/Ardósia nas peças escuras.
- **Ardósia `#254157` é o destaque** (ampliado em 23/10/2026, pedido da
  Isabela): o elemento mais importante de **cada seção** pode ser escuro — a
  ficha principal (`.cartao.destaque`), um bloco de chamada dentro de cartão
  branco (`.bloco.escuro`), o fecho de uma ficha (pergunta de checagem), a
  pílula "Projeção", a barra maior do gráfico, o controle marcado, o hover do
  grupo aberto da lateral. Tudo que entra num `.cartao.destaque`/`.bloco.escuro`
  (títulos, listas, chips, pílulas, sanfona, botões, tabela) já sai em branco
  pelo `base.css`; a `.estrela` sai em **Bruma** (no tema escuro, Lima). Limite: escuro é **ponto de parada do olho**, não fundo —
  nunca dois cartões escuros encostados, nunca fundo de página, nunca no lugar
  da tinta em texto sobre claro.
- **Lima `#E3E935` só sobre escuro**: na subaplicação escura (um detalhe no
  símbolo grande, um traço) e como **acento do modo escuro** (ver "Modo
  escuro"). Nunca texto sobre fundo claro, nunca no tema claro.
- **Citação em destaque** (`.citacao`, 28/10/2026): frase-chave da marca (propósito, manifesto, fala de cliente). Aspa grande e clara (Bruma) ao fundo, à esquerda; texto alinhado à esquerda, Sora 300 no tamanho título 3, trecho-chave em `<strong>` (peso 450). Sem fundo, sem centralizar, sem aspas no texto. Citação curta dentro de conteúdo continua sendo `.aspas` da plataforma.
- **O símbolo "Caminhos"** é o único motivo gráfico (ver Marca, abaixo).
- **Movimento contido**, sem quique nem mola. Hover de cor: 150ms `--ease`;
  `.botao`: fundo, luz e texto em 0,6s `cubic-bezier(.25, 1, .5, 1)` (sem rótulo rolando); menus e janelas abrem na hora. Tudo
  respeita `prefers-reduced-motion`.
- **Tema claro é o padrão.** Desde 23/10/2026 existe o **modo escuro**, como
  escolha da pessoa (botão sol/lua no pé da lateral, à direita do "Recolher", criado pelo comum.js), nunca automático. A
  subaplicação escura pontual (`.escuro` / `.vitrine`: capa, peça de marca)
  continua existindo à parte.

## Cores (tokens de `tokens.css`)

| Token | Valor | Uso |
|---|---|---|
| `--tinta` | `#101820` | Texto, botão principal, chip ativo |
| `--tinta-82/66/56/46/32` | tinta a 82 / 66 / **62 / 60 / 48**% | Texto longo; secundário; apoio; rótulos, datas, placeholders, ícones em repouso; ícones discretos e bordas. Os três últimos subiram em 28/10/2026 para passar no contraste (o nome ficou): sobre branco, 56 = 5,0:1 e 46 = 4,7:1 (texto ≥ 4,5:1); 32 = 3,2:1 (ícone e borda ≥ 3:1) |
| `--bruma` | `#D3E0EA` | **Cor principal.** Contagem da lateral, pílula "novo", hover do botão da marca, seleção de texto, manchas |
| `--ardosia` | `#254157` | **Destaque pontual** + controles marcados (caixa, radio, chave), barras principais de gráfico, ícones das pílulas de número |
| `--ardosia-media` | `#4B6478` | Links, ações de texto, nome do sistema na marca, borda de foco de campo |
| `--aco` | `#8FA6B8` | Barras secundárias de gráfico |
| `--bruma-profunda` | `#B4C7D6` | Luz dos degradês, anel de foco, barras claras de gráfico |
| `--bruma-clara` | `#E1EAF1` | Trilhos de progresso, discos de avatar, notas, item escolhido do menu |
| `--nevoa` | `#EAF0F5` | Fundo da casca (atrás do painel), chips, blocos de agenda |
| `--tela` | `#F5F8FB` | Fundo do painel e dos blocos rebaixados |
| `--lima` | `#E3E935` | Só subaplicação escura (ver Princípios) |
| `--linha` / `--linha-forte` | tinta a 7% / 14% | Divisores e borda de cartão; borda de campo e de botão fantasma |
| `--hover` | tinta a 4% | Fundo ao passar o mouse |
| `--st-aberto/-ok/-espera/-alerta` | `#D3E0EA` `#D6EFE0` `#FBEFD9` `#F8DADA` | Fundos de estado: pílula, lado sim/não de comparação |
| `--positivo` / `--negativo` / `--aviso-texto` | `#256B45` `#A8353A` `#805B00` | Cor forte semântica (texto, ícone, ponto): verde certo/feito, vermelho errado/perigo, âmbar aguardando. ≥ 4,9:1 sobre o próprio fundo |
| `--vidro` (+ `-foto`, `-denso`) e `--veu` | brancos translúcidos | Os 4 vidros oficiais: V1 vidro (blur 24), V2 sobre foto (blur 30 + saturate 1.4), V3 denso (blur 20; os menus suspensos `.popover`, o `.calendario` e a `.janela` usam no claro uma variação registrada do V3 — branco 78%, blur 20 + `saturate(1.2)` e fio branco por dentro —, mais opaca para o texto do menu ler sobre qualquer fundo; no escuro usam o próprio `--vidro-denso`), V4 véu do topo (blur 14 + máscara) |
| `--translucido` | `rgba(255,255,255,.6)` | Controles da barra superior e da lateral (com `--borda-interna`) |
| `--g-bruma-1` / `--g-bruma-2` / `--g-painel` | degradês | A1 Impulso (com manchas); A2 Céu (capas, um por tela); luz do topo do painel |
| `--tinta-fixa` | `#101820` | Tinta que não inverte no modo escuro (texto sobre Lima ou sobre branco fixo, fundo `.escuro`) |
| `--acento` | Ardósia (escuro: Bruma) | Ícone, ponto, barra e traço de destaque sobre superfície (disco, pílula de número, nota, progresso, barra alta do gráfico, `.estrela`) |
| `--marcado` / `--sobre-marcado` | Ardósia / branco (escuro: Lima / Tinta) | Controle marcado (caixa, radio, chave, deslizador, dia escolhido) e ponto de não lida; o que fica por cima dele |

Sombras: `--sombra-cartao`, `--sombra-pop` (menus, janelas), `--sombra-foco`
(anel Bruma Profunda de 4px, para botões e controles pelo teclado),
`--sombra-ativo` (item
ativo da lateral). Não invente outras. Nenhuma cor fora desta tabela.

## Tipografia

Duas famílias do Google Fonts: **Sora** (títulos, nomes, números — peso 450;
600 só destaque ou caixa alta) e **Inter** (texto 400, interface 500, rótulo
600). Máximo de 3 estilos de Sora por tela.

**Hierarquia = tamanho + traço** (27/10/2026, pedido da Isabela). Título e
subtítulo não se distinguem só pelo tamanho: o subtítulo/manchete logo abaixo
de um título usa Sora **300** (`--peso-subtitulo`, classe `.subtitulo`), o
título fica em 450 (`--peso-titulo`). Nunca dois níveis seguidos com o mesmo
peso.

**Negrito no conteúdo (regra de todos os sistemas).** Em todo texto de
conteúdo (parágrafo, item de lista, célula, citação), as palavras ou trechos
importantes vão em `<strong>` (Inter 600, `--peso-destaque`, cor `--tinta`):
1 a 3 por parágrafo ou item, trechos curtos (até ~6 palavras), no máximo um
terço do texto. Nunca a frase inteira, nunca em título, chip, rótulo ou peça
de texto de marca para copiar (slogan, fala de exemplo). Quem só passa o olho
deve entender o essencial pelos negritos.

Uma escala só, 16 estilos: o nome, o peso, a entrelinha e o tracking valem em
qualquer formato; **só o tamanho muda por formato**. Os tokens `--t-*` de
`tokens.css` trazem a coluna Sistema; as classes `.t-*` de `base.css` aplicam
cada estilo. Formato novo = multiplicar a escala inteira por um fator.

| Estilo | Fonte | Entrelinha | Tracking | Sistema | Apresentação 1920 | Post 1080 | Impresso |
|---|---|---|---|---|---|---|---|
| Display 1 | Sora 450 | 0,98 | −.055em | — | 120 | 96 | 48 pt |
| Display 2 | Sora 450 | 1 | −.05em | 40 | 96 | 76 | 36 pt |
| Título 1 | Sora 450 | 1,05 | −.045em | 34 | 72 | 60 | 28 pt |
| Título 2 | Sora 450 | 1,08 | −.04em | 26 | 56 | 48 | 22 pt |
| Título 3 | Sora 450 | 1,15 | −.035em | 21 | 40 | 36 | 16 pt |
| Título 4 | Sora 450 | 1,2 | −.03em | 17 | 28 | 28 | 13 pt |
| Número 1 | Sora 450 tabular | 1 | −.05em | 34 | 96 | 88 | 36 pt |
| Número 2 | Sora 450 tabular | 1 | −.05em | 26 | 64 | 56 | 24 pt |
| Número 3 | Sora 450 tabular | 1 | −.04em | 20 | 44 | 40 | 16 pt |
| Texto G | Inter 400 | 1,5 | −.02em | 15 | 26 | 30 | 12 pt |
| Texto M | Inter 400 | 1,5 | −.015em | 13 | 20 | 24 | 10 pt |
| Texto P | Inter 400 | 1,45 | −.01em | 12 | 17 | 20 | 9 pt |
| Interface | Inter 500 | 1,2 | −.01em | 12,5 | 18 | 22 | — |
| Rótulo | Inter 600 CAIXA ALTA | 1,2 | +.12em | 10,5 | 14 | 18 | 7,5 pt |
| Legenda | Inter 400 | 1,4 | −.01em | 11,5 | 14 | 18 | 7,5 pt |
| Código | Mono 500 | 1,45 | 0 | 12 | 14 | — | 8 pt |

`h1`–`h4` já saem como Título 1–4 pelo `base.css`. Textos longos usam Texto M
em `--tinta-82`, no máximo 76 caracteres por linha.

## Ícones

- **Biblioteca: Lucide** (https://lucide.dev), sempre embutida como SVG.
  Não carregar por CDN, não usar emoji como ícone, não misturar outra família.
  (O VOIT usa Material Icons — foi substituído por Lucide, decisão da marca.)
- **Traço 1.5**, pontas e junções redondas, sem preenchimento, `currentColor`.
  O traço vem do CSS (`svg.i`), então o `<symbol>` leva só os caminhos.
- **Atenção: a Lucide vem com traço 2 por padrão.** Nunca use esse padrão.
  SVG no HTML: sempre com `class="i"`; apague `stroke-width="2"` copiado do
  site. SVG em CSS (máscara, `data:` URI): escreva `stroke-width='1.5'` no
  próprio SVG. Pacote npm/React: `strokeWidth={1.5}` em todo ícone.
  **Única exceção:** o check da caixa de marcar usa traço 3 (desenhado a 12px,
  sai 1,5px na tela). Antes de entregar, busque `stroke-width` no projeto: só
  pode aparecer `1.5` (ou o `3` do check).
- **Tamanhos:** 17 padrão; 18 em discos, redondos e pílulas de número; 15–16 em
  fantasmas, busca e menus; 14 em chips e selects; 13 junto de texto pequeno.
- **Uso:** `<svg class="i"><use href="#i-busca"/></svg>`, com o bloco de
  `icones.svg` colado uma vez no fim do `<body>`.
- Ícones disponíveis (ids): adicionar, ajuda, ajuste, alvo, anterior, arquivar,
  baixar, balao, banco, busca, cadeado, calendario, celular, chave, check,
  copiar, desarquivar, disco, editar, escudo, externo, fechar, filtro, grade,
  grafico, imagem, info, link, lista, lixeira, mais, maleta, menu, monitor,
  olho, painel, pastas, pessoas, play, porcento, proximo, reabrir, relogio,
  sair, seta-baixo, seta-direita, sino, subir, usuario, usuario-x, lua, sol
  (alternar tema; `lua` e `sol` ainda não estão no `icones.svg`, que estava
  travado no Drive em 23/10/2026 — copie de `exemplos/componentes.html`), abre
  (chevrons para cima e para baixo: botão que abre menu, como a `.conta`). Ícone novo: copie os
  caminhos do site da Lucide para um `<symbol id="i-nome-em-portugues">` e
  acrescente-o também em `icones.svg` desta pasta.

## Marca

- **Logotipo** (`logotipo.svg`, trocado em 22/10/2026): símbolo + IMPULSAMOS,
  proporção 566,95 × 74,97 (7,56 : 1). SVG com `fill: currentColor`; nunca
  imagem (png/webp), nunca mudar a proporção, nunca recortar letras.
  Aplicações: tinta sobre claro (padrão); branco sobre Tinta/Ardósia.
  **Sempre o logotipo principal e o símbolo**; versões com a assinatura
  "tecnologia e inovação" só quando solicitado.
- **Área de proteção e tamanho mínimo** (aprovados em 28/10/2026): x = altura do I de IMPULSAMOS (26,33 no SVG do logotipo principal, 58% da altura do símbolo); deixe x livre nos quatro lados; no símbolo sozinho, x = 0,58 × o lado. Mínimos: logotipo principal 105 px · 27 mm; símbolo 12 px · 4 mm; com assinatura (variação 2) 261 px · 53 mm. Regra geral: sem assinatura x ≥ 8 px (2 mm); com assinatura x ≥ 20 px (4 mm). Na casca (156 px) e na vitrine (176 px) a marca já cumpre.
- **Composição da marca no sistema** (`.marca`): logotipo (156px na casca,
  176px na vitrine) em cima e, **16px abaixo dele**, o nome curto do sistema em caixa alta (Sora 600, 10,5px) (`.nome`, `data-marca="NOME"` — embaralha ao passar o mouse,
  `marca.js`). O `.divisor` do HTML antigo fica escondido (23/10/2026).
  Título da aba: `Tela · Impulsamos | NOME`.
- **Símbolo "Caminhos"** (`simbolo.svg`, trocado em 22/10/2026): o farol que dá
  direção — o centro é o caminho principal e as pontas levam a destinos
  diferentes ("um ponto de partida, vários destinos possíveis"). "Impulsamos"
  vem de *in + pulsare*: ele pulsa quando anima (módulos que acendem do centro
  para fora). Está em `tokens.css` como `--motivo-simbolo` e aparece em três
  lugares: no ícone da faixa de atenção
  (`.estrela`) e, grande e translúcido, na tela de entrar (`.simbolo-grande`,
  versão `.lima` sobre fundo escuro). Não use como decoração solta.

## Componentes (classes de `base.css`)

**Botões** — todos em pílula (raio 999):
- `.botao`: o botão da marca, **modelo "shiny button"** (23/10/2026, a partir
  do shiny-button do designali-in no 21st.dev): pílula, Inter 600, seta depois
  do rótulo; um contorno de luz (degradê cônico) gira devagar pela borda (3s)
  com trama de pontos por dentro. **Hover:** o fundo muda (escuro: Tinta →
  Ardósia), a faixa de luz se abre em Bruma/branco e gira mais rápido, um halo
  claro respira por dentro e a seta avança (fundo, luz e texto trocam em 0,6s
  `cubic-bezier(.25, 1, .5, 1)`; o rótulo não rola). **Clique:** desce 1px e
  encolhe para 98%. **Foco pelo teclado:** o mesmo estado do hover + anel
  `--sombra-foco`.
  - **Estilos:** (padrão) escuro · `.claro` (branco → Bruma chapado no hover, sem trama/brilho/halo por dentro; só a luz Ardósia da borda se abre)
    · `.contorno` (miolo da cor do fundo + anel; hover enche de Ardósia com
    texto branco) · `.destaque` (Ardósia → Tinta).
  - **Tamanhos:** `.pequeno` 32 · `.compacto` 36 · padrão 44 · `.grande` 52 ·
    `.cheio` (largura toda, 48).
  - **Ícone:** `.baixa`/`.sobe` trocam a seta; `.sem-seta` tira a seta e aceita
    ícone dentro do `<span>` (ex.: **Entrar com Google = `.botao.claro.cheio.sem-seta`**,
    com o G num `.g-disco`, que vale em qualquer botão).
  - Sobre Ardósia (`.cartao.destaque`, `.bloco.escuro`) o escuro vira branco
    (hover Bruma) e o contorno vira anel branco (hover enche de branco com texto
    Ardósia). Sem giro com `prefers-reduced-motion`.
  - **Hover em todos os estilos (corrigido em 28/10/2026):** cada estilo define
    só `--b-fundo`/`--b-luz` (repouso) e `--b-fundo-hover`/`--b-luz-hover`; o
    hover troca `--b-cor` e `--b-luz-agora`, que nenhum estilo define. Antes a
    regra do estilo vencia a do hover (o fundo não mudava e, no `.contorno`, o
    texto ficava branco sobre claro). Estilo novo: defina só as variáveis.
  - Todas as variações estão em `exemplos/componentes.html` › Botões.
  - **Só o `.botao` tem efeito.** Os secundários `.fantasma` e `.translucido`
    não têm luz, giro nem ícone que anda (27/10/2026: a Isabela reprovou a luz
    girando na borda deles, que nunca foi pedida). Hover = só troca de fundo
    (fantasma: Bruma Clara + borda Bruma Profunda; translúcido: branco 85%);
    clique encolhe 0,97. `.fantasma.perigo`: hover no fundo de erro.
    Ação secundária que precisa de destaque usa `.botao.claro` ou
    `.botao.contorno`, nunca um efeito novo.
  `<button class="botao"><span>Texto</span></button>` — o `<span>` é
  obrigatório. Variações: `.compacto` (36px), `.cheio` (largura total, 48px),
  `.destaque` (Ardósia, o botão principal de uma seção escura ou de chamada), `.baixa`/`.sobe` (ícone de baixar/subir).
- **Um `.botao` por grupo de ações.** As outras são `.fantasma` (branco com
  contorno; `.grande` = 44px). Ação de perigo: `.fantasma.perigo` + confirmação
  numa `.janela`.
- `.translucido`: controle sobre Névoa/degradê/foto (barra superior, cartão de
  destaque); `.compacto` = 36px.
- `.icone` (32px, quadrado discreto) e `.redondo` (44px, círculo translúcido da
  barra superior, com `.ponto` Ardósia para não lido).
- `.chip`: filtros (fundo Névoa; ativo = tinta; `.n` contagem; `.fechar` com
  i-fechar remove). `.alternar`: dois botões num trilho (Grade | Lista).
  `.paginacao`: bolinhas de página, atual em tinta.

**Casca e navegação** (`layouts.css`):
- `body.casca` = grid 288px × (96px + resto): `.marca`, `.topo-barra` (busca
  translúcida de até 460px, `.redondo` sino dentro de `.sino-caixa` com o
  `.popover` de notificações que o `comum.js` abre, `.translucido` de ação,
  avatar que leva ao Perfil),
  `.lateral` e `.painel`.
- `.lateral`: itens soltos sobre a Névoa (raio 12); o ativo é cartão branco com
  sombra; as páginas de um grupo são menores (13px, 15px de ícone) e recuadas
  (sem trilho nem traço); **o grupo abre e fecha com animação de altura** (`.nav-paginas`,
  grid 0fr → 1fr, 280ms `--ease-suave`, criado pelo `comum.js`) e a seta gira
  90°; hover é só fundo branco translúcido; **cada `.nav-rotulo` é um botão translúcido com ícone que abre/fecha
  o grupo** (`<div class="nav-rotulo"><svg class="i">…</svg>Nome</div>`; o
  `comum.js` faz o resto): grupos começam fechados, o da página ativa começa
  aberto; grupo aberto tem hover em Ardósia. Lateral recolhida mostra só os ícones dos grupos (clicar abre a
  lateral e o grupo) e o símbolo da marca (34px). **Pé da lateral vazio por padrão** — nada de rodapé, assinatura ou
  texto ali a menos que seja pedido; a `.conta` só entra em sistema com login; `.contagem` em Bruma; `.nav-sub` com `.ponto-s` de situação;
  `.conta` no pé (cartão translúcido; o bloco inteiro abre o menu com Perfil,
  Equipe, Configurações e Sair separado por linha — Perfil e Configurações
  levam às telas padrão `exemplos/perfil.html` e `exemplos/configuracoes.html`). A lateral recolhe para 76px pelo
  botão "Recolher" no **pé da lateral** (criado pelo `comum.js`, abaixo da
  `.conta`); recolhida, a marca mostra só o símbolo (34px) e o menu da conta
  abre ao lado da lateral.
- `.painel`: Tela, canto superior-esquerdo 28px, luz `--g-painel` + mancha no
  topo, **rolagem própria** com barra fina. Depois de 240px de rolagem (e só
  se ainda sobrar conteúdo para rolar — página curta não esconde), a barra
  superior some e o painel sobe por cima dela (`.barra-oculta`, como o Dock do
  Mac); mouse na borda de cima da tela traz a barra de volta. Só em computador. Respiro 36 / 32 (direita, igual
  ao da barra superior) / 48 / 40. Conteúdo dentro de `.painel-conteudo`
  (coluna com gap 24, **sem largura máxima**: ocupa o monitor; texto corrido
  limita-se a 76ch).
- `.painel-cabeca`: título-marca-d'água (`.titulo-agua`, Sora 40 a 30%),
  `.metrica-principal` (rótulo + número grande + `.seletor-texto`) e
  `.cartao-resumo` (`.vidro` e/ou `.destaque`) — o cabeçalho da tela de
  métricas. Telas simples usam `.topo` (título + `.meta` + ações), que ganha o
  véu desfocado ao rolar. O véu é `position: fixed` colado no topo do painel
  (não `absolute` dentro do sticky: o Chrome ignora a máscara de elemento
  sticky dentro de contêiner que rola e deixa uma linha reta — 23/10/2026). Com a
  barra superior oculta o véu fica em `top: 1px`, nunca `0` (em 0 a máscara
  também some).
- `.trilha`: breadcrumb (último item em `strong`). **Toda tela de sistema tem
  trilha no `.topo`, logo abaixo do `h1`, no lugar da linha `.meta`** (23/10/2026):
  caminho clicável das páginas acima dela, **sempre começando no painel geral
  inicial** (`Painel › Grupo › Página atual`). Separador `i-proximo`, 12px,
  página atual em `strong` com `aria-current="page"`. Informação que estava na
  `.meta` (método, data, status) pode ficar no DOM com `hidden` para leitura
  por IA, ou ir para dentro do conteúdo.

**Conteúdo**:
- `.cartao` (raio 24, `.cartao-cabeca` com título à esquerda e `.acoes` à
  direita). Variações: `.vidro`, `.vidro-denso`, `.destaque` (Ardósia, o cartão
  principal da seção; os filhos já saem em branco). `.bloco` (Tela, raio 20), `.bloco.nevoa` (raio 16) e **`.bloco.escuro`**
  (Ardósia, texto branco) para blocos internos; `.bloco.degrade` com `.mancha`
  para o bloco de chamada claro.
- `.mancha` tem **tamanhos padrão** (28/10/2026): `.pequena` 240px (blur 50),
  `.media` 380px (blur 70), `.grande` 560px. Dentro do `.bloco.degrade` ela já
  vem no canto de baixo à direita e o resto do bloco fica por cima:
  `<div class="bloco degrade"><div class="mancha pequena" aria-hidden="true"></div>…</div>`.
  Em outro lugar, a tela só dá a posição (numa classe, com tokens).
- `.indicadores` + `.cartao.indicador` (disco + rótulo + `.valor.num`) e
  `.faixa-pilulas` + `.pilula-numero` (ícone Ardósia + texto + valor) para
  linhas de métricas. A variação vai num `small` dentro do `.valor` e a cor
  diz se o número é **bom ou ruim**, não se subiu ou desceu (28/10/2026):
  `<small>` verde (`--positivo`) = bom, `<small class="negativo">` vermelho
  (`--negativo`) = ruim, `<small class="neutro">` cinza (`--tinta-56`) = estável
  ou sem comparação. "−3 dias até contratar" é bom (verde). Vale no tema escuro
  (os tokens semânticos mudam sozinhos).
  ```html
  <div class="valor num">43 <small>+12%</small></div>
  <div class="valor num">5 <small class="negativo">+2</small></div>
  <div class="valor num">4 <small class="neutro">igual</small></div>
  ```
- `.atencao`: faixa "precisa de atenção" em degradê Bruma com `.estrela` e
  avisos (`a.aviso`) dentro de `.atencao-vidro`. Cada aviso é um link inteiro.
- **Tabela:** sem linhas verticais, sem zebra, sem fundo no cabeçalho; linha
  com Bruma a 30% no hover; tabela **de leitura** (especificação, texto, sem
  clique) leva `table.leitura`: sem hover, sem mãozinha e sem alinhar a última
  coluna à direita (28/10/2026); primeira coluna com 16px à esquerda, células com
  12px à direita, última coluna à direita com 16px; `.primario`/`.secundario`
  nas células; ações da linha num `.icone` com `i-mais` que abre
  `.popover.menu-linha` (**o `comum.js` abre**, 28/10/2026 — markup abaixo);
  `.col-esconde` some abaixo de 1024px. Em tela
  estreita, envolva a tabela num `<div class="rola-x">` (rolagem horizontal
  fina em vez de corte).
- Itens de menu (`.menu-conta`, `.menu-linha`): `.perigo` (vermelho) e `.separa`
  (linha acima, para o "Sair" ou o "Excluir") valem em `<a>` e em `<button>`
  (28/10/2026).
- **Menu ⋯ da linha** (28/10/2026): um menu por tela, ligado aos botões pelo
  `aria-controls`. Nenhum JS na tela: o `comum.js` põe `aria-haspopup` e
  `aria-expanded`, abre colado ao botão (`position: fixed`, embaixo e alinhado
  à direita; em cima se não couber; nunca sai da tela), foca o 1º item e fecha
  com Esc (o foco volta ao ⋯), clique fora, clique num item ou rolagem. Serve
  para qualquer ⋯ (linha de tabela, bloco, cartão).
  ```html
  <td><button class="icone" aria-label="Mais ações" aria-controls="menu-pessoa"><svg class="i"><use href="#i-mais"/></svg></button></td>
  …
  <div class="popover menu-linha" id="menu-pessoa" role="menu" hidden>
    <button type="button" role="menuitem"><svg class="i"><use href="#i-escudo"/></svg>Tornar administradora</button>
    <button type="button" role="menuitem" class="perigo"><svg class="i"><use href="#i-usuario-x"/></svg>Remover da equipe</button>
  </div>
  ```
  Qual linha abriu o menu: `document.querySelector('[aria-controls="menu-pessoa"][aria-expanded="true"]')`.
- `.item-lista`: linha de lista com avatar/disco + primário/secundário + `.fim`.
- `.pilula` com `.aberto`/`.ok`/`.espera`/`.alerta`/`.arquivado`/`.destaque`.
  Dentro de `.cartao.destaque`/`.bloco.escuro`, `.ok`, `.espera` e `.alerta`
  **mantêm a cor do estado** na versão do modo escuro (fundo da cor forte
  misturada na Tinta, texto claro do estado); as outras ficam branco 12%
  (28/10/2026).
- `.autor`: pessoa aparece por **foto + nome de exibição** (avatar `.mini` com
  iniciais no fundo Bruma Clara ou `.com-foto`); o e-mail vai no `title`.
- `.barra-prog` (trilho Bruma Clara, preenchimento Ardósia; `.aco` para a
  variação), `.grafico-barras` (barras-pílula de 7px, `.alta` em Ardósia;
  **altura padrão 140px** por `height: var(--altura, 140px)` — outra altura =
  `--altura` numa classe da tela, nunca `style`; 28/10/2026) e `.grafico-eixo`.
  Só o dado fica inline: a altura de cada `.barra` e a largura do `.trilho i`.
- `.sanfona` (`<details>`), `.tecla` (kbd), `.codigo`, `.rodape-numeros`.

**Formulário — sempre no visual do sistema.** Nenhum controle pode aparecer
com o visual do navegador/SO, nem com o tema de uma biblioteca:

| Controle | Como fazer | Nunca |
|---|---|---|
| Campo de texto | `.campo` (rótulo em cima, campo de 44px, raio 12; em foco o campo **acende**: fundo branco, borda Bruma Profunda e o **brilho da marca** girando atrás dele (`.brilho`: degradê cônico só em tons claros da Bruma — Bruma Clara → Bruma Profunda → Bruma → Aço —, blur 7px (alcance curto, pensado para formulários com vários campos), 5s contínuo; o `comum.js` envolve o input num `<span class="brilho">`)) | input sem rótulo; anel de contorno de outra cor |
| Lista de escolha | `<select data-combo>` + `comum.js` (botão `.combo-botao` 36px, lista `.popover`). **Nunca o select nativo à vista**, nem em formulário montado por JS: select criado depois do carregamento chama `window.combo(select)` (28/10/2026). `disabled` no select desabilita o botão (também se mudar depois). Teclado: ↓/↑ no botão abrem no item escolhido; na lista ↓/↑, Home/End, Enter escolhe, Esc fecha | a lista nativa do select |
| Data | `.campo.campo-data` com `input readonly data-data` — o `comum.js` desenha o `.calendario` (hoje = anel; escolhido = disco Ardósia; pt-BR, semana começa no domingo; rodapé Limpar/Hoje). Abre com clique ou Enter/espaço/↓ (foca o dia escolhido ou hoje). O ícone fica por cima do `.brilho` | `<input type="date">` nativo |
| Caixa de marcar | `<input type="checkbox">` — 18px, cantos 6px, marcada Ardósia com check branco; indeterminada (`:indeterminate`) = traço branco | checkbox nativo/azul do SO |
| Opção única | `<input type="radio">` em `.opcao` — 18px, anel Ardósia | radio nativo |
| Liga/desliga | `.chave` (trilho 40×22, ligada Ardósia). **Chave líquida:** o botão atravessa o trilho esticando como gota e uma gotinha vai atrás e se funde a ele (filtro SVG "gooey" numa camada `.gota` que o `comum.js` cria dentro da chave, 420ms, sem quique) — padrão de toda chave do DS (23/10/2026, a partir do liquid-toggle do 21st.dev). Em `label.opcao`, a chave que é o último elemento vai **sempre à direita**, mesmo com o texto solto depois dela (de preferência, texto num `<span>` antes) | switch verde de biblioteca; chave que só desliza |
| Intervalo | `input[type=range].deslizador` — o `comum.js` atualiza `--valor` ao arrastar, e o preenchimento acompanha o puxador | range nativo |
| Arquivo | `.zona` (tracejada, com o input escondido dentro; realce `.sobre` ao arrastar; dentro de `.campo` o texto continua tinta) | o botão nativo "Escolher arquivo" |
| Dica | `.com-dica` com `data-dica` (balão tinta; pai com `overflow: hidden` corta o balão: use `overflow: visible` no elemento). Texto de ajuda abaixo do campo: `.dica` com ícone de 13px (tamanho padrão, sem `style`) | só o `title` nativo |
| Confirmação | `<dialog class="janela">` com `showModal()`; Cancelar antes, ação à direita | `alert()`, `confirm()`, `prompt()` |
| Nota da seção | `details.nota-secao` com o ícone `i-nota` ao lado do título da seção: abre um balão de vidro com a explicação dela; fecha ao clicar fora ou com Esc (`comum.js`). O "?" é da página inteira; o "!" é de uma seção | texto explicativo solto embaixo do título |
| Baixar em duas cores | `details.baixar` com `summary.fantasma` "Baixar" e `.baixar-menu`: "Em preto" (tinta #101820) e "Em branco", cada um com `download` | dois botões soltos ou só um arquivo |
| Copiar ao clicar | `[data-copiar="texto"]` (vazio = copia o próprio texto) e `data-aviso="mensagem"`; o `comum.js` copia e chama `avisar()` | selecionar o texto para o usuário copiar |
| Chip com dica | `.chip-dica.com-dica` com `data-dica` e `tabindex="0"` (palavra com ressalva, nicho, termo) | chip sem a explicação ou `title` nativo |
| Caixas positivas e negativas | `ul.caixas.sim` (verde ✓) e `ul.caixas.nao` (vermelho ✕): pontos lado a lado, 4 colunas | lista corrida com ✓/✕ coloridos à mão |
| Amostras de cor | `ul.amostras` com `.amostra-q` + `.amostra-n`; os valores ficam no `.amostra-balao` (hover/foco) e o clique copia (`data-copiar`) | código de cor solto em texto corrido |
| Aviso rápido | `avisar('Texto', 'i-check')` → `.aviso-flutuante` (some em 5s). Cor do ícone: `i-check` verde, `i-alerta` âmbar (`--aviso-texto`, atenção), `i-fechar` vermelho (erro); os outros em `--acento` | toast de biblioteca com o tema dela |

Em todos: foco pelo teclado com `--sombra-foco` (também `.botao`, `.redondo`,
`.translucido` e o botão ativo do `.alternar`, corrigidos em 28/10/2026), desabilitado com opacidade
.45 e `cursor: not-allowed`, fonte Inter 12,5–13px. Erro de campo: `.erro` em
`--negativo`, sem vermelho berrante no campo.

**Feedback:** `.nota` (Bruma Clara, com i-info ou i-escudo), `.popover` +
`.notif` (sino; ponto Ardósia para não lida), `.girando` (rodinha), tooltips e
avisos acima.

## Rolagem, foco e movimento

- O `.painel` é a "página": rola com barra fina Bruma Profunda sempre
  disponível. Tudo que rola **dentro** (listas, menus, janelas, textareas) rola
  sem barra vertical; a horizontal fica fina (6px) e cinza, porque quem usa
  mouse precisa dela.
- Foco pelo teclado: sempre o anel `--sombra-foco`; campos de texto usam o brilho
  `.brilho` no lugar do anel. Nunca remova o foco sem colocar um dos
  dois no lugar.
- Hover de cor/fundo: 150ms `--ease`. Botão da marca: 0,6s `cubic-bezier(.25, 1, .5, 1)`.
  Menus e janelas abrem na hora. Nada de quique, mola ou parallax.

## Responsivo

- Quebras: **1440** (lista+detalhe empilha), **1280** (indicadores em 2
  colunas; no cabeçalho, o título ocupa a linha inteira e os cartões de resumo
  ficam lado a lado), **1024** (a lateral sai; a marca fica à esquerda da
  barra superior; o painel ocupa tudo; `.col-esconde` some; a tela de entrar
  vira só o cartão), **640** (respiros menores, título 30px, busca na largura
  toda, 1 coluna, a ação `.translucido` da barra superior some).
- **Celular é abaixo de 768px** quando o sistema separa celular e computador.
- Abaixo de 1024px a lateral vira **gaveta da esquerda** (268px, Névoa, véu
  escurecido): ponha `<button class="redondo abrir-gaveta">` com `i-menu` na
  barra superior e o `comum.js` abre/fecha (véu, Esc ou clique em link fecham).
  O botão só aparece abaixo de 1024px (`layouts.css`, 23/10/2026).

## Outros formatos (apresentação, post, impresso)

O DS vale para qualquer peça, não só sistemas: use as mesmas cores, raios por
camada, vidro e degradês, e **multiplique a escala tipográfica** pela coluna do
formato (tabela acima). Capas e peças de marca: fundo `--g-bruma-2` (Céu) ou
subaplicação escura (`.escuro`/`.vitrine`) com o símbolo grande; destaque
Ardósia aprovado para apresentações (pílula de cliente, cartão de número,
etiqueta — texto branco). Fotografia: luz suave, foco curto, contraste baixo,
saturação −18%, sombras para Ardósia, altas luzes para Tela; temas variados
(não só rostos).

## Convenções de interface (pedidos da Isabela — valem em todos os sistemas)

- **Idioma:** português do Brasil, frases curtas, sem jargão técnico.
- **Pessoa aparece por foto + nome de exibição** (componente `.autor`); e-mail
  no `title` e no perfil. Sem nome: o nome do Google; sem os dois: o e-mail.
  Remetente automático leva ícone no lugar da foto.
- **Horário no fuso de quem vê**; se quem fez está em outro fuso, mostre os
  dois. Datas em formato brasileiro (`12 out 2026`, `12/10/2026`).
- **Nada se perde:** apagar manda para a lixeira e pode ser restaurado (e a
  interface diz isso).
- **Comentários: cada pessoa edita e exclui só os próprios.** O botão (⋯) só
  aparece nos comentários de quem vê; Editar vira textarea no lugar (Esc
  cancela, Ctrl/⌘+Enter salva; "· editado" discreto com a data na dica);
  Excluir pede confirmação na `.janela` e fica registrado no histórico (quem,
  quando), sem o texto. **A API também recusa (403)** editar/excluir comentário
  de outra pessoa — esconder o botão não basta.
- **Login do time:** Entrar com Google, só `@impulsamos.es`. Ações de baixar
  dados também só para `@impulsamos.es`.

## O que não fazer

- Outra fonte, outra família de ícones, raio fora da tabela, cor fora de
  `tokens.css` (roxo, laranja, azul saturado; verde e vermelho só os
  semânticos do tokens.css, só com sentido de certo/errado).
- Lima em tema claro ou como texto. Ardósia como fundo de página, ou dois
  blocos escuros encostados (o escuro é parada do olho, não fundo).
- Texto colorido solto para indicar estado (use pílula, ✓/✕ ou o par
  fundo + cor forte semântica).
- Mais de um `.botao` no mesmo grupo de ações.
- Sombra forte, contorno grosso, degradê fora dos oficiais, vidro sobre branco
  chapado. Modo escuro automático (`prefers-color-scheme`) ou escuro por cores
  fora da paleta: o escuro é só o de `tokens.css` e só por escolha da pessoa.
- Reescrever um componente que já existe em `base.css`.
- Qualquer controle (lista, calendário, caixa, radio, arquivo, alerta) com o
  visual do navegador ou de biblioteca.
- Citar testes internos de marca (frentes de cor antigas) em material visível.

## Modo escuro (23/10/2026)

Pedido da Isabela: um modo escuro que vale para **todos os sistemas**, com foco
em **Tinta, Ardósia e Lima**, sem sair da paleta Bruma. Só cores da paleta, suas
misturas (`color-mix`) e alfas — nenhum matiz novo.

**Como ligar.** O claro continua padrão; o escuro é escolha da pessoa, guardada
neste navegador em `localStorage` `impulsamos:tema` (`escuro` | `claro`) e
aplicada como `<html data-tema="escuro">`. Nunca segue o `prefers-color-scheme`
sozinho.
1. No `<head>`, antes dos CSS, a linha que aplica o tema salvo antes de pintar
   (sem piscar): `<script>try{if(localStorage.getItem('impulsamos:tema')==='escuro')document.documentElement.dataset.tema='escuro'}catch(e){}</script>`
2. O botão sol/lua fica no **pé da lateral**, à direita do "Recolher": o
   `comum.js` cria sozinho (`.lateral-pe` › `button.tema[data-alternar-tema]`),
   não vai no HTML (lua no claro, sol no escuro; o `base.css` mostra um dos
   dois). Tela sem lateral (ex.: acesso) pode pôr um
   `<button class="redondo" data-alternar-tema aria-label="Modo escuro">` com os
   ícones `i-lua` e `i-sol`.
3. O `comum.js` faz o resto (clique, `aria-pressed`, `title`, salvar).

**Paleta escura** (tokens redefinidos em `:root[data-tema="escuro"]`, mesmo
nome, mesmo papel — `--tinta` continua sendo "a cor do texto", `--branco` "a
superfície do cartão"):

| Token | Valor no escuro | Papel |
|---|---|---|
| `--nevoa` | `#101820` Tinta | Casca (atrás do painel), chips, trilhos |
| `--tela` | `#14202B` (Tinta + 20% Ardósia) | Painel, blocos rebaixados, `.carta` |
| `--branco` | `#1A2C3A` (Tinta + 48% Ardósia) | Cartão, campo, menu, botão fantasma |
| `--bruma-clara` | `#1F3546` (Tinta + 70% Ardósia) | Nota, disco, trilho, item escolhido, hover suave |
| `--ardosia` | `#254157` (igual) | **Destaque/superfície**: `.cartao.destaque`, `.bloco.escuro`, pílula "aberto", balões |
| `--tinta` / `-82` / `-66` / `-56` / `-46` / `-32` | Tela `#F5F8FB` a 100 / 82 / 66 / 56 / **50** / **38**% | Texto e ícones (46 e 32 sobem para passar nos mínimos) |
| `--linha` / `--linha-forte` / `--hover` | Tela a 8 / 16 / 5% | Divisores, bordas, hover |
| `--ardosia-media` | `#8FA6B8` Aço | Links e ações de texto, nome do sistema |
| `--acento` | `#D3E0EA` Bruma | Ícones e pontos de destaque (a Ardósia sumiria no escuro) |
| `--marcado` / `--sobre-marcado` | `#E3E935` Lima / Tinta | Controle marcado, não lida |
| `--st-aberto/-ok/-espera/-alerta` | Ardósia; verde, âmbar e vermelho fortes misturados 45% na Tinta | Fundo de estado escuro |
| `--positivo` / `--negativo` / `--aviso-texto` | a cor forte misturada 40–50% no fundo claro de estado | Texto/ícone semântico legível (≥ 5,3:1) |
| `--vidro` / `--vidro-denso` / `--translucido` / `--veu` | cartão a 55% / 86%, Tela a 6%, painel a 90→0% | Vidros com desfoque |
| `--g-painel` / `--g-bruma-*` | luz Ardósia sobre Tinta | Luz do topo, degradês |
| sombras | Tinta escurecida, mais fortes, + fio claro de 1px | Cartão, menus, janela |
| `--sombra-foco` | anel Lima a 50%, 3px | Foco pelo teclado |

Ficam iguais: `--bruma`, `--ardosia`, `--lima`, `--aco`, `--bruma-profunda`.

**Regra da Lima no escuro.** No claro a Lima continua proibida. No escuro ela
vira o **acento pontual** — e só nestes lugares: anel de foco, item ativo
(`.chip.ativo`, aba, página atual da paginação, ícone do item ativo da
lateral), controle marcado (caixa, radio, chave, deslizador, dia escolhido),
ponto de não lida (sino, notificação), luz da borda dos botões no hover e o
símbolo `.estrela` da faixa de atenção e do fecho Ardósia. Nunca como fundo de
área, nunca em texto corrido, nunca em alfa baixo (vira oliva).

**O que muda em cada componente** (`base.css`/`layouts.css`, blocos "MODO
ESCURO" no fim de cada arquivo; o resto vem dos tokens):
- `.botao` padrão: fundo **Bruma** (a cor principal) com texto Tinta; hover
  clareia para branco e a luz da borda acende em Lima. `.claro` fica branco;
  `.contorno` fica com o miolo do fundo e anel claro; `.destaque` fica Ardósia
  (hover Ardósia + Aço). Em todos, a luz do hover é Lima.
- `.fantasma`/`.translucido`: hover em fundo claro translúcido (sem efeito).
- `.cartao.destaque` e `.bloco.escuro`: Ardósia com uma luz Ardósia+Aço no
  canto e fio claro de 1px — assim continuam sendo o ponto de parada do olho.
- Campos: borda de foco Aço; o brilho gira em Ardósia/Aço com um fio de Lima.
- Chave líquida: trilho Tela a 16%; ligada = Lima com a gota Tinta.
- Caixa/radio: borda Tela a 30%; marcada = Lima com check Tinta.
- `.popover`, `.calendario`, `.janela`: vidro denso escuro (`--vidro-denso`).
- Balões (`.com-dica`, `.ponto-s`): Ardósia. Pílulas de estado: fundo escuro,
  texto e ponto na cor semântica clara (aberto: Bruma). `.contagem`: Ardósia com número Bruma.
- Gráfico: barra comum em Ardósia + Aço, barra alta em Bruma.
- Casca: mancha do painel em Ardósia; lateral e conta com brancos em alfa
  baixo; título-marca-d'água em Tela a 30%; véu do topo na cor do painel.
- Tela de acesso: mesmo modelo (cartão de vidro escuro), manchas e símbolo do
  fundo em Ardósia; o botão "Entrar com Google" continua branco.
- `.estrela` dentro de `.cartao.destaque`/`.bloco.escuro`: Lima (no claro, Bruma).

**Para quem escreve tela:** use só tokens (`var(--…)`). Ardósia como **texto ou
ícone** some no escuro: para isso use `--acento`; para controle marcado,
`--marcado`; texto sobre um fundo que não inverte (Lima, branco fixo), use
`--tinta-fixa`. Nada de `#fff`/`rgba(…)` escrito à mão fora do DS.

## Correções 28/10/2026

Pedido da Isabela: corrigir os problemas apontados no DS (esta pasta, que os
outros sistemas copiam) e na Plataforma de Marca. Nada de efeito ou animação
novos.

- **Menu ⋯ da linha** agora é do `comum.js` (antes cada tela escrevia o JS):
  `aria-controls` no ⋯ → `.popover.menu-linha[hidden]` com o mesmo `id`. Abre
  `fixed` colado ao botão sem sair da tela, foca o 1º item, `aria-expanded`,
  fecha com Esc, clique fora, item ou rolagem. Markup em Componentes › Tabela.
  O JS próprio saiu de `exemplos/configuracoes.html` (e da tela da plataforma).
- **Indicador com variação ruim:** `small.negativo` (`--negativo`) e
  `small.neutro` (`--tinta-56`); o `small` sem classe continua verde.
- **Estrela sobre o escuro:** `.estrela` dentro de `.cartao.destaque` e
  `.bloco.escuro` sai em Bruma (no tema escuro, Lima). Antes ficava Ardósia
  sobre Ardósia e sumia.
- **Sem style inline:** `.grafico-barras` tem altura padrão (`--altura`,
  140px); `.mancha` tem `.pequena`/`.media`/`.grande` e posição padrão no
  `.bloco.degrade`. O painel de exemplo não tem mais `style=""` de layout.
- **Exemplos completos:** painel, perfil, configurações e componentes têm o
  `.abrir-gaveta` (abre a lateral abaixo de 1024px) e o sino dentro da
  `.sino-caixa` com o `.popover` de notificações (abre pelo `comum.js`).
- **Tela de acesso:** `exemplos/acesso.html` é o exemplo oficial (cópia da
  versão viva). O cartão é **de vidro**, não branco. `exemplos/entrar.html`
  fica como legado.
- **Hover do `.botao`** funciona em todos os estilos e temas (claro → Bruma,
  contorno → Ardósia com texto branco, destaque → Tinta, sobre Ardósia →
  branco/Bruma, escuro conforme Modo escuro): o hover troca `--b-cor` e
  `--b-luz-agora`, que nenhum estilo define.
- **Foco pelo teclado:** anel `--sombra-foco` no `.botao`, `.redondo`,
  `.translucido` e `.alternar` (antes o `box-shadow` deles apagava o anel).
- **Formulário:** ícone do campo de data por cima do `.brilho`; `select[data-combo]`
  com `disabled` e teclado; calendário abre pelo teclado; chave da `.opcao`
  sempre à direita; `--valor` do deslizador atualizado pelo `comum.js`;
  `.g-disco` genérico (`base.css`); ícone da `.dica` com 13px padrão; `.zona`
  dentro de `.campo` em tinta.
- **Contraste no claro:** `--tinta-56` .56 → .62, `--tinta-46` .46 → .60,
  `--tinta-32` .32 → .48 (texto ≥ 4,5:1, ícone e borda ≥ 3:1 sobre branco).
- **Menus:** `.separa` e `.perigo` em `<a>` e `<button>`; `.separa` também no
  `.menu-linha`.
- **Pílula de estado sobre o escuro** mantém a cor semântica.
- **Aviso flutuante:** `i-alerta` em âmbar; vermelho só no `i-fechar`.
- **Tabela de leitura:** `table.leitura` (a última coluna à direita ficou só
  nas tabelas de dados).
- **Raios 10/8/6 e vidro dos menus:** mantidos e registrados como exceção em
  Princípios e na tabela de Cores (mexe menos no visual aprovado).
- **Modo escuro, passo 2:** o botão sol/lua é do pé da lateral (`comum.js`).
- **Texto que não batia com o código:** o `.botao` troca em 0,6s
  `cubic-bezier(.25, 1, .5, 1)`, sem rótulo rolando; o clique desce 1px e
  encolhe para 98%.

## Origem e manutenção

- Fundações: canvas "Identidade Visual Impulsamos" (Claude Design), página Cor
  principal — paleta Bruma (16/10/2026), Ardósia nova `#254157`, símbolo e
  logotipo novos e Sora (22/10/2026), escala tipográfica (22/10/2026).
- Estrutura de componentes e layouts: kit VOIT DS + VOIT Blocks (Figma), uma
  variante escolhida por elemento, adaptada às fundações da marca. Ícones
  trocados de Material para Lucide.
- Comportamentos e convenções: pasta "Identidade Visual Sistemas Impulsamos"
  (SRV), portados e re-estilizados.
- Quando a Isabela pedir uma mudança visual que valha para todos os sistemas,
  aplique-a aqui (tokens/base/layouts + este arquivo + exemplos) e registre a
  data.

## Texto para colar no pedido a outro agente

```text
Use o design system da Impulsamos. Antes de escrever qualquer tela, leia
"Plataforma de Marca - Impulsamos/Design System/LEIA-PRIMEIRO.md" (no Drive
compartilhado) e siga as regras dele. Copie tokens.css, base.css, layouts.css,
comum.js e marca.js para o projeto, monte as telas a partir de
exemplos/painel.html (ou exemplos/acesso.html para login) e use os ícones de
icones.svg. Não invente cores, fontes, raios, sombras ou ícones fora dessas
regras. O nome curto do sistema ao lado do logotipo é: <NOME>.
```

- **Lateral recolhida (27/10/2026):** ao passar o mouse ou focar num ícone (grupo, página, Recolher, tema, conta), o nome aparece numa caixinha Tinta à direita (`.dica-lateral`, criada pelo `comum.js`, `position: fixed` para não ser cortada pela rolagem da lateral). A dica some ao sair do ícone e em qualquer clique, inclusive em "Abrir a lateral" (28/10/2026). Com vários grupos abertos a lateral rola e **nenhum item encolhe** (`.lateral > * { flex-shrink: 0 }` no `layouts.css`).
- **Menu ⋯ pelo teclado (28/10/2026):** com o menu aberto, ↑ e ↓ andam entre os itens (dão a volta), Home e End vão ao primeiro e ao último, Esc fecha e devolve o foco ao botão.
- **Ícones (28/10/2026):** `icones.svg` ganhou `i-alerta`, `i-lua`, `i-sol`, `i-megafone`, `i-parceria`, `i-bandeira`, `i-bussola` e `i-texto` (63 ícones; últimos: `i-paleta`, `i-formas`, `i-regras`, `i-nota`). É um recorte curado da Lucide, não a biblioteca inteira; o traço 1,5 vem do CSS (`svg.i`), não do arquivo. Ícone novo: copiar o `<path>` do lucide.dev para um `<symbol id="i-nome" viewBox="0 0 24 24">` e registrar aqui.
- **Biblioteca Lucide completa (28/10/2026):** `lucide.svg` (1.858 ícones, lucide-static 1.50.0, ISC) fica na pasta do DS como acervo. **Não** é carregado inteiro nas telas. Para usar um ícone fora do recorte: `<svg class="i"><use href="#lucide-nome-em-ingles"/></svg>` (nome exato do lucide.dev). O `comum.js` lê do `lucide.svg` só os ícones usados (precisa de http; em `file://` não carrega). Ícone que passar a ser usado com frequência deve ir para o `icones.svg` com nome `i-…` em português. Ícone `#i-…` inexistente gera aviso no console.