` das tabelas de dinheiro do mesmo cartão — só tokens que já existem, nenhuma cor
nova, nenhuma sombra. */
.cartao-bloco-titulo {
font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--muted); margin: 0 0 12px; text-align: left;
}
/* ⚠️ **2026-09-23 — "Impostos, frete e desconto" trocou barra por tabela** (brief "tabela e
alinhamento"): quinze linhas de barra horizontal eram gráfico de COMPARAÇÃO onde o contador só
queria CONFERIR o valor de cada linha. `table-layout:fixed` com a coluna de valor numa largura
fixa é a MESMA proporção 88px‑rótulo/104px‑valor que a barra já usava — a forma muda, a medida
não. */
.tabela-dinheiro { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.tabela-dinheiro th, .tabela-dinheiro td { padding: 8px 0; font-weight: 400; }
/* ⚠️ `text-align:left` só no `th` — `| ` centraliza por padrão do navegador, e sem isto o nome
do imposto nasceria centralizado. O ` | ` de valor já é `left` de fábrica; `.valor-dinheiro`
(mais específica que uma regra combinada `th, td` teria sido) é quem vira para a direita. */
.tabela-dinheiro th { text-align: left; }
.tabela-dinheiro td.valor-dinheiro { width: 104px; font-weight: 600; }
.tabela-dinheiro th[scope="row"] { color: var(--text2); font-weight: 500; word-break: break-word; }
.tabela-dinheiro tbody tr { border-bottom: 1px solid var(--border-soft); }
.tabela-dinheiro tbody tr:last-child { border-bottom: 0; }
.tabela-dinheiro tbody tr[data-lista-vazia] td { padding: 12px 0; }
/* A célula pequena embaixo do rótulo (código cru — `codigoSeDiferente`, js/painel.js — quando ele
difere do nome exibido). `display:block` para cair numa segunda linha dentro do mesmo ` | `. */
.lista-nota { display: block; font-size: 10px; color: var(--muted); line-height: 1.3; font-weight: 400; }
/* A espécie que NÃO entra no total de imposto devido — mesma marca de "impostosPorEspecie"
(a rosca), só que na LINHA inteira em vez da barra: sem barra para apagar, o tom apagado é o
texto. O rodapé do cartão, ligado por `aria-describedby` (painel.html/js/painel.js), diz por
extenso o que a cor sozinha não pode dizer para quem não distingue tom. */
.tabela-dinheiro tbody tr.linha-apagada th[scope="row"],
.tabela-dinheiro tbody tr.linha-apagada td { color: var(--muted); }
/* B — o DIFAL fica preso visualmente à espécie de que deriva, nunca à mesma altura das espécies
(a célula `nota` já diz "de ICMS..." em texto; isto soma a marca visual). Recuo + traço à
esquerda com o `--border` que a tela já usa em toda borda fina — sem cor nova.
⚠️ Aplicada a um ` |