/* ===================================================================
A casca: a barra lateral (o nav vinho em coluna) e a barra de cima (o
caminho da página e a busca). Depende SÓ de tokens.css.
Arquivo próprio, e não um trecho do estilo.css, por causa do fiscal. Ele
carrega só os tokens porque o estilo.css colide com os componentes dele —
o `.nota` de lá é a linha da nota fiscal, e o daqui (max-width:78ch, fonte
de nota de rodapé) a esmagaria; o mesmo vale para `.cartao`, `.conteudo`,
`.marca` e para as regras de `button` e `input`. Com a barra dentro do
estilo.css, adotá-la no fiscal seria reescrever as doze telas dele.
Daí as duas regras deste arquivo, e há teste para as duas:
- todo seletor mora debaixo de `.lateral`, `.lateral-*` ou `.casca-*`.
Carregar esta folha num app não pode mudar nada fora da casca;
- nenhuma cor à mão. Sobre o vinho, o texto usa os `--texto-nav*` e o
ativo usa o `--fundo-nav-on`, que são hex compostos sobre
`--escuro-de` e medidos em test_contraste.py; o alfa que sobra é o dos
`--claro-*` em LINHA (hairline, borda de campo), que é como o `.topo`
já fazia.
A barra de cima mora aqui, e não no estilo.css, pelo mesmo motivo da
lateral: o fiscal não carrega o estilo.css, e a barra de cima é da casca,
não de uma tela.
O avatar e o Sair que aparecem aqui são os mesmos do `.topo`, com as
mesmas classes (`.avatar`, `.botao-sair`), redeclarados DENTRO da barra:
quem só carrega tokens + lateral (o fiscal) precisa deles desenhados, e a
marcação continua igual à do topo, para quem migra colar sem traduzir.
Uso (o HTML completo está no fim deste arquivo):
marca · menu(busca, nav, pé)
[
caminho · busca
]
…
=================================================================== */
/* ---------- a casca de duas colunas ----------
A barra tem largura fixa e o miolo fica com o resto. `minmax(0,1fr)` e não
`1fr`: com `1fr` a coluna não encolhe abaixo do conteúdo dela, e uma tabela
larga empurraria a página para o lado em vez de rolar dentro do cartão.
Quem rola é o DOCUMENTO, e a barra fica parada por `sticky`. A alternativa
(o miolo com `overflow:auto` e a página travada) parece igual e não é:
PageDown e espaço não rolam uma caixa interna antes de alguém clicar
nela, o `position:sticky` de dentro das telas (a coluna de ação do pedido
no RH) passa a grudar na caixa e não na janela, e o Voltar do navegador
não devolve a posição. */
.casca-lateral{display:grid;grid-template-columns:232px minmax(0,1fr);
min-height:100vh;flex:1 0 auto}
/* O miolo é coluna flexível para o rodapé descer até o pé da janela (o
`.conteudo` cresce, como no body do estilo.css). Daí o `width:100%` nos
filhos: em coluna flexível, margem automática ANULA o esticar, e o
`.conteudo` do fiscal (`max-width:1680px;margin:0 auto`) encolhia até a
largura do próprio texto. */
.lateral-miolo{min-width:0;display:flex;flex-direction:column}
.lateral-miolo>*{width:100%}
/* `` e não `