/* =============================================================================
COMPONENTES — camada de componentes do design system
Projeto: renovacao-certificado-campinas (gêmeo GENESIS) · fase de linguagem visual
Origem: design/01-institucional-denso.html (direção escolhida pelo dono em 03/08/2026)
TESE DA DIREÇÃO 01 — terminal de operação.
· alta densidade: a operadora passa o dia aqui, densidade é respeito ao tempo dela;
· hierarquia por TIPOGRAFIA E PESO, não por cor e caixa;
· cromia contida: o cinza domina, a cor só aparece onde carrega significado;
· régua de 1px no lugar de sombra;
· número tabular em coluna, serifada no cabeçalho, mono nos identificadores.
Nada aqui foi inventado: todo valor foi extraído da maquete 01.
DEPENDE DE tokens.css (agente irmão). Este arquivo NÃO define cor nenhuma:
se o valor é cor, vem de token. Duplicar a paleta aqui criaria a segunda fonte
de verdade que esta fase existe para impedir. A lista fechada de tokens
consumidos está em "CONTRATO DE TOKENS" logo abaixo — exemplos.html confere
essa lista em tempo de carga e denuncia o que faltar.
ORDEM DE CARGA (obrigatória):
NOMENCLATURA: toda classe deste arquivo começa com `ds-`. Sem seletor de
elemento solto (exceto dentro de .ds-table), sem !important, sem id.
O prefixo é o que permite um gate perguntar "essa classe é do sistema ou é
CSS de ocasião?" — e é o que impede colisão com o CSS do legado no cutover.
MAPA maquete 01 → sistema (para o porte da F3 ser mecânico):
.panel → .ds-panel .kpi → .ds-kpi .btn → .ds-btn
.cyclebar → .ds-cyclebar .cyc → .ds-cyc .chip → .ds-badge
.notice → .ds-notice .meter → .ds-meter .wbar → .ds-wbar
.filterbar → .ds-filterbar .legend → .ds-legend table → .ds-table
.num/.mono/.eyebrow/.dim → .ds-num/.ds-mono/.ds-eyebrow/.ds-dim
SUMÁRIO
00 · Contrato de tokens 08 · Medidores (meta, janela, progresso)
01 · Escala local (medida/tipo) 09 · Badge de estado
02 · Base e utilitários 10 · Legenda
03 · Foco e alvo de clique 11 · Campo de formulário e select
04 · Painel / cartão 12 · Notice (alerta / faixa de aviso)
05 · Tabela densa 13 · Alternadores sol/lua e textura
06 · Abas de ciclo (12 + Todos) 14 · Filtros
07 · Indicadores (KPI) 15 · Contraste forçado · impressão · movimento
============================================================================= */
/* =============================================================================
00 · CONTRATO DE TOKENS — o que este arquivo exige de tokens.css
Se um destes sumir, componente quebra. exemplos.html mostra faixa vermelha
listando os ausentes; não há fallback silencioso, de propósito.
tipografia --font-ui --font-serif --font-mono
superfícies --plane --surface --surface-alt --surface-sunk
tinta --ink --ink-2 --ink-3
réguas --rule --rule-strong --grid
séries --s-renovado --s-pendente --s-aberto --s-ramp-100
status --st-good --st-good-tx --st-warn --st-serious
--st-crit --st-crit-tx
foco --focus
REGRA DE PALETA: os valores acima foram validados contra daltonismo e
contraste (skill dataviz) nos dois modos. Alterar um valor de cor sem
revalidar é violação. Este arquivo nunca faz color-mix() com hue novo —
só mistura com --ink/--surface (neutros), o que preserva a validação.
============================================================================= */
/* =============================================================================
01 · ESCALA LOCAL — medida, tipo, raio
Extraída da maquete 01, não inventada. Declarada em :where(:root) para ter
especificidade ZERO: se tokens.css definir estes mesmos nomes, tokens.css vence.
============================================================================= */
:where(:root){
/* espaço — a densidade da direção 01 vive nesta escala curta */
--ds-sp-1: 2px;
--ds-sp-2: 3px;
--ds-sp-3: 4px;
--ds-sp-4: 5px;
--ds-sp-5: 6px;
--ds-sp-6: 8px;
--ds-sp-7: 10px;
--ds-sp-8: 12px;
--ds-sp-9: 16px;
/* tipo — a maquete usa meio-pixel de propósito; é o que dá a densidade */
--ds-text-micro: 9.5px; /* tick de eixo, th */
--ds-text-eyebrow: 10px; /* rótulo caixa-alta */
--ds-text-note: 10.5px; /* nota de rodapé de painel */
--ds-text-ctl: 11px; /* controle: botão, select, aba */
--ds-text-body: 11.5px; /* corpo de tabela */
--ds-text-base: 12px; /* corpo da página */
--ds-text-lede: 12.5px; /* linha-fina serifada */
--ds-text-h2: 13.5px; /* título de painel (serifada) */
--ds-text-h1: 15px; /* wordmark (serifada) */
--ds-text-kpi: 20px; /* indicador */
--ds-text-hero: 44px; /* indicador herói */
--ds-lh: 1.35;
--ds-lh-ctl: 1.5;
--ds-track: .07em; /* letter-spacing de caixa-alta */
--ds-track-lg: .09em;
--ds-radius: 2px; /* controles */
--ds-radius-sm: 1px; /* marcadores, trilhos */
--ds-rule: 1px; /* NUNCA sombra: a régua de 1px é a estrutura */
/* alvo de clique — ver seção 03 */
--ds-hit: 24px;
/* deslocamento do topo para cabeçalho fixo de tabela; a F3 ajusta para a
altura do masthead quando a tabela rolar junto com a página */
--ds-sticky-top: 0px;
/* altura máxima da região rolável de tabela; `none` = rola com a página */
--ds-table-h: none;
}
/* =============================================================================
02 · BASE E UTILITÁRIOS
.ds-root vai no (ou no contêiner do app). Não estilizamos direto:
este CSS ainda pode conviver com o legado durante o cutover.
============================================================================= */
.ds-root{
background: var(--plane);
color: var(--ink);
font-family: var(--font-ui);
font-size: var(--ds-text-base);
line-height: var(--ds-lh);
-webkit-font-smoothing: antialiased;
}
/* número: SEMPRE tabular. Coluna de número que dança é erro de leitura. */
.ds-num{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* mono: identificador (protocolo, documento mascarado, hash) — nunca prosa */
.ds-mono{
font-family: var(--font-mono);
font-size: var(--ds-text-ctl);
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
}
/* rótulo caixa-alta acima de um valor */
.ds-eyebrow{
font-size: var(--ds-text-eyebrow);
letter-spacing: var(--ds-track-lg);
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
/* serifada: reservada a título e linha-fina. É carater da direção, não enfeite. */
.ds-serif{ font-family: var(--font-serif); }
.ds-dim{ color: var(--ink-2); }
.ds-dimmer{ color: var(--ink-3); }
/* só para leitor de tela */
.ds-sr-only{
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* valor que NÃO EXISTE — não é zero, é ausência. O antídoto da mentira gráfica:
use em "sem base" no lugar de renderizar 0 / 0%. */
.ds-indisponivel{
color: var(--ink-3);
font-variant-numeric: tabular-nums;
font-style: normal;
}
.ds-indisponivel::before{ content: "—"; }
/* delta (variação) — cor + sinal textual, nunca cor sozinha */
.ds-delta{
display: inline-flex; align-items: center; gap: var(--ds-sp-2);
font-variant-numeric: tabular-nums;
}
.ds-delta--bom{ color: var(--st-good-tx); }
.ds-delta--ruim{ color: var(--st-crit-tx); }
.ds-delta--bom::before{ content: "▲"; font-size: .8em; }
.ds-delta--ruim::before{ content: "▼"; font-size: .8em; }
/* =============================================================================
03 · FOCO E ALVO DE CLIQUE (R-SEC-11)
Foco visível em TUDO que recebe teclado. Regra única, aplicada na raiz do
sistema, para não depender de alguém lembrar componente a componente.
ALVO: a maquete usa controle de ~21px de altura. O dono decidiu que a tela é
visível para TODO o time — mais gente, mais dispositivo. Subimos o mínimo para
24px (WCAG 2.2 · Target Size Minimum) e 32px em ponteiro grosso. É o ÚNICO
desvio deliberado de valor da maquete neste arquivo, e custa 3px de altura.
============================================================================= */
.ds-root :focus-visible,
.ds-root:focus-visible{
outline: 2px solid var(--focus);
outline-offset: 1px;
}
/* o alvo pintado de tinta precisa do respiro invertido para o foco não sumir */
.ds-btn[aria-pressed="true"]:focus-visible,
.ds-cyc[aria-pressed="true"]:focus-visible,
.ds-btn--primario:focus-visible{ outline-offset: 2px; }
.ds-btn, .ds-cyc, .ds-input, .ds-select, .ds-toggle{ min-height: var(--ds-hit); }
@media (pointer: coarse){
:where(:root){ --ds-hit: 32px; }
}
/* =============================================================================
04 · PAINEL / CARTÃO — régua de 1px, NUNCA sombra
Estrutura:
`tabindex="0"` não é enfeite: região que rola precisa ser alcançável pelo teclado.
border-collapse: separate + border-spacing 0 é PROPOSITAL — com `collapse`
a borda do
grudado (sticky) some no Chrome/Safari. A aparência é idêntica.
============================================================================= */
.ds-tablewrap{
overflow: auto;
max-height: var(--ds-table-h);
overscroll-behavior: contain;
}
.ds-tablewrap:focus-visible{ outline: 2px solid var(--focus); outline-offset: -2px; }
.ds-table{
border-collapse: separate; border-spacing: 0;
width: 100%;
font-size: var(--ds-text-body);
}
.ds-table caption{
text-align: left;
font-size: var(--ds-text-eyebrow);
letter-spacing: var(--ds-track);
text-transform: uppercase;
color: var(--ink-3);
padding: var(--ds-sp-5) var(--ds-sp-7) var(--ds-sp-3);
}
.ds-table th,
.ds-table td{
padding: var(--ds-sp-2) var(--ds-sp-6);
text-align: left;
border-bottom: var(--ds-rule) solid var(--grid);
white-space: nowrap;
}
.ds-table thead th{
position: sticky; top: var(--ds-sticky-top); z-index: 2;
background: var(--surface-alt);
font-size: var(--ds-text-micro);
letter-spacing: var(--ds-track);
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
border-bottom: 0;
/* a régua do cabeçalho vai de box-shadow para não descolar ao grudar */
box-shadow: inset 0 -1px 0 var(--rule-strong);
}
.ds-table tbody tr:hover > *{ background: var(--surface-alt); }
.ds-table tbody tr:last-child > *{ border-bottom: 0; }
/* coluna numérica: direita + tabular. Toda coluna de número usa .ds-n. */
.ds-table .ds-n{ text-align: right; font-variant-numeric: tabular-nums; }
/* totais grudados no rodapé da região rolável */
.ds-table tfoot td,
.ds-table tfoot th{
position: sticky; bottom: 0; z-index: 2;
background: var(--surface-alt);
font-weight: 600;
border-bottom: 0;
box-shadow: inset 0 1px 0 var(--rule-strong);
}
/* linha selecionada — marca de tinta à esquerda, não só fundo */
.ds-table tbody tr[aria-selected="true"] > *{ background: var(--surface-alt); }
.ds-table tbody tr[aria-selected="true"] > :first-child{
box-shadow: inset 2px 0 0 var(--ink);
}
.ds-table--clicavel tbody tr{ cursor: pointer; }
/* tabela embutida que abre/fecha sob um painel */
.ds-tablewrap--inline{ border-top: var(--ds-rule) solid var(--rule); }
.ds-tablewrap[hidden]{ display: none; }
/* =============================================================================
06 · ABAS DE CICLO — as 12 do exercício + "Todos"