/* ============================================================
UbiSafe Fábrica — ui.css
Refatoração do front-end (design handoff, 13/08/2026)
============================================================
Por que este arquivo existe
---------------------------
O projeto tinha DOIS CSS concorrendo (`app.css` e `styles.css`) com
vocabulários paralelos para a mesma coisa (.card x .g-card, .btn x .g-btn,
.tbl x .g-table). Vários templates carregavam os dois e misturavam os dois
na mesma tela — é parte do "cada tela parece de um sistema diferente".
`ui.css` é o vocabulário ÚNICO do design novo. Prefixo `u-`, sem exceção.
Ele NÃO substitui os outros dois de uma vez: convivem enquanto a migração
acontece tela a tela. Uma tela portada usa só `u-`; uma tela ainda não
portada continua no vocabulário antigo e só ganha o shell novo.
REGRA TRAVADA POR TESTE (tests/test_css_tokens.py)
--------------------------------------------------
Este arquivo NÃO PODE declarar nenhum token `--g-*`. A fonte única dos
`--g-*` é `static/tokens.css` e continua sendo — quase mil atributos
`style=""` nos templates dependem daqueles nomes. Aqui só existe `--u-*`.
E, pelo mesmo motivo, NÃO aliase as escalas: `--g-8` é 32px e `--g-space-8`
é 40px, são escalas diferentes. Este arquivo não toca em nenhuma das duas;
os espaçamentos do design novo são literais, do handoff.
Princípios do design (não são preferência, são contrato)
--------------------------------------------------------
- Raio 0 em tudo. Nenhum canto arredondado em lugar nenhum.
- Sem sombra. Nada flutua: alinhamento e a força das réguas organizam.
- Régua estrutural 2px `--u-ink`. Régua de linha 1px `--u-rule`. Não afine
as de 2px — é a espessura que faz a página ler como impressa.
- Todo número usa `tabular-nums`, senão a coluna dança a cada atualização.
============================================================ */
/* ------------------------------------------------------------
Fonte — Archivo, servida LOCALMENTE.
O handoff sugere o do Google Fonts, mas a aplicação hoje não busca
NADA na internet (conferido: zero URLs externas em templates/ e static/), e
o servidor da fábrica pode estar sem saída. Um externo ali vira
espera de DNS em toda página, no aparelho que menos pode esperar — o celular
que chega pelo QR do posto.
São dois arquivos variáveis (400–800 num arquivo só), 67 KB no total:
latin e latin-ext. O latin-ext é o que carrega o "ç/ã/õ" fora do latin
básico; sem ele o português cai em fallback no meio da palavra.
------------------------------------------------------------ */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url('/static/fonts/archivo-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url('/static/fonts/archivo-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* ---- Marca (lida do print do produto real) ----
O teal está DIVIDIDO POR PAPEL de propósito: o botão real da marca
(#2ba193) dá só 3,2:1 com branco em cima. Não use texto branco nele. */
--u-teal: #2ba193; /* só onde NÃO há texto: marcador do rail, barras */
--u-teal-campo: #14685f; /* campo/botão que carrega texto branco — 10,3:1 */
--u-teal-600: #10554e; /* hover do botão primário */
--u-teal-700: #0c443e; /* pressionado; chips no painel teal */
--u-teal-texto: #0f5f57; /* kicker, link sobre fundo claro — 6,7:1 */
--u-teal-link-hover:#12756c; /* hover de link — 5,0:1 */
--u-rail-num: #1a7d72; /* quadrado numerado ativo no rail — 5,0:1 c/ branco */
/* ---- Superfícies e tinta ---- */
--u-bg: #eef4f3; /* fundo da aplicação (mint da marca) */
--u-surface: #f7fbfa; /* cartão do posto */
--u-ink: #1a1b1b; /* texto principal, rail, réguas de 2px */
--u-ink-2: #444141; /* lead, leitura do número */
--u-ink-3: #5c6360; /* texto secundário, rótulos */
--u-rule: #d3dcda; /* régua fina de 1px */
--u-track: #d9e8e6; /* trilha das barras */
--u-selection: #cfe9e5;
/* ---- Rail escuro ----
15/08/2026 — o rail era `#1a1b1b`, o MESMO preto neutro das réguas de 2px.
Colado no mint quase branco do conteúdo, o corte ficava agressivo: um salto
de quase-preto para quase-branco sem meio-termo nenhum, e a tela lia como
preto-e-branco em vez de UbiSafe.
Agora é um CARVÃO PUXADO PARA O TEAL: mesma profundidade, mas com a
temperatura da marca. O degradê vertical é de propósito quase imperceptível
(dois passos, ~6 pontos de luminância) — ele existe para o rail não ler como
um retângulo chapado de 252px, não para parecer degradê. Gradiente visível
brigaria com o resto do sistema, que é chapado por decisão de design.
A tinta das réguas (`--u-ink`) continua `#1a1b1b`: o preto neutro está certo
para linha impressa, o que estava errado era usá-lo como SUPERFÍCIE. */
--u-rail: #1e4a44; /* topo do degradê — teal médio */
--u-rail-fim: #143732; /* pé do degradê */
--u-rail-ativo: #2a5751; /* MAIS CLARO que o rail, não mais escuro (ver abaixo) */
--u-rail-linha: #4a7a72; /* quadrado numerado + divisores */
--u-rail-rotulo: #b0bcba; /* 5,0:1 */
--u-rail-item: #d3dedc; /* 7,2:1 */
--u-rail-w: 252px;
/* Por que estes cinco valores mudaram JUNTOS:
clarear o fundo sem clarear o que está em cima derruba a legibilidade, e
esta tela é lida de longe no chão de fábrica, às vezes com reflexo. Sobre
o `#1e4a44`, os tons antigos davam: item `#b9c2c0` = 4,4:1 e rótulo de
grupo `#9aa3a1` = 3,8:1 — os dois REPROVAM o mínimo AA de 4,5:1, e o
rótulo é texto de 9px, onde o erro dói mais.
E `--u-rail-ativo` inverteu de lógica: no rail quase preto ele era um
cinza MAIS CLARO que o fundo; num rail médio, um `#1e2e2b` seria mais
ESCURO, e o item selecionado apareceria como um buraco em vez de um
realce. Mesma coisa com `--u-rail-linha`, que pinta os quadrados
numerados e os divisores: ele tem de continuar flutuando ACIMA do fundo.
O `#4a7a72` dos quadrados é uma TROCA medida, não um chute. O quadrado
numerado tem duas exigências que puxam para lados opostos: precisa se
destacar do rail (senão o marcador da etapa some como forma) e precisa
segurar o número branco de 10px (que exige 4,5:1). Medido:
#345a54 → 1,3:1 do rail (invisível) · 7,7:1 no branco
#4a7a72 → 2,0:1 do rail · 4,9:1 no branco <- escolhido
#55897f → 2,5:1 do rail · 4,0:1 no branco (reprova o número)
Clarear mais faz o número sumir; escurecer faz o quadrado sumir. */
/* ---- Semáforo ----
Dois níveis por tom. O de LINHA pinta borda/barra; o de FILL fica atrás de
texto branco. Status como texto em <=11px usa o FILL: #15803d e #b45309
dão 4,49:1 nesse tamanho e reprovam AA por pouco.
O verde foi afastado do teal da marca de propósito, para não confundir
identidade com status.
REGRA DE USO (15/08/2026, decisão do dono — vale para o sistema inteiro):
`u-crit` e `u-warn` são para AÇÃO OU CONDIÇÃO COM CONSEQUÊNCIA, nunca para
decoração. Ação segura — simular, conferir, pré-visualizar — é neutra, por
mais importante que seja.
O caso que originou a regra: na tela Importar, o selo "Dry-run antes de
gravar" (a rede de segurança) vinha em `u-warn`, e a única ação sem volta da
página — apagar códigos do banco — era um checkbox cinza. Quem varre a tela
lê o tom antes da palavra, então aquilo ensinava duas coisas erradas de uma
vez: que o âmbar não precede nada de grave, e que antes de apagar dado não
há sinal nenhum a procurar. Quando tudo é urgente, nada é.
A ÊNFASE é outro eixo e continua onde estava: quem grava é preenchido
(`u-btn-solid`), quem simula é contorno. Tom ≠ peso.
Travado, na tela onde nasceu, por tests/test_tom_por_consequencia.py. */
--u-ok: #157a42;
--u-ok-fill: #14713d; /* 7,2:1 com branco */
--u-warn: #b45309;
--u-warn-fill: #8a4008; /* 7,4:1 */
--u-crit: #b91c1c;
--u-crit-fill: #a11616; /* 8,0:1 */
/* ---- Tipografia ---- */
--u-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* ---- Ritmo da página (literais do handoff) ---- */
--u-pad-x: 44px; /* padding lateral de toda seção */
--u-pad-sec: 34px; /* padding vertical padrão de seção */
--u-shell-gap: 0px;
}
/* Tons como custom property: um modificador só, herdado pelos filhos.
É o que deixa `.u-queue-row.u-crit` pintar borda, número e status de uma vez
sem três classes diferentes. */
.u-ok { --u-tone: var(--u-ok); --u-tone-fill: var(--u-ok-fill); }
.u-warn { --u-tone: var(--u-warn); --u-tone-fill: var(--u-warn-fill); }
.u-crit { --u-tone: var(--u-crit); --u-tone-fill: var(--u-crit-fill); }
.u-ink { --u-tone: var(--u-ink); --u-tone-fill: var(--u-ink); }
/* ============================================================
1. Base
============================================================ */
.u-app,
body.u-app {
margin: 0;
background: var(--u-bg);
color: var(--u-ink);
font-family: var(--u-font);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.u-app *,
.u-app *::before,
.u-app *::after { box-sizing: border-box; }
.u-app ::selection { background: var(--u-selection); }
.u-app a { color: var(--u-teal-campo); }
.u-app a:hover { color: var(--u-teal-link-hover); }
/* Nunca o anel azul padrão do browser. */
.u-app :focus-visible {
outline: 2px solid var(--u-teal-campo);
outline-offset: 2px;
}
/* Nada arredondado, nada flutuando — inclusive no que vier de fora. */
.u-app :where(button, input, select, textarea, .u-card, .u-btn) {
border-radius: 0;
box-shadow: none;
}
.u-tnum { font-variant-numeric: tabular-nums; }
/* ============================================================
2. Shell — rail lateral fixo
O rail é a linha de produção como espinha, numerada 1 a 7, e é ele que
responde "onde eu estou". Substitui a barra horizontal escura com dropdowns.
POR QUE `position: fixed` + irmão geral, e não um wrapper em grid:
o rail é um `{% include %}` no meio do `{% block body %}` de 47 templates.
Um wrapper exigiria abrir a
num partial e fechar noutro — e um grid de
duas colunas quebraria em toda tela que tem um terceiro filho no body (os