/* ═══════════════════════════════════════════════════════════════════
Base de toda tela do sistema.
DUAS CAMADAS, e a distinção é o que faz o tema claro existir:
1. CORES DA MARCA (--ambar, --escuro, ...) — os pigmentos. Elas NÃO
mudam com o tema, porque a marca não muda com o tema.
2. PAPÉIS (--texto, --superficie, --acento-fundo, ...) — o que a
tela pede. É só isto que uma tela pode usar.
☠️ Nunca escreva `color: var(--ambar)` numa tela. Âmbar sobre fundo
claro dá 1,70:1 — MEDIDO, não estimado — e o texto some. Quem pede
pigmento direto passa por cima do tema e só descobre no dia em que
alguém liga o tema claro. Peça o papel: `var(--acento-texto)`.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── 1. Pigmentos (MARCA.md) ───────────────────────────────────── */
--escuro: #0C181F;
--ambar: #FFBB10;
--neutro: #8993A4;
--claro: #F0F0F0;
--raio-bloco: 20px;
--raio-campo: 12px;
/* ── Alvo de toque ────────────────────────────────────────────
Decisao do Luciano em 20/08/2026, na segunda passada: 52px onde se
usa o DEDO, 44px onde se usa ponteiro fino. Ninguem perde — o piso
da WCAG 2.5.8 e' 44, e os dois passam.
☠️ O valor padrao e' o MAIOR, e isso e' de proposito: navegador que
nao entenda `pointer` cai no 52 e sobra alvo, em vez de cair no 44 e
faltar. Falhar para o lado que ainda funciona.
A primeira versao dizia "52px; nao encolhe nunca" e o cabecalho
estava em 38 — promessa que o codigo nao cumpria. Agora nenhum
controle escreve numero: todos pedem `var(--toque)`. */
--toque: 52px;
--fonte: "Schibsted Grotesk", "Inter", "Segoe UI", Calibri, Arial, sans-serif;
/* ── Escala tipográfica ────────────────────────────────────────
☠️ Cor e alvo de toque estavam rigorosamente tokenizados, e ao lado
deles conviviam 18 tamanhos de fonte distintos e 30 espaçamentos, TODOS
escritos à mão. Não é excesso de zelo: 12px, 12,5px e 13px na mesma tela
não são três decisões, são a mesma decisão tomada três vezes por engano
— e quem chega depois copia o vizinho e inventa o décimo nono.
Seis degraus, e cada um nasceu do que a tela já usava, não de uma
progressão bonita: o número entre parênteses é quantas declarações o
degrau absorve. */
--txt-micro: 11px; /* (10) versalete de etiqueta, selo de estado */
--txt-apoio: 13px; /* (28) rótulo, legenda, texto de ajuda */
--txt-corpo: 14.5px; /* (27) o texto normal e a célula da grade */
--txt-realce: 16px; /* (12) título de cartão, texto de botão */
--txt-secao: 20px; /* (2) título de bloco dentro da tela */
--txt-tela: 24px; /* (4) o título da tela */
/* ☠️ Este NÃO é um degrau da escala, e por isso não se chama `--txt-algo`
que caiba nela: 16px é o piso abaixo do qual o Safari do iPhone DÁ ZOOM
ao focar um campo, jogando a tela para o lado. É restrição do aparelho,
não escolha de desenho — quem reafinar a escala não pode arrastar isto
junto. */
--campo-sem-zoom-no-ios: 16px;
/* ── Escala de espaçamento ────────────────────────────────────
⚠️ Sete degraus, e o mapeamento arredonda para BAIXO no empate. Não é
detalhe: a primeira versão desta escala começava em 4px e mandava 10px
para 12px, e só isso devolveu 23 dos 48px de altura que a densidade da
lista tinha acabado de ganhar — 147px por cartão viraram 170. Escala que
engorda o que se acabou de emagrecer não é escala, é imposto.
☠️ E quando o layout pede 10px e a escala oferece 8 e 12, vale 8. A
escala manda; ajustar a escala para caber num layout é o caminho de
volta para os 30 valores distintos. */
--esp-0: 2px; /* grudado: duas faixas de um mesmo cartão */
--esp-1: 4px; /* colado: rótulo e valor */
--esp-2: 8px; /* dentro de um controle */
--esp-3: 12px; /* entre irmãos de um bloco */
--esp-4: 16px; /* entre blocos */
--esp-5: 24px; /* entre seções */
--esp-6: 32px; /* respiro de topo e de rodapé */
/* ☠️ NÃO É DEGRAU DE ESCALA — é a largura do fio dos campos, e existe para o rótulo poder
alinhar pela TINTA em vez de pela caixa (achado 51).
O texto digitado começa em `padding` + `border` do campo; o rótulo, na borda da caixa.
Alinhar só pelo `padding` deixa 1px de resíduo — invisível de perto, e é exatamente o
que faz uma tela parecer "quase certa" sem ninguém conseguir dizer por quê.
⚠️ Tem nome porque `calc(var(--esp-4) + 1px)` espalhado por três folhas é o mesmo
número escrito à mão três vezes, que é a doença que a escala existe para curar. */
--fio-largura: 1px;
/* ── 2. Papéis — tema ESCURO, que é o padrão ───────────────────
☠️ CARA NOVA de 23/08/2026 — "Vitrine Noturna", decisão do Luciano em prancha.
A régua é docs/revisoes/2026-08-23-uxui-cara-nova-especificacao.md (§1): noite
#081018 de fundo, vitrine #10202B de cartão, texto #E8ECF0 (16,11:1 sobre a
noite), apoio #93A1B0 (7,26:1 noite, 6,30:1 vitrine), linha #1E3240.
⚠️ Os tokens que a especificação NÃO fixa estão marcados como DERIVADOS — o
UX/UI mede cada um no DOM composto e ajusta a especificação, não o contrário. */
color-scheme: dark;
--fundo: #081018; /* noite — texto 16,11:1 (medido na especificação) */
--superficie: #10202B; /* vitrine — texto 14,00:1 */
--superficie-alta: #1B2E3C; /* DERIVADO: bloco sobre bloco, entre a vitrine e a linha */
--texto: #E8ECF0;
--texto-fraco: #93A1B0;
--fio: #1E3240; /* a "linha" da especificação — sólida, mede-se sem compor */
/* ☠️ CONTORNO DE CONTROLE, não divisória — WCAG 1.4.11 pede 3:1 e a divisória não
(especificação §1.1, nascida do achado do UX/UI na fatia 1: meu derivado #33495B
dava 1,92:1 e botão de contorno virava palavra solta). #8993A4 é o neutro OFICIAL
da marca: 4,51:1 no pior fundo do escuro. */
--fio-forte: #8993A4;
--campo-fundo: #0B1922; /* DERIVADO: um passo abaixo da vitrine */
/* ☠️ O VEU E A GRADE — achado 28, segunda metade. Eram literais crus espalhados pelo
`tela-acesso.css`, e por isso a minha guarda de pigmento nao os pegou: ela olha `color`
e `outline`, e estes sao `background`. No tema claro um veu BRANCO sobre fundo claro
compoe para o proprio fundo e some — o Design mediu 1,00:1 e 1,01:1. */
--veu: rgba(232, 236, 240, .035);
--veu-grade: rgba(232, 236, 240, .045);
/* ⚠️ No escuro o âmbar é LUZ (especificação §2): ação primária de fundo âmbar com
tinta escura (10,61:1), acento de texto e anel de foco âmbar (11,27:1 sobre a
noite). Pontual do mesmo jeito — o que acende tudo não destaca nada. */
--acento-fundo: #FFBB10; /* preenchimento: botão, etiqueta */
--acento-sobre-fundo: #0C181F; /* 10,61:1 sobre o âmbar */
--acento-texto: #FFBB10;
--acento-fio: #FFBB10; /* anel de foco do escuro (§1) */
/* ── A CASCA: topo e menu ──────────────────────────────────────
☠️ CARA NOVA (23/08/2026): a decisão de 22/08 da casca âmbar foi REVOGADA pelo
Luciano em prancha — a especificação §0 lista o que morre, e a casca âmbar
abre a lista. A ESTRUTURA atual (menu lateral + gaveta) também morre, mas na
fatia seguinte: estes tokens são o traje interino para a casca velha não
vestir as cores velhas em cima do tema novo. Valores da família da noite,
DERIVADOS — o UX/UI mede. */
--casca-topo: rgba(8, 16, 24, .85);
--casca-menu: rgba(16, 32, 43, .55);
--casca-tinta: #E8ECF0;
--casca-tinta-fraca: #93A1B0;
--casca-fio: #1E3240;
/* ☠️ O FIO FORTE DA CASCA — contorno de controle (avatar, "Sair", hamburguer), e não
separador. São dois papéis diferentes e sempre foram: o separador desenha uma divisão,
o contorno desenha um ALVO que se clica.
⚠️ Nasceu em 23/08/2026 para não enfraquecer o escuro. Ao migrar esses controles de
`--fio-forte` (papel de PÁGINA) para a casca, o único fio que existia era o do
separador — e no escuro isso levaria o contorno de `.28` para `.14`, mudando um tema
que foi prometido intacto. Papel que falta se cria; não se empresta o vizinho. */
--casca-fio-forte: #8993A4; /* contorno de controle na casca — mesma régua da §1.1 */
/* ⚠️ Iguais a `--superficie-alta` de propósito — hover e ativo da casca velha
acompanham o realce do tema novo até a barra inferior chegar. */
--casca-hover: #1B2E3C;
--casca-ativo: #1B2E3C;
--casca-ativo-tinta: #E8ECF0;
/* O fio que marca a pagina em que se esta'. Ambar nos DOIS temas, e por isso parece
redundante — nao e': ele precisa contrastar com o fundo do item ATIVO, que no claro
e' azul e no escuro e' um realce translucido. Papel proprio, nao pigmento cravado. */
--casca-marca: #FFBB10;
/* ☠️ O traço do item ativo da BARRA INFERIOR acompanha a COR DO TEXTO ATIVO —
especificação §4 corrigida pelo próprio UX/UI (e6d33b5) depois de medir a primeira
versão: o traço âmbar dava 1,60:1 contra a barra CLARA (11,27:1 contra a escura —
o traço tinha sido pedido exatamente no tema em que não funciona), e o escuro ficava
sem traço nenhum. Agora são dois sinais fortes e independentes nos dois temas:
a cor do texto e o traço de 3px. */
--barra-traco: #FFBB10; /* 11,27:1 contra a barra da noite */
/* ☠️ A TINTA QUE VAI SOBRE O AMBAR DA MARCA, SEMPRE — e nao e' o mesmo que
`--acento-sobre-fundo`.
A diferenca custou um defeito de 1,00:1: `--acento-sobre-fundo` significa "a tinta que
vai sobre `--acento-fundo`", e os dois invertem JUNTOS. Quem pinta um fundo ambar FIXO
(`var(--ambar)`) e pede aquela tinta quebra no instante em que o papel inverte — foi o
que aconteceu com o botao do proprietario no tema claro: ambar sobre ambar.
Este aqui nao inverte nunca, porque o fundo dele nao inverte nunca. */
--sobre-ambar: #0C181F;
/* ── Estados semânticos — especificação §6, tema ESCURO ────────────
☠️ GRAVADOS JÁ COMPOSTOS EM SÓLIDO, como a especificação manda: os fundos
nasceram translúcidos na prancha, e fundo translúcido se compõe, não se pula —
sólido é o que torna a medição futura trivial e imune à armadilha do parser.
Pares medidos pelo UX/UI (aguardando 10,61 · aceita 8,19 · expirada 5,00 ·
recusada 7,39; "expira hoje" fica para a fatia do cartão, junto do rótulo). */
--estado-aguardando-fundo: #FFBB10;
--estado-aguardando-tinta: #0C181F;
--estado-aceita-fundo: #133732;
--estado-aceita-tinta: #86E0AB;
--estado-expirada-fundo: #22323E;
--estado-expirada-tinta: #93A1B0;
--estado-recusada-fundo: #2D2730;
--estado-recusada-tinta: #E8A9A9;
/* "Expira hoje" (§6): no escuro é transparente com borda e texto âmbar — 9,79:1. */
--estado-expira-fundo: transparent;
--estado-expira-tinta: #FFBB10;
--estado-expira-fio: #FFBB10;
/* Compatibilidade com as telas de acesso, que são escuras sempre. */
--fio-invertido: rgba(240, 240, 240, .18);
}
/* ───────────────────────────────────────────────────────────────────
Tema CLARO. Este é o único bloco que muda se a decisão sobre o âmbar
nos links mudar: hoje âmbar é só PREENCHIMENTO, e texto/link são
escuros com sublinhado. Trocar `--acento-texto` para um âmbar escuro
(#7A5400 dá 6,15:1) é uma linha, e todas as telas mudam juntas.
O servidor decide: `data-tema` vem do perfil do Usuário, no HTML, já
pintado. Não existe script de anti-piscada aqui — a CSP é
`script-src 'self'` e recusa script inline. Sai melhor assim.
─────────────────────────────────────────────────────────────────── */
:root[data-tema="claro"] {
color-scheme: light;
/* ☠️ CARA NOVA de 23/08/2026 — "Papel e Tinta" (especificação §1): papel #F7F8FA,
cartão #FFFFFF, tinta #0C181F (16,95:1 no papel, 18,01:1 no cartão), apoio
#55606E (6,02:1 papel, 6,39:1 cartão), linha #E3E7EC. Tokens sem valor na
especificação estão DERIVADOS, para a medição do UX/UI. */
/* ☠️ ACHADO 33: `--veu`/`--veu-grade` definidos SÓ no `sistema` herdavam o escuro
aqui — veu branco sobre fundo claro some. Os dois blocos claros listam os
MESMOS tokens, e há guarda que cobra. */
--veu: rgba(12, 24, 31, .03);
--veu-grade: rgba(12, 24, 31, .04);
--fundo: #F7F8FA;
--superficie: #FFFFFF;
--superficie-alta: #EDF0F4; /* DERIVADO: bloco sobre bloco */
--texto: #0C181F;
--texto-fraco: #55606E;
--fio: #E3E7EC; /* a "linha" — sólida, mede-se sem compor */
/* ☠️ CONTORNO DE CONTROLE (especificação §1.1): #7C8590 dá 3,27:1 no pior fundo do
claro (a superfície-alta). O neutro da marca aqui REPROVA (2,71:1) — coerente com o
MARCA.md, que já o proíbe sobre fundo claro. Meu derivado #C7CFD8 dava 1,40:1. */
--fio-forte: #7C8590;
--campo-fundo: #FFFFFF;
--acento-texto: #0C181F; /* âmbar como texto sobre claro daria 1,70:1 — proibido */
/* ☠️ O ANEL DE FOCO DO CLARO É A TINTA (#0C181F) — especificação §1, 16,95:1 sobre o
papel. Mata o `#8A6008` de 22/08, que existia por causa da casca âmbar e do botão
azul: os dois morreram na cara nova, e a decisão (c) da retomada morre junto. */
--acento-fio: #0C181F;
/* ☠️ A CASCA ÂMBAR MORREU — cara nova de 23/08/2026 (especificação §0). Traje interino
da casca velha até a barra inferior/trilho da fatia seguinte: papel com fios finos,
item ativo em tinta com marca âmbar (especificação §3, trilho claro). DERIVADOS. */
--casca-topo: #F7F8FA;
--casca-menu: #F7F8FA;
--casca-tinta: #0C181F;
--casca-tinta-fraca: #55606E;
--casca-fio: #E3E7EC;
--casca-fio-forte: #7C8590; /* contorno de controle na casca — mesma régua da §1.1 */
--casca-hover: #EDF0F4;
--casca-ativo: #0C181F;
--casca-ativo-tinta: #FFBB10; /* 10,61:1 sobre a tinta */
--casca-marca: #FFBB10;
--barra-traco: #0C181F; /* §4 corrigida: o traço é a TINTA no claro — 16,95:1;
o âmbar aqui dava 1,60:1 e fica reservado ao gesto */
--sobre-ambar: #0C181F; /* 10,61:1 sobre o âmbar — não inverte, nunca */
/* ⚠️ Ação primária do claro (especificação §1): fundo TINTA com texto ÂMBAR —
10,61:1, a combinação que o próprio MARCA.md manda para botão principal.
Não há mais botão azul. */
--acento-fundo: #0C181F;
--acento-sobre-fundo: #FFBB10;
/* ── Estados semânticos — especificação §6, tema CLARO ─────────────
Pares medidos: aguardando 10,61 · aceita 7,66 · expirada 5,54 · recusada 6,85 ·
expira hoje 16,71 (tinta sobre #FFF6DE, com borda âmbar). */
--estado-aguardando-fundo: #FFBB10;
--estado-aguardando-tinta: #0C181F;
--estado-aceita-fundo: #DDF0E4;
--estado-aceita-tinta: #14532D;
--estado-expirada-fundo: #ECEFF3;
--estado-expirada-tinta: #55606E;
--estado-recusada-fundo: #F8E3E3;
--estado-recusada-tinta: #8C2B2B;
/* ☠️ O fio NÃO é #FFBB10 no claro: âmbar puro dá 1,67:1 contra o cartão e a
urgência máxima fica com a marca mais fraca da lista (achado do UX/UI em
fd38f32 — a terceira vez da mesma física; §6 corrigida em becc3a6).
#AC8415 é o âmbar 34% rumo à tinta: 3,46:1 no cartão, 3,21 no próprio fundo. */
--estado-expira-fundo: #FFF6DE;
--estado-expira-tinta: #0C181F;
--estado-expira-fio: #AC8415;
}
/* "Seguir o sistema" — só quando o Usuário escolheu isso de verdade.
As telas de acesso não emitem `data-tema` e por isso ficam escuras
sempre: antes de entrar, o sistema não sabe de quem é a preferência. */
@media (prefers-color-scheme: light) {
:root[data-tema="sistema"] {
color-scheme: light;
--fundo: #F7F8FA;
--superficie: #FFFFFF;
--superficie-alta: #EDF0F4;
--texto: #0C181F;
--texto-fraco: #55606E;
--fio: #E3E7EC;
--fio-forte: #7C8590;
--campo-fundo: #FFFFFF;
--veu: rgba(12, 24, 31, .03);
--veu-grade: rgba(12, 24, 31, .04);
--acento-texto: #0C181F;
/* ☠️ Os dois blocos de tema claro listam os MESMOS tokens, e há guarda que cobra
(`OsDoisCaminhosParaOTemaClaro_DefinemOsMesmosTokens`) — a divergência já entrou
duas vezes por esquecimento (achados 38 e 33), e nas duas o lado que faltava
herdava o ESCURO. A razão de cada valor está escrita uma vez só, no bloco
explícito da cara nova, acima. */
--casca-topo: #F7F8FA;
--casca-menu: #F7F8FA;
--casca-tinta: #0C181F;
--casca-tinta-fraca: #55606E;
--casca-fio: #E3E7EC;
--casca-fio-forte: #7C8590;
--casca-hover: #EDF0F4;
--casca-ativo: #0C181F;
--casca-ativo-tinta: #FFBB10;
--casca-marca: #FFBB10;
--barra-traco: #0C181F;
--sobre-ambar: #0C181F;
--acento-fio: #0C181F;
--acento-fundo: #0C181F;
--acento-sobre-fundo: #FFBB10;
--estado-aguardando-fundo: #FFBB10;
--estado-aguardando-tinta: #0C181F;
--estado-aceita-fundo: #DDF0E4;
--estado-aceita-tinta: #14532D;
--estado-expirada-fundo: #ECEFF3;
--estado-expirada-tinta: #55606E;
--estado-recusada-fundo: #F8E3E3;
--estado-recusada-tinta: #8C2B2B;
--estado-expira-fundo: #FFF6DE;
--estado-expira-tinta: #0C181F;
--estado-expira-fio: #AC8415;
}
}
/* `pointer: fine` = mouse, trackpad, caneta. `coarse` = dedo. Quem tem os
dois (notebook com tela sensivel) reporta `fine` como primario, e ai' o
ponteiro fino e' mesmo o que a pessoa esta' usando para mirar. */
@media (pointer: fine) {
:root { --toque: 44px; }
}
* { box-sizing: border-box; }
/* ☠️ ANCORA NAO POUSA ATRAS DO CABECALHO.
O `.topo` e' `position: sticky; top: 0` com altura fixa. Sem isto, `#grade` e
`#serie` rolam o alvo ate' `y = 0` e a barra fica POR CIMA -- o Luciano
fotografou (02/09/2026): clicou num controle do Dashboard, a pagina voltou para
o grafico e os BOTOES ficaram escondidos atras do topo. O conserto do dia
anterior tinha resolvido metade do problema e criado a outra metade.
💡 O token ja' existia: o `casca.css` publica `--topo-altura` com um comentario
dizendo, em 25/08, que ele existe para quem precisa se posicionar abaixo do
topo. A UX/UI deixou a peca pronta e eu nao a usei.
⚠️ `scroll-margin-top` e' do ALVO, nao do container que rola -- e por isso a
regra e' universal: qualquer `id` que vire destino de ancora ja' nasce certo.
Um seletor por tela faria a proxima nascer errada, em silencio.
☠️ `[id]` E NAO `:target`, e a diferenca nao e' estilo: `:target` so' casa
DEPOIS de o fragmento virar ativo, e depender de o navegador aplicar o estilo
antes de calcular a rolagem e' apostar em ordem de execucao. Com `[id]` a
margem ja' esta' la' quando a rolagem acontece -- sem "se". A propriedade nao
custa nada em elemento que ninguem ancora: ela so' e' consultada quando algo
rola ate' ele. */
[id] {
scroll-margin-top: calc(var(--topo-altura) + var(--esp-3));
}
/* ☠️ O `[hidden]` do navegador é 0-0-1 e perde para qualquer `.classe { display: … }`.
Elemento marcado como escondido continuava na tela, inerte.
Isto mordeu este projeto QUATRO vezes: o hambúrguer que aparecia sem script e não abria
nada, o campo de busca do menu, a faixa de abas, e — depois de duas correções pontuais e
dois comentários explicando a armadilha — os próprios itens do menu, onde o filtro punha
`hidden` e nada sumia.
As três primeiras foram consertadas uma a uma, com uma regra por seletor. Não adiantou:
a quarta entrou por um seletor novo, que ninguém tinha pensado em cobrir.
⚠️ `!important` aqui não é força bruta — é o significado do atributo. `hidden` quer dizer
"não renderize", e nenhuma classe deveria poder discordar disso. Com esta linha, todo
elemento que nasce escondido para ser revelado por script fica coberto, inclusive os que
ainda não existem. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh; /* nunca 100vh: no celular nao desconta a barra do navegador */
background: var(--fundo);
color: var(--texto);
font-family: var(--fonte);
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
a { color: var(--acento-texto); }
/* No tema claro o âmbar não pode carregar o link sozinho, então o
sublinhado é que informa. No escuro ele já se distingue pela cor. */
:root[data-tema="claro"] a { text-decoration-thickness: from-font; }
/* ⚠️ Achado 39 — este seletor estava FORA do media query, então o reforço do tema claro
aplicava também no escuro, onde a própria regra acima diz que ele é desnecessário. */
@media (prefers-color-scheme: light) {
:root[data-tema="sistema"] a { text-decoration-thickness: from-font; }
}
/* Quem navega por teclado precisa ver onde está, nos dois temas. */
/* ☠️ ACHADO 35 — `--acento-fio`, NUNCA `--ambar`, e a minha regra anterior estava errada.
Eu tinha escrito que ambar pode ficar cravado porque "vale o mesmo nos dois temas". Vale
para `--acento-fundo` e `--acento-sobre-fundo`. NAO VALE PARA O FIO: `--acento-fio` e'
#FFBB10 no escuro e TINTA (#0C181F) no claro, e ganhou valor proprio justamente porque
ambar como contorno nao serve sobre fundo claro — 1,54:1.
A REGRA DE HOJE (B9 da UX/UI, fechado em 08/09/2026): `--acento-fio` e' `#FFBB10` no
escuro (`:134`) e `#0C181F` no claro (`:256` e `:343`) — o anel de foco no claro e' a
TINTA, com 18,01:1 sobre o fundo. As declaracoes sao a verdade; este comentario so'
explica POR QUE o fio tem valor proprio. ☠️ Nao escrever hex aqui: comentario que
descreve valor e' uma instrucao esperando ser obedecida quando o valor mudar.
⚠️ Seis regras sobrescreviam esta com `var(--ambar)` cravado, e CINCO viviam no
`casca.css` — a casca do sistema logado, onde o tema claro E' alcancavel pelo perfil. Ali
nao era latente: quem escolhesse claro via o indicador de foco de cinco controles a
1,54:1.
☠️ O `casca.css` avisa no cabecalho que ninguem escreva `#FFBB10` nesta folha. `--ambar`
e' o mesmo erro por outra porta: nao e' hex, e e' pigmento. */
:focus-visible { outline: 2px solid var(--acento-fio); outline-offset: 2px; }
/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* O botao que so' existe para quem esta' SEM script (ex.: "Salvar" ao lado de um
formulario com auto-enviar). No Autoriza a regra morava no minha-conta.css e a copia
nao a trouxe — o botao ficava visivel com script ligado (rodada 1 do Code Review).
Vive AQUI porque e' comportamento global, nao de uma tela. */
html:not(.sem-script) .so-sem-script { display: none; }
/* ═══════════════════════════════════════════════════════════════════
BOTÕES — o componente do SISTEMA.
☠️ **ESTA REGRA VEIO DO `dominio.css` EM 16/09/2026, e veio por um defeito medido:** o
"Salvar a aparência" da `/minha-conta` recebeu a classe `.botao` e continuou 127×21, com a
folha do agente — porque `.botao` estava definido numa folha que aquela tela não carrega. A
classe existia no HTML e não existia na página. A cadeira UX/UI contou: 0 ocorrências de
`.botao` nas cinco folhas daquela tela.
⚠️ **O `app.css` é a única folha que TODA tela carrega** (`_LayoutPainel`), e é por isso que
o componente mora aqui. A casa irmã já tinha aprendido isto — `minha-conta.css` do Autoriza:
*"botão é componente do SISTEMA; quem definir botão novo: app.css"*.
⚠️ Os seletores de contêiner (`.dominio-form button`, `.grade-filtros button`, …) vêm junto e
não custam nada onde o contêiner não existe: seletor que não casa não pinta. Separá-los
criaria DUAS fontes da verdade para a mesma aparência, que é o defeito que isto veio matar.
═══════════════════════════════════════════════════════════════════ */
.dominio-form button,
.dominio-excluir button,
.grade-filtros button,
/* O seletor de colunas (V0057) entra aqui pela mesma razao do filtro: e' um painel de
controle da grade, e o botao dele tem de ser o MESMO botao — altura de toque, tinta e
raio. Um "Aplicar" de aparencia propria seria um segundo idioma na mesma tela. */
.grade-colunas button,
/* ☠️ A QUARTA VEZ — a fila bancaria (UX/UI, 12/09/2026 noite). O formulario de decisao e'
`.dominio-form-acoes aprovar-acoes`, FORA de um `.dominio-form`, e o Aprovar saia 63×21 com
a roupa do navegador ao lado de um Recusar vestido: a hierarquia invertida justamente na
tela que decide para onde vai o dinheiro. */
.aprovar-acoes button,
/* ☠️ A QUINTA VEZ — o "Gerar o PDF" de `Documentos/Emitido.cshtml`, medido pela UX/UI em
16/09/2026: **92×21 com a roupa do navegador**, ao lado de um "Baixar em Word" de 44px. O
`