/* Só para leitor de tela (escondido na tela, presente para a acessibilidade) */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body { font-family: system-ui, sans-serif; margin: 0; color: #1f2937; background: #f9fafb; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: .6rem 1rem; background: #1e3a5f; }
nav a, nav button { color: #fff; text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; }
nav .marca { font-weight: 700; margin-right: 1rem; }
/* Grupo do menu (<details>): abre e fecha sem JavaScript; a lista fica por cima da página */
nav details.menu-grupo { position: relative; color: #fff; }
nav details.menu-grupo > summary { cursor: pointer; }
nav details.menu-grupo > ul { position: absolute; z-index: 30; left: 0; top: 100%; margin: .4rem 0 0; padding: .3rem 0; min-width: 12rem; list-style: none; background: #1e3a5f; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
nav details.menu-grupo li a { display: block; padding: .35rem .9rem; white-space: nowrap; }
nav details.menu-grupo li a:hover, nav details.menu-grupo li a:focus { background: rgba(255, 255, 255, .12); }
/* Tela estreita: a lista aberta ocupa a largura do menu (presa ao <nav>), sem passar da borda da tela */
@media screen and (max-width: 40rem) {
  nav { position: relative; }
  nav details.menu-grupo { position: static; }
  nav details.menu-grupo > ul { left: 1rem; right: 1rem; min-width: 0; margin-top: 0; }
  nav details.menu-grupo li a { white-space: normal; }
}
main { max-width: 72rem; margin: 1.5rem auto; padding: 0 1rem; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border-bottom: 1px solid #e5e7eb; padding: .45rem .6rem; text-align: left; }
.msg { margin: 0; padding: .6rem 1rem; background: #e0f2fe; }
.msg.error { background: #fee2e2; }
.msg.success { background: #dcfce7; }
.msg.warning { background: #fef3c7; }
.qr svg { width: 12rem; height: 12rem; }
.inativa { opacity: .5; }
ul.arvore, ul.filhos { list-style: none; margin: 0; padding-left: 1.4rem; min-height: .8rem; }
.no { padding: .2rem 0; cursor: grab; }
.cor { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .4rem; }
/* Campos de escolha com busca (static/js/busca_select.js): o select original fica escondido só visualmente */
.busca-select { position: relative; display: inline-block; min-width: 10rem; max-width: 100%; vertical-align: middle; }
.busca-campo { box-sizing: border-box; width: 100%; font: inherit; padding: .2rem .4rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right .5rem center; padding-right: 1.6rem; text-overflow: ellipsis; }
.busca-lista { position: absolute; z-index: 20; left: 0; min-width: 100%; box-sizing: border-box; max-height: 16rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #9ca3af; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.busca-lista[hidden] { display: none; }
.busca-lista li { padding: .3rem .5rem; cursor: pointer; white-space: normal; }
.busca-lista li.ativa { background: #1e3a5f; color: #fff; }
.busca-lista li[aria-selected="true"]:not(.ativa) { background: #e0f2fe; }
.busca-lista li.desativada { color: #9ca3af; cursor: not-allowed; }
.busca-lista li.busca-aviso { color: #6b7280; cursor: default; font-style: italic; }
select.busca-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
/* Sugestões do "Emitente" das notas fiscais (static/js/emitente_sugestoes.js): a mesma lista dos campos de busca, presa
   ao campo de texto (que continua sendo o que o formulário envia); o CNPJ e a origem em letra menor, abaixo do nome */
.sugestoes-campo { position: relative; display: block; min-width: 0; }
.sugestoes-campo > input { box-sizing: border-box; width: 100%; }
.busca-lista .sugestao-detalhe { display: block; font-size: .8rem; color: #4b5563; overflow-wrap: anywhere; }
.busca-lista li.ativa .sugestao-detalhe { color: #e5e7eb; }
/* Conciliação: a transação já conciliada fica sombreada (a aparência completa vem na 5B) */
table.conciliacao tr.linha-conciliada td { background: rgba(30, 58, 95, .08); }
.abas { margin: .5rem 0; }
.abas strong { text-decoration: underline; }
/* Seleção múltipla em lista suspensa (static/js/selecao_multipla.js): o select original fica escondido só visualmente */
select.selecao-oculta { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.lista-marcar { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.lista-marcar-botao { box-sizing: border-box; min-width: 10rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: inherit; color: inherit; padding: .2rem 1.6rem .2rem .4rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right .5rem center; border: 1px solid #9ca3af; cursor: pointer; }
.lista-marcar-botao:disabled { color: #9ca3af; cursor: not-allowed; }
.lista-marcar-painel { position: absolute; z-index: 20; left: 0; box-sizing: border-box; min-width: 100%; width: max-content; max-width: min(30rem, 90vw); max-height: 16rem; overflow-y: auto; padding: .3rem 0; background: #fff; border: 1px solid #9ca3af; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.lista-marcar-painel[hidden] { display: none; }
.lista-marcar-painel:focus { outline: none; }
.lista-marcar-painel label { display: block; padding: .3rem .6rem; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.lista-marcar-painel label:hover, .lista-marcar-painel label:focus-within { background: #e0f2fe; }

/* Formulário do lançamento: bloco da classificação (5B) */
fieldset.classificacao { margin: 1rem 0; padding: .4rem 1rem; border: 1px solid #e5e7eb; background: #fff; }
fieldset.classificacao legend { font-weight: 700; padding: 0 .3rem; }
#prazo-medio { background: #f3f4f6; border: 1px solid #d1d5db; }

/* Botão "Copiar" (chave Pix e afins): confirmação visual por 2 s (5B) */
button.copiado { background: #dcfce7; border-color: #16a34a; }

/* Tarjas de valor (5B-1): saída vermelha e entrada azul com texto branco (contraste 6,5:1 e 6,7:1); na impressão,
   sem cor (economia de tinta e legibilidade) */
.tarja { display: inline-block; padding: .05rem .45rem; border-radius: .25rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarja-saida { background: #b91c1c; }
.tarja-entrada { background: #1d4ed8; }
@media print { .tarja { color: inherit; background: none; padding: 0; } }
/* Etapa 7: o negativo "-R$ 1.234,56" numa linha só (os filtros |brl/|saida o põem neste <span>; o JS, nos alvos
   abaixo): o "-" nunca fica no fim de uma linha com o "R$ ..." na seguinte */
.sem-quebra, #diferenca, #total-conciliar { white-space: nowrap; }
/* Conciliação (5B-6): resumo da transação em duas linhas e ações agrupadas */
table.conciliacao .resumo-linha1, table.conciliacao .resumo-linha2 { display: block; }
table.conciliacao .resumo-linha2 { color: #4b5563; margin-top: .15rem; }
table.conciliacao fieldset.opcoes { margin: .35rem 0; padding: .25rem .6rem; border: 1px solid #e5e7eb; }
table.conciliacao .acoes { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-top: .35rem; }
/* no celular os controles encolhem até a largura da célula e a descrição/sugestão quebram palavra longa (sem rolagem
   horizontal da página a 390px); a coluna Situação não quebra */
table.conciliacao select.acao, table.conciliacao td input:not([type="radio"]) { max-width: 100%; box-sizing: border-box; }
@media (max-width: 40rem) {
  table.conciliacao select.acao, table.conciliacao td input:not([type="radio"]) { width: 100%; }
  table.conciliacao .resumo-linha2, table.conciliacao fieldset.opcoes { overflow-wrap: anywhere; }
}
/* Faixa "DEMONSTRAÇÃO" (AMBIENTE_DEMO=1), no topo de toda página */
.faixa-demo { background: #b45309; color: #fff; text-align: center; font-weight: 700; padding: .35rem 1rem; letter-spacing: .02em; }
/* botões de período do painel de movimentação (links) */
.periodos { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .6rem 0; }
.periodos a { display: inline-block; padding: .2rem .65rem; border: 1px solid #9ca3af; border-radius: .25rem; background: #fff; color: #1e3a5f; text-decoration: none; }
.periodos a:hover, .periodos a:focus-visible { background: #e0f2fe; }
.periodos a[aria-current="true"] { background: #1e3a5f; border-color: #1e3a5f; color: #fff; font-weight: 700; }
/* seleção de colunas do Fluxo de caixa: a escolhida também tem a marca ✓ (o estado não fica só na cor) */
.fluxo-colunas a[aria-current="true"]::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
/* cartões de resumo do painel de movimentação (só mostram: não são links e não levam tarja) */
.cartoes-resumo ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .6rem 0 .2rem; padding: 0; }
.cartao-resumo { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 8rem; min-width: 0; padding: .45rem .7rem; border: 1px solid #cbd5e1; border-left: 4px solid #1e3a5f; border-radius: .25rem; background: #fff; }
.cartao-resumo .rotulo { font-size: .85rem; color: #374151; }
.cartao-resumo strong { font-size: 1.1rem; color: #111827; overflow-wrap: anywhere; }
.cartao-resumo .qtd { font-size: .8rem; color: #4b5563; }
.nota-cartoes { font-size: .8rem; color: #4b5563; margin: 0 0 .6rem; }
/* baixa em lote no painel: barra da seleção (fica no alto ao rolar a lista; sem JS mostra a instrução e o botão) */
.barra-lote { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .6rem 0; padding: .45rem .7rem; border: 1px solid #cbd5e1; border-left: 4px solid #1e3a5f; border-radius: .25rem; background: #f8fafc; }
.barra-lote .contador-lote { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.barra-lote .aviso-lote { flex-basis: 100%; color: #92400e; font-weight: 600; }
.barra-lote .aviso-lote[hidden] { display: none; }
/* barra de filtros do painel (15/10/2026): à vista busca, quadro "Filtros", período e empresas. O quadro é um <details>
   (abre sem JavaScript); aberto, flutua logo abaixo da barra, alinhado à esquerda dela (não passa da borda da tela).
   No celular ele entra no fluxo da página, na largura toda. */
.barra-filtros { position: relative; display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: .6rem 0; }
.barra-filtros .campo-busca { flex: 1 1 12rem; min-width: 0; }
/* Filtrar e Limpar ficam juntos (na mesma linha) */
.barra-filtros > .barra-acoes { display: inline-flex; align-items: center; gap: .75rem; white-space: nowrap; }
.barra-filtros .campo-busca input { box-sizing: border-box; width: 100%; }
/* rótulo e controle (De, Até, Empresas) nunca se separam na quebra de linha; a lista de empresas é irmã do <label>
   (o JS a põe logo depois dele), por isso os dois ficam num .campo-grupo */
.barra-filtros > label:not(.campo-busca), .barra-filtros > .campo-grupo { white-space: nowrap; max-width: 100%; }
.barra-filtros > .campo-grupo { position: relative; display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
/* a lista aberta se alinha ao começo do grupo (do rótulo), não ao botão: no celular cabe na tela */
.barra-filtros > .campo-grupo .lista-marcar { position: static; min-width: 0; }
/* botões dos quadros ("Filtros" e "Meus filtros") */
.quadro-filtro > summary, .quadro-meus > summary, .quadro-etiquetas > summary, .quadro-manifestar > summary { display: inline-block; list-style: none; cursor: pointer; padding: .2rem .65rem; border: 1px solid #9ca3af; border-radius: .25rem; background: #fff; color: #1e3a5f; font-weight: 600; white-space: nowrap; }
.quadro-filtro > summary::-webkit-details-marker, .quadro-meus > summary::-webkit-details-marker, .quadro-etiquetas > summary::-webkit-details-marker, .quadro-manifestar > summary::-webkit-details-marker { display: none; }
/* o triângulo é só desenho: texto alternativo vazio (o leitor de tela não o lê) */
.quadro-filtro > summary::after, .quadro-meus > summary::after { content: " \25BE"; content: " \25BE" / ""; }
.quadro-filtro > summary:hover, .quadro-meus > summary:hover, .quadro-etiquetas > summary:hover, .quadro-manifestar > summary:hover { background: #e0f2fe; }
.quadro-filtro > summary:focus-visible, .quadro-meus > summary:focus-visible, .quadro-etiquetas > summary:focus-visible, .quadro-manifestar > summary:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.quadro-filtro[open] > summary, .quadro-meus[open] > summary, .quadro-etiquetas[open] > summary, .quadro-manifestar[open] > summary { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.quadro-corpo, .meus-corpo { position: absolute; z-index: 25; top: calc(100% + .3rem); left: 0; box-sizing: border-box; width: min(48rem, 100%); padding: .8rem; background: #fff; border: 1px solid #9ca3af; border-radius: .25rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.quadro-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem .9rem; }
.quadro-campos label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; font-size: .9rem; }
.quadro-campos select:not(.busca-oculto):not(.selecao-oculta), .quadro-campos .busca-select { box-sizing: border-box; width: 100%; max-width: 100%; }
/* a lista suspensa de marcar (selecao_multipla.js) também na largura do campo, como os outros */
.quadro-campos .lista-marcar, .quadro-campos .lista-marcar-botao { display: block; width: 100%; }
.quadro-rodape { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid #e5e7eb; }
/* "Salvar como meus filtros", no pé do quadro "Filtros" */
.quadro-salvar { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #e5e7eb; font-size: .9rem; }
.quadro-salvar input { flex: 1 1 12rem; min-width: 0; max-width: 24rem; }
.quadro-salvar input[aria-invalid="true"] { border: 2px solid #b91c1c; }
.quadro-salvar .dica { flex-basis: 100%; margin: 0; color: #4b5563; font-size: .85rem; }
/* "Meus filtros": lista dos salvos (clique aplica) com Renomear e Apagar em cada um */
.meus-corpo { width: min(34rem, 100%); }
.meus-corpo > p { margin: 0; white-space: normal; }
.meus-lista { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.meus-lista li { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid #e5e7eb; }
.meus-lista li:last-child { border-bottom: 0; }
.meus-lista a { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.meus-lista a[aria-current="true"] { padding-left: .4rem; border-left: 4px solid #1e3a5f; }
.meus-acoes { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; min-width: 0; }
.meus-acoes input { width: 11rem; max-width: 100%; min-width: 0; font-size: .85rem; }
.meus-acoes button { font-size: .85rem; }
/* sem JavaScript nada fecha o outro quadro: com os dois abertos, eles descem para o fluxo, um abaixo do outro
   ("Filtros" em cima), em vez de flutuarem no mesmo ponto (um cobriria o outro) */
.barra-filtros:has(> .quadro-filtro[open]):has(> .quadro-meus[open]) > :is(.quadro-filtro, .quadro-meus) { flex-basis: 100%; }
.barra-filtros:has(> .quadro-filtro[open]):has(> .quadro-meus[open]) :is(.quadro-corpo, .meus-corpo) { position: static; width: auto; margin-top: .4rem; }
@media (max-width: 40rem) {
  .quadro-filtro[open], .quadro-meus[open] { flex-basis: 100%; }
  .quadro-corpo, .meus-corpo { position: static; width: auto; margin-top: .4rem; }
  .quadro-campos { grid-template-columns: 1fr; }
}
/* Relatório Fluxo de caixa (Etapa 8): a tabela rola dentro da caixa, com o cabeçalho (2 linhas) e a 1ª coluna fixos.
   Só as linhas visíveis vêm no HTML (o link de cada linha a abre/fecha por GET). O período atual e o Total são pintados
   pelo <colgroup> (as <td> não têm fundo próprio: a tarja amarelo claro aparece também nas linhas de subtotal e do
   Fechamento, sob o azul translúcido da linha); subtotal em azul claro e negrito; informativo em fonte menor; saída em
   vermelho (o sinal de menos está no texto). Classes curtas das células (formatacao.html_celula): i = início do
   regime, t = Total, n = negativo, a = AV%. */
/* barra do Fluxo de caixa (Tarefa 5): a do painel (.barra-filtros) com os grupos de links (regime, período, nível), os
   botões que alternam (Previsto, Mostrar centavos: aria-pressed, com a caixa ☐/☑ só de desenho) e Imprimir/Excel;
   tudo quebra linha e nada passa da largura da tela (380 px) */
.barra-fluxo > .periodos { margin: 0; gap: .25rem; }
.barra-fluxo .periodo-atual { padding: 0 .3rem; white-space: nowrap; }
.barra-fluxo .alternadores { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.alternador { padding: .2rem .65rem; border: 1px solid #9ca3af; border-radius: .25rem; background: #fff; color: #1e3a5f; font: inherit; cursor: pointer; }
.alternador::before { content: "\2610\00a0"; content: "\2610\00a0" / ""; }
.alternador[aria-pressed="true"] { background: #1e3a5f; border-color: #1e3a5f; color: #fff; font-weight: 700; }
.alternador[aria-pressed="true"]::before { content: "\2611\00a0"; content: "\2611\00a0" / ""; }
.alternador:hover { background: #e0f2fe; color: #1e3a5f; }
.alternador:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.barra-fluxo > .exportar { gap: .75rem; }
.avisos-relatorio { margin: .6rem 0; padding: .5rem 1rem .5rem 2rem; background: #fef3c7; border-left: 4px solid #b45309; }
.avisos-relatorio li { margin: .2rem 0; }
/* etapa 13 (item 5): a legenda "Fluxo de caixa, regime…" saiu da tela (só o leitor de tela a ouve; a impressão a mostra):
   a caixa da tabela ganhou a margem de cima que ela tinha */
.fluxo-rolagem { position: relative; overflow: auto; max-height: 75vh; margin: .6rem 0; border: 1px solid #cbd5e1; background: #fff; }
.fluxo-rolagem:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
table.fluxo { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; font-variant-numeric: tabular-nums; background: #fff; }
table.fluxo colgroup.corrente { background-color: #fef6c7; }
table.fluxo colgroup.total { background-color: #f8fafc; }
table.fluxo th, table.fluxo td { padding: .28rem .5rem; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
table.fluxo th { background-color: #fff; }
table.fluxo td { text-align: right; }
table.fluxo td.i { border-left: 1px solid #cbd5e1; }
table.fluxo td.t { font-weight: 600; }
table.fluxo td.n { color: #b91c1c; }
table.fluxo td.a { color: #4b5563; font-size: .8rem; }
table.fluxo td.a.n { color: #b91c1c; }
table.fluxo thead th { position: sticky; top: 0; z-index: 2; background-color: #f1f5f9; text-align: center; font-weight: 600; }
table.fluxo thead tr:first-child th { height: 2rem; box-sizing: border-box; }
table.fluxo thead tr:nth-child(2) th { top: 2rem; font-size: .8rem; }
table.fluxo thead th.inicio { border-left: 1px solid #cbd5e1; }
table.fluxo thead th.corrente { background-image: linear-gradient(rgba(250, 204, 21, .55), rgba(250, 204, 21, .55)); }
table.fluxo .col-nome { position: sticky; left: 0; z-index: 1; min-width: 15rem; max-width: 22rem; white-space: normal; text-align: left; font-weight: 400; box-shadow: inset -1px 0 0 #cbd5e1; }
table.fluxo thead th.col-nome { z-index: 3; font-weight: 600; }
/* a âncora do link de abrir/fechar não fica escondida sob o cabeçalho fixo */
table.fluxo tbody tr { scroll-margin-top: 4.5rem; }
table.fluxo tr.n1 > * { font-weight: 600; }
table.fluxo tr.n2 .col-nome { padding-left: 1.6rem; }
table.fluxo tr.n3 .col-nome { padding-left: 2.8rem; font-size: .84rem; }
/* etapa 13 (item 1): os blocos de nível 1 (Receita/Faturamento, Custos Variáveis, Despesas Fixas, Investimentos…, e o
   Sem classificação) numa faixa azul bem clara em toda a largura (todas as células: a 1ª coluna fixa, opaca, e o Total),
   o mesmo azul das totalizações (subtotais) em tom bem mais claro; o tipo continua no sinal (+ − ±, com o texto para o
   leitor de tela) e na classe t-<tipo>. Translúcida nas células de valor: a tarja do período atual aparece por baixo */
table.fluxo tr.t-bloco, table.fluxo tr.t-sistema { background-color: rgba(59, 130, 246, .07); }
table.fluxo tr.t-bloco > th, table.fluxo tr.t-sistema > th { background-color: #f2f7fe; }
table.fluxo tr.destaque { background-color: rgba(59, 130, 246, .16); }
table.fluxo tr.destaque > * { font-weight: 700; }
table.fluxo tr.destaque > th { background-color: #dbeafe; }
table.fluxo tr.t-informativo > * { font-size: .8rem; font-weight: 400; font-style: italic; color: #374151; }
table.fluxo tr.t-saldos { background-color: rgba(100, 116, 139, .18); }
table.fluxo tr.t-saldos > * { font-weight: 700; }
table.fluxo tr.t-saldos > th { background-color: #e2e8f0; }
table.fluxo tr.t-saldo.n2 > * { font-weight: 400; }
table.fluxo tr.t-saldo.destaque > * { font-weight: 700; }
/* etapa 13 (R2): no N3, as contas de 4 dígitos (o nível 2 do plano) em negrito, no nome e nos valores */
table.fluxo tr.negrito > * { font-weight: 700; }
table.fluxo th.col-nome[style] { box-shadow: inset 4px 0 0 var(--cor-linha), inset -1px 0 0 #cbd5e1; }
/* link de abrir/fechar, sinal e nome lado a lado: o nome quebra na "/" (<wbr>) ou entre palavras, nunca no meio de uma
   palavra, e o sinal nunca fica sozinho numa linha */
table.fluxo .rotulo-linha { display: flex; align-items: baseline; }
table.fluxo .rotulo-linha .nome { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
table.fluxo tbody tr:not(:has(a.alternar)) .rotulo-linha { padding-left: 1.2em; }
table.fluxo .sinal { flex: none; width: 1.1em; font-weight: 700; color: #1e3a5f; }
table.fluxo a.alternar { flex: none; width: 1.2em; color: #1e3a5f; text-decoration: none; }
table.fluxo a.alternar:hover { color: #1d4ed8; }
table.fluxo a.alternar:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
table.fluxo .atrasado { display: block; font-size: .72rem; font-weight: 600; color: #92400e; }
/* Etapa 11: percentuais e indicadores na mesma célula, no estilo da marca de atrasado (o sinal e o "acima/abaixo" por
   texto; a cor só reforça) */
table.fluxo .indicador { display: block; font-size: .72rem; font-weight: 600; font-style: normal; color: #475569; }
table.fluxo .indicador.n { color: #b91c1c; }
table.fluxo .marca-atrasado { display: inline-block; min-width: .9em; border-radius: 50%; background: #92400e; color: #fff; text-align: center; font-size: .65rem; }
.nota-fluxo { font-size: .82rem; color: #4b5563; }
.nota-fluxo p { margin: .3rem 0; }
@media (max-width: 40rem) {
  table.fluxo .col-nome { min-width: 10rem; max-width: 11rem; }
  table.fluxo tr.n2 .col-nome { padding-left: 1rem; }
  table.fluxo tr.n3 .col-nome { padding-left: 1.6rem; }
}
/* Etapa 11, Tarefa 4: página LARGA do Fluxo de caixa (<body class="pagina-larga">, só esta página e a impressão;
   toda regra daqui começa por body.pagina-larga e as outras telas ficam com o `main` de 72rem). A página usa toda a
   janela (margens mínimas) e as células ficam compactas para o ano inteiro (12 meses, colunas pela regra, AV%
   desligada) caber sem rolar na horizontal de 1.400 a 1.920 px (medido em docs/operacao.md); abaixo disso a tabela
   rola dentro da caixa, nunca a página. Os números usam algarismos de largura fixa (tabular) e não quebram (nowrap
   nas células: o "-" nunca se separa do número); só as linhas pequenas (atrasado, indicadores) quebram entre
   palavras, nunca no meio do número nem entre o "PE"/a seta e ele (.sem-quebra). */
body.pagina-larga main { max-width: none; margin: .6rem 0 1rem; padding: 0 .5rem; }
body.pagina-larga .titulo-fluxo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
body.pagina-larga .titulo-fluxo h1 { margin: .2rem 0 .4rem; font-size: 1.5rem; }
body.pagina-larga .fluxo-colunas .rotulo-grupo { padding: 0 .2rem; font-size: .9rem; color: #374151; }
body.pagina-larga table.fluxo { font-size: .75rem; }
body.pagina-larga table.fluxo th, body.pagina-larga table.fluxo td { padding: .2rem .18rem; }
body.pagina-larga table.fluxo thead tr:first-child th { height: 1.6rem; }
body.pagina-larga table.fluxo thead tr:nth-child(2) th { top: 1.6rem; font-size: .7rem; }
body.pagina-larga table.fluxo tbody tr { scroll-margin-top: 3.6rem; }
body.pagina-larga table.fluxo .col-nome { min-width: 8rem; max-width: 12rem; font-size: .78rem; }
body.pagina-larga table.fluxo tr.n2 .col-nome { padding-left: 1rem; }
body.pagina-larga table.fluxo tr.n3 .col-nome { padding-left: 1.6rem; font-size: .74rem; }
body.pagina-larga table.fluxo tr.t-informativo > * { font-size: .7rem; }
body.pagina-larga table.fluxo td.a { font-size: .68rem; }
body.pagina-larga table.fluxo .atrasado, body.pagina-larga table.fluxo .indicador { font-size: .66rem; white-space: normal; }
/* os títulos das sub-colunas abreviados (data-curto: "Real.", "Conf."; "Confirmado" inteiro era a coluna mais
   larga; abreviados em qualquer largura): o texto inteiro fica para o leitor de tela, recortado; a nota "Como ler"
   explica. Janela de 1.800 px ou mais: letra um pouco maior, também a das linhas pequenas (revisão da T4) */
body.pagina-larga table.fluxo thead th.sub[data-curto] > .rotulo-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.pagina-larga table.fluxo thead th.sub[data-curto]::before { content: attr(data-curto); content: attr(data-curto) / ""; }
@media (min-width: 112.5rem) {
  body.pagina-larga table.fluxo { font-size: .8rem; }
  body.pagina-larga table.fluxo .col-nome { font-size: .84rem; }
  body.pagina-larga table.fluxo .atrasado, body.pagina-larga table.fluxo .indicador { font-size: .7rem; }
}
/* tela cheia (tela_cheia=1): o servidor não desenha o menu; o link para sair fica à vista, ao lado do título */
body.pagina-larga.tela-cheia main { margin-top: .3rem; }
body.pagina-larga .sair-tela-cheia { display: inline-block; padding: .2rem .7rem; border: 1px solid #1e3a5f; border-radius: .25rem; background: #1e3a5f; color: #fff; font-weight: 700; text-decoration: none; }
body.pagina-larga .sair-tela-cheia:hover { background: #fff; color: #1e3a5f; }
body.pagina-larga .sair-tela-cheia:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
body.pagina-larga .dica-tela-cheia { font-size: .85rem; color: #4b5563; }
/* na tela cheia a caixa da tabela vai até o pé da JANELA, nunca além (revisão da T4: a barra de rolagem horizontal
   da caixa fica à vista ao abrir): a página vira uma coluna da altura da janela e a caixa fica com o que sobra abaixo
   da barra (no mínimo 15rem, nunca mais alta que a tabela); a nota "Como ler" vem logo abaixo, rolando a página */
body.pagina-larga.tela-cheia { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body.pagina-larga.tela-cheia > *, body.pagina-larga.tela-cheia main > * { flex: none; }
body.pagina-larga.tela-cheia main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.pagina-larga.tela-cheia .fluxo-rolagem { flex: 0 1 auto; min-height: 15rem; max-height: none; }
body.pagina-larga.tela-cheia .nota-fluxo { height: 0; }
@media (max-width: 40rem) {
  body.pagina-larga main { padding: 0 .4rem; }
  body.pagina-larga table.fluxo .col-nome { min-width: 8rem; max-width: 9.5rem; }
}

/* Estrutura do Fluxo de caixa (configuração, Etapa 8): cartões por linha, formulários sem JavaScript */
.estrutura-intro { max-width: 60rem; }
.estrutura-avisos .msg { margin: .3rem 0; }
.estrutura-avisos .aviso-sem-bloco { background: #fef3c7; }
.estrutura-linhas { list-style: none; margin: 0; padding: 0; }
.estrutura-linha { margin: 0 0 .5rem; padding: .5rem .75rem; background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid var(--cor-linha, #cbd5e1); }
.estrutura-linha.t-subtotal { background: #eff6ff; }
.estrutura-linha.t-informativo .linha-nome { font-style: italic; }
.estrutura-linha.inativa { opacity: .7; }
.estrutura-linha.sistema { background: #f1f5f9; }
.estrutura-linha .linha-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.estrutura-linha .sinal { font-weight: 700; color: #1e3a5f; min-width: 1.6em; }
.estrutura-linha .linha-pos { color: #4b5563; min-width: 1.6em; }
.estrutura-linha .linha-nome { overflow-wrap: anywhere; }
.estrutura-linha .linha-info { margin: .25rem 0; font-size: .9rem; color: #374151; overflow-wrap: anywhere; }
.etiqueta { display: inline-block; padding: 0 .4rem; border-radius: .6rem; background: #e5e7eb; font-size: .78rem; }
.etiqueta.funcao { background: #dbeafe; }
.etiqueta.desativada { background: #fee2e2; }
.linha-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.linha-acoes form { margin: 0; }
.linha-quadro { margin: .3rem 0; }
.linha-quadro > summary { cursor: pointer; color: #1e3a5f; }
.linha-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; margin: .4rem 0; }
.linha-form label { display: flex; flex-direction: column; gap: .15rem; max-width: 100%; }
.linha-form label.marcar { flex-direction: row; align-items: center; gap: .4rem; }
.linha-form input:not([type="checkbox"]), .linha-form select:not(.busca-oculto) { max-width: 100%; box-sizing: border-box; }
.linha-form fieldset { flex-basis: 100%; margin: 0; padding: .3rem .6rem; border: 1px solid #e5e7eb; display: flex; flex-wrap: wrap; gap: .4rem 1rem; min-width: 0; }
.linha-form fieldset legend { overflow-wrap: anywhere; }
.formula-item { min-width: 12rem; }
.estrutura-contas { list-style: none; margin: .5rem 0; padding: 0; background: #fff; border: 1px solid #e5e7eb; }
.estrutura-contas .conta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; padding: .3rem .6rem .3rem calc(.6rem + (var(--nivel, 1) - 1) * 1.1rem); border-bottom: 1px solid #f1f5f9; }
.estrutura-contas .conta.sem-bloco { background: #fef3c7; box-shadow: inset 4px 0 0 #d97706; }
.estrutura-contas .conta-nome { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.estrutura-contas .codigo { color: #4b5563; font-variant-numeric: tabular-nums; }
.estrutura-contas .conta-efeito { font-size: .85rem; color: #4b5563; }
.estrutura-contas select:not(.busca-oculto) { max-width: 100%; }
.sem-bloco-legenda { padding: 0 .3rem; background: #fef3c7; box-shadow: inset 4px 0 0 #d97706; }
@media screen and (max-width: 40rem) {
  .estrutura-contas .conta { padding-left: calc(.4rem + (var(--nivel, 1) - 1) * .5rem); }
  .estrutura-contas select:not(.busca-oculto), .linha-form select:not(.busca-oculto), .linha-form input:not([type="checkbox"]) { width: 100%; }
  .linha-form label { flex: 1 1 100%; }
}
.estrutura-linha .dica, #nova .dica, #linhas > .dica { margin: .2rem 0; font-size: .85rem; color: #4b5563; }
/* Tipos de operação (Etapa 2 das notas fiscais): os mesmos cartões da estrutura do Fluxo de caixa */
.tipo-operacao h3.linha-nome { margin: 0; font-size: 1.05rem; }
.tipo-operacao .cfop { font-variant-numeric: tabular-nums; }
#tipos > .dica, #novo .dica { margin: .2rem 0; font-size: .85rem; color: #4b5563; }
/* Padrões de classificação do fornecedor (Etapa 2 das notas fiscais): rótulo e valor; em tela estreita, um embaixo do outro */
.padrao-classificacao h3.linha-nome { margin: 0; font-size: 1.05rem; }
.padrao-campos { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: .4rem 0; font-size: .92rem; }
.padrao-campos dt { color: #4b5563; }
.padrao-campos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .padrao-campos { grid-template-columns: 1fr; } .padrao-campos dd { margin-bottom: .3rem; } }
/* Tela única de baixa (Etapa 12): uma parcela por <tbody> — a linha de leitura (vencimento, título, fornecedor,
   descrição, empresa, saldo, "Sai do banco") e, logo abaixo, os campos editáveis lado a lado (quebram linha). No
   celular cada parcela vira um cartão: as células empilham com o nome da coluna (data-rotulo) e os campos ocupam a
   largura toda; nada passa da largura da tela (380 px) */
.cabecalho-baixa { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; align-items: flex-end; }
.cabecalho-baixa p { margin: .4rem 0; max-width: 100%; }
.cabecalho-baixa label { display: block; font-weight: 600; }
.cabecalho-baixa select:not(.busca-oculto) { max-width: 100%; }
table.tabela-baixa tbody.linha-baixa { border-top: 2px solid #cbd5e1; }
table.tabela-baixa tr.leitura td { border-bottom: 0; }
table.tabela-baixa tbody.com-erro { background: #fef2f2; box-shadow: inset 4px 0 0 #b91c1c; }
table.tabela-baixa td[data-rotulo="Saldo"], table.tabela-baixa td[data-rotulo="Sai do banco"], table.tabela-baixa tfoot td { white-space: nowrap; }
.campos-baixa { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: flex-end; }
.campos-baixa label { display: flex; flex: none; flex-direction: column; gap: .15rem; font-size: .88rem; max-width: 100%; min-width: 0; }
.campos-baixa input[data-campo] { width: 6.5rem; box-sizing: border-box; max-width: 100%; }
.campos-baixa select:not(.busca-oculto) { width: 9rem; max-width: 100%; box-sizing: border-box; }
.campos-baixa .busca-select { min-width: 0; width: 13rem; max-width: 100%; }
.campos-baixa select[data-busca]:not(.busca-oculto) { width: 13rem; }
.campos-baixa .conta-linha { display: flex; flex: none; flex-direction: column; gap: .15rem; font-size: .88rem; width: 13rem; max-width: 100%; min-width: 0; }
.campos-baixa .conta-escolhida { padding: .15rem 0; color: #374151; overflow-wrap: anywhere; }
.erro-linha { margin: 0 0 .4rem; color: #991b1b; }
/* Etapa 3C, T3: NF-e cancelada na SEFAZ (aviso em texto, nunca só cor) — na linha da baixa, no detalhe e nas listas */
.aviso-nfe-cancelada { margin: 0 0 .5rem; padding: .4rem .6rem; border: 2px solid #991b1b; border-radius: .25rem; background: #fef2f2; color: #7f1d1d; }
.aviso-nfe-cancelada p { margin: 0 0 .3rem; }
.aviso-nfe-cancelada .ciencia-nfe { display: flex; gap: .4rem; align-items: flex-start; font-weight: 600; overflow-wrap: anywhere; }
.aviso-nfe-cancelada .ciencia-nfe input { flex: none; width: 1.15rem; height: 1.15rem; margin: .1rem 0 0; }
.faixa-nfe-cancelada { margin: .6rem 0; padding: .6rem .8rem; border: 2px solid #991b1b; border-left-width: .5rem; border-radius: .25rem; background: #fef2f2; color: #7f1d1d; overflow-wrap: anywhere; }
.acoes-baixa { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.acoes-baixa button.secundario { background: #fff; }
@media (max-width: 40rem) {
  table.tabela-baixa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.tabela-baixa, table.tabela-baixa tbody, table.tabela-baixa tfoot, table.tabela-baixa tr, table.tabela-baixa td,
  table.tabela-baixa th { display: block; }
  table.tabela-baixa tr.leitura td { display: flex; gap: .6rem; justify-content: space-between; padding: .15rem .6rem; }
  table.tabela-baixa tr.leitura td::before { content: attr(data-rotulo); flex: none; color: #4b5563; font-size: .85rem; text-align: left; }
  table.tabela-baixa tr.leitura td { overflow-wrap: anywhere; text-align: right; }
  .campos-baixa label, .campos-baixa .conta-linha, .campos-baixa input[data-campo], .campos-baixa select:not(.busca-oculto), .campos-baixa select[data-busca]:not(.busca-oculto),
  .campos-baixa .busca-select { width: 100%; max-width: 100%; }
  .cabecalho-baixa p, .cabecalho-baixa select:not(.busca-oculto), .cabecalho-baixa .busca-select { width: 100%; }
}
/* link com cara de botão (o "Baixar" do detalhe leva à tela única: é navegação, por isso um link) */
a.botao { display: inline-block; padding: .25rem .9rem; border: 1px solid #1e3a5f; border-radius: .25rem; background: #1e3a5f; color: #fff; font-weight: 600; text-decoration: none; }
a.botao:hover { background: #fff; color: #1e3a5f; }
a.botao:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
a.baixar-linha { margin-left: .3rem; font-size: .88rem; }
/* Conferência da confirmação em lote (Etapa 12, T3): uma linha por lançamento; no celular cada uma vira um cartão,
   como a tela da baixa (as células empilham com o nome da coluna, data-rotulo; nada passa de 380 px) */
table.tabela-conferencia td[data-rotulo="Valor"], table.tabela-conferencia tfoot td { white-space: nowrap; }
.acoes-conferencia { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .8rem 0; }
@media (max-width: 40rem) {
  table.tabela-conferencia thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.tabela-conferencia, table.tabela-conferencia tbody, table.tabela-conferencia tfoot, table.tabela-conferencia tr,
  table.tabela-conferencia td, table.tabela-conferencia th { display: block; }
  table.tabela-conferencia tbody tr { border-top: 2px solid #cbd5e1; }
  table.tabela-conferencia td { display: flex; gap: .6rem; justify-content: space-between; padding: .15rem .6rem;
    border-bottom: 0; overflow-wrap: anywhere; text-align: right; }
  table.tabela-conferencia td[data-rotulo]::before { content: attr(data-rotulo); flex: none; color: #4b5563; font-size: .85rem; text-align: left; }
}
/* Certificados digitais (notas fiscais): uma linha por empresa; a situação é texto (a cor só reforça). No celular
   cada empresa vira um cartão (as células empilham com o nome da coluna, data-rotulo; nada passa de 380 px) */
.situacao-certificado { font-weight: 600; }
.situacao-certificado.vigente { color: #166534; }
.situacao-certificado.a_vencer { color: #92400e; }
.situacao-certificado.vencido { color: #991b1b; }
.situacao-certificado.sem { color: #4b5563; }
table.tabela-certificados th[scope="row"] { font-weight: 600; }
table.tabela-certificados .cnpj-empresa { display: block; font-weight: 400; font-size: .85rem; color: #4b5563; }
table.tabela-certificados td, table.tabela-certificados th { overflow-wrap: break-word; vertical-align: top; }
.envio-certificado form { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: .4rem; }
.envio-certificado input[type="file"], .envio-certificado input[type="password"] { box-sizing: border-box; max-width: 100%; }
.envio-certificado summary { cursor: pointer; }
.envio-certificado .dica, .dica-certificados { font-size: .85rem; color: #4b5563; }
@media (max-width: 40rem) {
  table.tabela-certificados thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.tabela-certificados, table.tabela-certificados tbody, table.tabela-certificados tr,
  table.tabela-certificados td, table.tabela-certificados th { display: block; }
  table.tabela-certificados tbody tr { border-top: 2px solid #cbd5e1; padding: .3rem 0; }
  table.tabela-certificados td[data-rotulo], table.tabela-certificados th[data-rotulo] { display: flex; gap: .6rem;
    justify-content: space-between; padding: .15rem .6rem; border-bottom: 0; text-align: right; }
  table.tabela-certificados td[data-rotulo]::before, table.tabela-certificados th[data-rotulo]::before {
    content: attr(data-rotulo); flex: none; color: #4b5563; font-size: .85rem; font-weight: 400; text-align: left; }
  table.tabela-certificados th[data-rotulo] { flex-wrap: wrap; }
  .envio-certificado input[type="file"], .envio-certificado input[type="password"] { width: 100%; }
  .envio-certificado form { align-items: stretch; }
}
/* Notas fiscais: tela "Buscas de notas" (só administrador). Mesmo padrão da tela de certificados: no celular cada
   linha vira um cartão com o nome da coluna (data-rotulo); nada passa de 380 px. */
.proxima-busca { font-weight: 600; }
.proxima-busca.livre { color: #166534; }
.proxima-busca.aguardar { color: #92400e; }
.proxima-busca.bloqueada { color: #991b1b; }
table.tabela-buscas th[scope="row"] { font-weight: 600; }
table.tabela-buscas td, table.tabela-buscas th { overflow-wrap: break-word; vertical-align: top; }
.acao-busca form { margin: 0; }
/* NF-e e CT-e (Etapa 3D): uma linha por tipo dentro da célula, com o tipo em destaque */
.por-tipo > div + div { margin-top: .2rem; }
.tipo-busca { display: inline-block; min-width: 2.6rem; font-size: .78rem; font-weight: 700; color: #1e3a5f; }
.acao-busca .dica { font-size: .85rem; color: #4b5563; }
@media (max-width: 40rem) {
  table.tabela-buscas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.tabela-buscas, table.tabela-buscas tbody, table.tabela-buscas tr,
  table.tabela-buscas td, table.tabela-buscas th { display: block; }
  table.tabela-buscas tbody tr { border-top: 2px solid #cbd5e1; padding: .3rem 0; }
  table.tabela-buscas td[data-rotulo], table.tabela-buscas th[data-rotulo] { display: flex; gap: .6rem;
    justify-content: space-between; padding: .15rem .6rem; border-bottom: 0; text-align: right; }
  table.tabela-buscas td[data-rotulo]::before, table.tabela-buscas th[data-rotulo]::before {
    content: attr(data-rotulo); flex: none; color: #4b5563; font-size: .85rem; font-weight: 400; text-align: left; }
  .acao-busca { padding: .3rem .6rem; }
  .acao-busca button { width: 100%; }
}
/* Marca ao lado de um item do menu (contador de notas Novas; certificados a vencer em amarelo): é texto ("5 novas",
   "1 vencido"), a cor só reforça */
nav .marca-menu { display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: .7rem; background: #fff; color: #1e3a5f; font-size: .78rem; font-weight: 700; white-space: nowrap; }
nav .marca-menu.alerta { background: #fde68a; color: #78350f; }
/* Notas fiscais: lista e detalhe. A situação e a fase são texto (a cor só reforça); no celular cada nota vira um
   cartão com o nome da coluna (data-rotulo), como nas telas de certificados e buscas; nada passa de 380 px */
.dica-notas { max-width: 60rem; }
.situacao-nota { font-weight: 600; }
.situacao-nota.nova { color: #1d4ed8; }
.situacao-nota.lancada { color: #166534; }
.situacao-nota.nao_se_aplica { color: #4b5563; }
/* "Cancelada SEFAZ" / "Denegada SEFAZ": marca em texto (a cor e a borda só reforçam), na lista e no detalhe */
.marca-sefaz { display: inline-block; margin: .15rem 0 0; padding: 0 .4rem; border: 1px solid #991b1b; border-radius: .25rem; font-size: .82rem; font-weight: 700; color: #991b1b; background: #fef2f2; white-space: nowrap; }
.situacao-celula .marca-sefaz { display: table; }
.situacao-celula a { display: block; font-size: .85rem; }
/* as abas da lista (links; a ativa com aria-current: borda grossa e negrito, não só cor); quebram em linha no celular */
nav.abas-notas { display: block; padding: 0; background: none; }  /* não é o menu do topo */
.abas-notas ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0 .8rem; padding: 0; list-style: none; border-bottom: 1px solid #cbd5e1; }
.abas-notas a { display: inline-block; padding: .35rem .8rem; border: 1px solid #cbd5e1; border-bottom: 0; border-radius: .3rem .3rem 0 0; background: #f8fafc; color: #1e3a5f; text-decoration: none; }
.abas-notas a:hover, .abas-notas a:focus-visible { text-decoration: underline; }
.abas-notas a[aria-current="page"] { font-weight: 700; background: #fff; border-color: #1e3a5f; border-top-width: 4px; }
.abrir-nota { font-size: .8rem; font-weight: 400; text-decoration: underline; }
.total-notas { margin: .6rem 0; }
.total-notas .dica { font-size: .85rem; color: #4b5563; }
.rolagem-notas { position: relative; max-width: 100%; overflow-x: auto; }  /* relative: o texto só para leitor de tela (absoluto) das células também fica dentro da rolagem da tabela, não alarga a página */
/* caixa de rolagem das tabelas largas dos relatórios (Painel de movimentação, Entradas): em tela estreita a tabela rola
   aqui dentro, nunca a página (convenção da página larga, Etapa 3B) */
.rolagem-tabela { max-width: 100%; overflow-x: auto; }
.rolagem-tabela:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
/* Ctrl+P na própria tela (revisão da Tarefa 1 da 3B): no papel a caixa não rola, então não pode cortar a tabela */
@media print {
  .rolagem-tabela, .rolagem-notas { overflow: visible; max-width: none; max-height: none; }
  .rolagem-tabela table, .rolagem-notas table { font-size: 8pt; }
  .rolagem-tabela td, .rolagem-notas td { overflow-wrap: anywhere; }  /* palavra enorme quebra, não estica a tabela */
}
/* Painel de movimentação (pedido do dono, 26/10/2026): situação em negrito e colorida — o texto continua escrito, a
   cor só reforça (contraste >= 4,5:1 sobre o branco da tabela e o cinza da página, provado em
   contaspagar/tests/test_painel_ajustes.py); colunas Atraso e Forma de pagamento; ocultar a coluna Saldo */
body.pagina-larga .situacao { font-weight: 700; }
body.pagina-larga .situacao-confirmada { color: #166534; }
body.pagina-larga .situacao-a-confirmar { color: #b91c1c; }
body.pagina-larga .situacao-parcial { color: #92400e; }
body.pagina-larga .situacao-paga { color: #1d4ed8; }
body.pagina-larga .situacao-cancelada { color: #4b5563; }
body.pagina-larga table.tabela-painel td.col-atraso { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* valor de cada parcela: texto vermelho em negrito, sem fundo (27/10/2026: o fundo vermelho repetido em toda linha
   confundia; a tarja de fundo vermelho fica só no total do resumo do grupo). #b91c1c sobre branco: contraste 6,5:1 */
body.pagina-larga table.tabela-painel .valor-linha { color: #b91c1c; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* o título ("1888-1/1", o que a busca aceita) numa linha só: não quebra no "-" */
body.pagina-larga table.tabela-painel td.col-titulo a { white-space: nowrap; }
/* resumo EMBAIXO de cada grupo (desenho do dono, 26/10/2026): faixa cinza com borda de cima e de baixo (não depende só
   da cor), os números alinhados à direita sob as colunas Valor e Saldo, o sub-total acumulado à direita */
body.pagina-larga table.tabela-painel tr.resumo-grupo > th, body.pagina-larga table.tabela-painel tr.resumo-grupo > td {
  background: #e5e7eb; border-top: 1px solid #6b7280; border-bottom: 2px solid #6b7280; font-weight: 700; color: #111827; }
body.pagina-larga table.tabela-painel tr.resumo-grupo > th { text-align: left; }
body.pagina-larga table.tabela-painel tr.resumo-grupo > td { white-space: nowrap; }
body.pagina-larga table.tabela-painel td.resumo-qtd, body.pagina-larga table.tabela-painel td.resumo-acumulado { text-align: right; }
/* grupo cortado pela página: linha discreta (itálico, texto escrito) */
body.pagina-larga table.tabela-painel tr.grupo-continua > td, body.pagina-larga table.tabela-painel tr.grupo-continuacao > td {
  font-style: italic; font-size: .85rem; color: #4b5563; background: #f3f4f6; }
body.pagina-larga table.tabela-painel .alternar-saldo { margin-left: .3rem; font-size: .8rem; font-weight: 400; white-space: nowrap; }
body.pagina-larga table.tabela-painel .alternar-saldo[hidden] { display: none; }
body.pagina-larga table.tabela-painel.saldo-oculto .col-saldo { display: none; }
/* o texto só para leitor de tela (absoluto) dos cabeçalhos fica DENTRO da caixa que rola: sem isso ele escapa para a
   página e a faz rolar para o lado a 380 px (o mesmo cuidado do DANFE e da lista de notas) */
body.pagina-larga .rolagem-tabela { position: relative; }
/* Ctrl+P na própria tela: o link de ocultar/mostrar e o cartão "Ver" não servem no papel (e a tabela, com as colunas
   Atraso e Forma de pagamento, precisa caber na folha A4 em pé) */
@media print {
  body.pagina-larga table.tabela-painel .alternar-saldo, body.pagina-larga table.tabela-painel .col-cartao { display: none; }
  /* no papel o resumo do grupo pode quebrar a linha ("Sub-total acumulado" em cima do valor), sem negrito nos números
     e com menos espaço nas laterais: os totais (maiores que os valores das linhas) não alargam a tabela além do A4 em
     pé (o valor continua inteiro: o "-R$ 1.234,56" fica no <span class="sem-quebra">); a faixa e as bordas ficam */
  body.pagina-larga table.tabela-painel tr.resumo-grupo > td { white-space: normal; font-weight: 400; padding-left: .15rem; padding-right: .15rem; }
  body.pagina-larga table.tabela-painel td.resumo-qtd { overflow-wrap: normal; }  /* "02 / parcelas", nunca "parcela / s" */
}
table.tabela-notas td, table.tabela-notas th { overflow-wrap: break-word; vertical-align: top; }
table.tabela-notas th[scope="row"] { font-weight: 600; }
table.tabela-notas .num { text-align: right; white-space: nowrap; }
table.tabela-notas .documento { display: block; font-size: .82rem; color: #4b5563; }
.paginacao { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .8rem 0; }
@media (max-width: 40rem) {
  table.tabela-notas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.tabela-notas, table.tabela-notas tbody, table.tabela-notas tr,
  table.tabela-notas td, table.tabela-notas th { display: block; }
  table.tabela-notas tbody tr { border-top: 2px solid #cbd5e1; padding: .3rem 0; }
  table.tabela-notas td[data-rotulo], table.tabela-notas th[data-rotulo] { display: flex; gap: .6rem;
    justify-content: space-between; padding: .15rem .6rem; border-bottom: 0; text-align: right; }
  table.tabela-notas td[data-rotulo]::before, table.tabela-notas th[data-rotulo]::before {
    content: attr(data-rotulo); flex: none; color: #4b5563; font-size: .85rem; font-weight: 400; text-align: left; }
  table.tabela-notas td[data-rotulo] > *, table.tabela-notas th[data-rotulo] > * { min-width: 0; }
}
dl.dados-nota { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem 1.2rem; margin: 1rem 0; padding: .8rem 1rem; background: #fff; border: 1px solid #e5e7eb; }
dl.dados-nota > div { min-width: 0; }
dl.dados-nota dt { font-size: .85rem; color: #4b5563; }
dl.dados-nota dd { margin: .1rem 0 0; overflow-wrap: break-word; }
dl.dados-nota dd a { display: block; margin-top: .2rem; }
dl.dados-nota .chave { grid-column: 1 / -1; }
.chave-acesso { font-family: ui-monospace, monospace; overflow-wrap: anywhere; margin-right: .5rem; }
.form-situacao { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.form-situacao input[name="motivo"] { flex: 1 1 16rem; min-width: 0; max-width: 30rem; box-sizing: border-box; }
.historico-nota { padding-left: 1.4rem; }
.historico-nota li { margin: .25rem 0; overflow-wrap: break-word; }
/* "Lançar no contas a pagar" (lista e detalhe) e os alertas dos tipos de operação da nota (texto, não só cor) */
.form-lancar { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin: .3rem 0 0; }
.form-lancar .dica { font-size: .85rem; color: #4b5563; flex: 1 1 16rem; min-width: 0; }
dl.dados-nota + .form-lancar, .alertas-nota + .form-lancar { margin: 0 0 1rem; }
.aviso-cancelado, .motivo-sem-botao { display: block; font-size: .85rem; color: #92400e; overflow-wrap: break-word; }
/* o "(#N)" do aviso fica no texto corrido (os outros links da célula/do detalhe seguem em linha própria) */
.situacao-celula .aviso-cancelado a, dl.dados-nota dd .aviso-cancelado a { display: inline; margin-top: 0; font-size: inherit; }
.alertas-nota { margin: 1rem 0; padding: .6rem 1rem; background: #fffbeb; border: 1px solid #f59e0b; }
.alertas-nota ul { margin: 0; padding-left: 1.2rem; }
.alertas-nota li { overflow-wrap: break-word; }
.alertas-nota .dica { margin: .3rem 0 0; font-size: .85rem; color: #4b5563; }
/* Prévia da NF-e: o nome do arquivo e os textos quebram; em telas estreitas (celular e tablet) cada nota vira um
   cartão com o nome da coluna (data-rotulo), como na lista de notas fiscais; nada passa de 380 px */
/* o título leva o nome do arquivo: com uma nota só (o botão da nota fiscal) é NFe + a chave de 44 posições */
h1.titulo-arquivo { overflow-wrap: anywhere; }
/* a faixa do topo da prévia: "ainda não foi lançada" + o Confirmar importação (o mesmo botão do fim) */
.faixa-confirmar { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin: .6rem 0 .8rem; padding: .6rem .9rem; border: 1px solid #f59e0b; border-left: 6px solid #d97706; border-radius: .25rem; background: #fffbeb; }
.faixa-confirmar p { flex: 1 1 18rem; min-width: 0; margin: 0; overflow-wrap: break-word; }
.faixa-confirmar button { flex: none; font-weight: 700; }
/* o resultado de um lote criado pelo botão da nota: a volta para as notas fiscais, em destaque */
.voltar-notas { margin: .6rem 0 .8rem; padding: .6rem .9rem; border: 1px solid #93c5fd; border-left: 6px solid #1d4ed8; border-radius: .25rem; background: #eff6ff; }
.voltar-notas p { margin: 0; overflow-wrap: break-word; }
.voltar-notas a { font-weight: 700; }
table.previa-nfe > tbody > tr > td { vertical-align: top; overflow-wrap: anywhere; }
table.previa-nfe select { max-width: 100%; }
table.previa-nfe .alerta-tipo { display: inline-block; margin-top: .15rem; }
table.previa-nfe fieldset.salvar-padrao { margin: .4rem 0 0; padding: .2rem .6rem .4rem; }
/* 62rem (não 40rem): entre ~641 e ~969 px as 7 colunas com os campos da prévia ainda não cabem lado a lado */
@media (max-width: 62rem) {
  table.previa-nfe > tbody > tr.cabecalho { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.previa-nfe, table.previa-nfe > tbody, table.previa-nfe > tbody > tr, table.previa-nfe > tbody > tr > td { display: block; }
  table.previa-nfe > tbody > tr { border-top: 2px solid #cbd5e1; padding: .3rem 0; }
  table.previa-nfe > tbody > tr > td { border-bottom: 0; padding: .15rem .6rem; }
  table.previa-nfe > tbody > tr > td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; }
  table.previa-nfe > tbody > tr > td[data-rotulo="O que fazer"]::before { display: block; }
  table.previa-nfe select:not(.busca-oculto), table.previa-nfe input[type="text"], table.previa-nfe input[type="date"] { width: 100%; box-sizing: border-box; }
}
/* Etiquetas das notas (Etapa 3B): o chip leva o fundo e a cor do texto calculados no servidor (atributo style só com
   #rrggbb validado); a borda escura deixa o chip claro visível sobre o fundo branco; sigla em negrito + nome em texto */
.chip-etiqueta { display: inline-flex; align-items: baseline; gap: .3rem; max-width: 100%; padding: .05rem .5rem; border: 1px solid rgba(17, 24, 39, .45); border-radius: .75rem; font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
.chip-etiqueta strong { flex: none; font-weight: 700; white-space: nowrap; }
/* desativada: sem esmaecer (o chip manteria o contraste calculado só sem opacidade); a marca é o texto "desativada" */
.etiqueta-gestao.etiqueta-inativa { border-left-style: dashed; background: #f9fafb; }
.lista-etiquetas .linha-info code { font-size: .85rem; }
.contagem-etiquetas { font-size: .9rem; font-weight: 400; color: #4b5563; }
.form-etiqueta { margin: .4rem 0; }
.campos-etiqueta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; margin: 0 0 .5rem; }
.campo-etiqueta { display: flex; flex-direction: column; gap: .15rem; max-width: 100%; min-width: 0; }
.campo-etiqueta input, .campo-etiqueta select { max-width: 100%; box-sizing: border-box; }
.campo-nome input { width: 22rem; }
.campo-sigla input { text-transform: uppercase; }
.campo-cor .cor-com-seletor { display: flex; align-items: center; gap: .4rem; }
.campo-cor input[type="color"] { width: 2.6rem; height: 2rem; padding: 0; border: 1px solid #6b7280; background: none; cursor: pointer; }
.erro-campo { color: #991b1b; font-size: .85rem; font-weight: 600; max-width: 22rem; }
.previa-etiqueta { flex-basis: 100%; margin: .2rem 0 0; }
.erro-formulario { margin: .3rem 0; }
#automatica .linha-form { align-items: flex-end; }
#automatica select:not(.busca-oculto) { min-width: 14rem; }  /* o select escondido pela busca (aproximacao.js) fica com 1px */
@media (max-width: 40rem) {
  .campo-etiqueta, .campo-nome input, #automatica select:not(.busca-oculto) { width: 100%; min-width: 0; }
  .campo-etiqueta { flex: 1 1 100%; }
}
/* Etiquetas nas notas (Etapa 3B, Tarefa 3): chips na linha da lista, no detalhe e no DANFE; a barra de ações acima
   da lista (aparece com notas marcadas; sem JavaScript fica sempre à vista) e o painel "Etiquetas" (<details
   data-quadro>, o mesmo quadro flutuante do filtro; no celular entra no fluxo da página). */
/* inativa: a MESMA cor (nunca opacidade: o contraste calculado continua valendo); borda tracejada e "(inativa)" */
.chip-etiqueta.chip-inativa { border: 2px dashed #111827; }
.chip-etiqueta .marca-inativa { font-style: italic; font-size: .8em; }
.chips-etiquetas { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; min-width: 0; }
.chips-etiquetas .chip-etiqueta { font-size: .78rem; }
.mais-etiquetas { font-size: .82rem; font-weight: 700; white-space: nowrap; }
table.tabela-notas td.etiquetas-celula { min-width: 9rem; max-width: 22rem; }
table.tabela-notas .col-selecao { width: 1.6rem; text-align: center; }
table.tabela-notas .col-selecao input { width: 1.1rem; height: 1.1rem; margin: .1rem 0; cursor: pointer; }
.barra-etiquetas { position: relative; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.barra-selecao { position: sticky; top: 0; z-index: 20; margin: .6rem 0 .4rem; padding: .45rem .7rem; border: 1px solid #cbd5e1; border-left: 4px solid #1e3a5f; border-radius: .25rem; background: #f8fafc; }
.barra-selecao[hidden] { display: none; }
.barra-selecao .contador-selecao { flex: 0 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.selecao-pagina { margin: .3rem 0; }
.selecao-pagina[hidden] { display: none; }
.selecao-pagina input, .tri-etiqueta input { width: 1.1rem; height: 1.1rem; vertical-align: middle; cursor: pointer; }
.corpo-etiquetas { width: min(34rem, 100%); }
.corpo-etiquetas > .dica { margin: 0 0 .5rem; font-size: .85rem; color: #4b5563; white-space: normal; }
.busca-etiqueta { display: flex; flex-direction: column; gap: .2rem; margin: 0 0 .5rem; font-size: .9rem; }
.busca-etiqueta[hidden] { display: none; }
.busca-etiqueta input { box-sizing: border-box; width: 100%; }
.etiquetas-painel { margin: 0; padding: 0; border: 0; min-width: 0; }
.lista-etiquetas-painel { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto; }
.lista-etiquetas-painel li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; padding: .35rem .1rem; border-bottom: 1px solid #e5e7eb; }
.lista-etiquetas-painel li[hidden] { display: none; }
.lista-etiquetas-painel li:last-child { border-bottom: 0; }
.acoes-etiqueta { display: inline-flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .88rem; }
.acoes-etiqueta[hidden] { display: none; }
.tri-etiqueta { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; cursor: pointer; }
.tri-etiqueta input:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.estado-etiqueta { font-size: .8rem; color: #4b5563; }
.aviso-painel { margin: .5rem 0 0; color: #92400e; font-weight: 600; font-size: .9rem; }
.aviso-painel:empty { display: none; }
/* numa nota (detalhe e DANFE) o quadro flutua sob a linha inteira das etiquetas, não só sob o botão */
.etiquetas-nota { position: relative; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin: .4rem 0 .8rem; }
.etiquetas-nota .barra-etiquetas { position: static; }
/* o ▾ do botão "Etiquetas" é desenho: texto alternativo vazio (o leitor de tela lê só "Etiquetas") */
.quadro-etiquetas > summary::after { content: " \25BE"; content: " \25BE" / ""; }
.etiquetas-nota .rotulo-etiquetas { font-weight: 600; }
.etiquetas-nota .chips-etiquetas .chip-etiqueta { font-size: .85rem; }
@media (max-width: 40rem) {
  .corpo-etiquetas { width: auto; }
  .barra-selecao { position: static; }
  table.tabela-notas td.etiquetas-celula { max-width: none; min-width: 0; }
  table.tabela-notas .col-selecao { width: auto; text-align: right; }
  table.tabela-notas .chips-etiquetas { justify-content: flex-end; }
}
/* manifestação do destinatário (Etapa 3C, Tarefa 2): o botão "Manifestar", a página de confirmação, o estado e o
   prazo (o destaque também está no texto: "Atenção:" e "vencido") */
.quadro-manifestar > summary::after { content: " \25BE"; content: " \25BE" / ""; }
.barra-manifestar { position: relative; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin: .4rem 0 .8rem; }
.corpo-manifestar { width: min(26rem, 100%); }
.corpo-manifestar > .dica { margin: 0 0 .5rem; font-size: .85rem; color: #4b5563; white-space: normal; }
.opcoes-manifestar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.opcoes-manifestar button, .opcoes-manifestar a { display: block; box-sizing: border-box; width: 100%; padding: .35rem .6rem; text-align: left; }
.manifestacao-nota { font-weight: 600; }
.manifestacao-nota.rejeitada, .manifestacao-nota.pendente { color: #92400e; }
.prazo-manifestacao { display: block; font-size: .85rem; color: #374151; }
.prazo-manifestacao.poucos { color: #92400e; font-weight: 700; }
.prazo-manifestacao.vencido { color: #991b1b; font-weight: 700; }
.aviso-irreversivel { margin: .8rem 0; padding: .6rem 1rem; border: 1px solid #1e3a5f; border-left: 6px solid #1e3a5f; background: #f8fafc; }
.aviso-fraude { margin: .8rem 0; padding: .6rem 1rem; border: 1px solid #991b1b; border-left: 6px solid #991b1b; background: #fef2f2; color: #7f1d1d; }
.aviso-resumo { margin: .8rem 0; padding: .6rem 1rem; border: 1px solid #92400e; border-left: 6px solid #92400e; background: #fffbeb; color: #78350f; }
.aviso-irreversivel p, .aviso-fraude p, .aviso-resumo p { margin: .2rem 0; }
.marca-resumo { font-weight: 400; font-size: .85rem; color: #78350f; }
.marca-fraude { color: #991b1b; }
.form-manifestar { display: flex; flex-direction: column; gap: .4rem; max-width: 48rem; margin: 1rem 0; }
.form-manifestar textarea { box-sizing: border-box; width: 100%; font: inherit; }
.form-manifestar .dica { margin: 0; font-size: .85rem; color: #4b5563; }
.acoes-manifestar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.explicacao-manifestar { max-width: 60rem; }
.form-reenviar { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.form-reenviar p { margin: 0; flex: 1 1 20rem; min-width: 0; }
@media (max-width: 40rem) {
  .corpo-manifestar { width: auto; }
}
@media print {
  .barra-manifestar { display: none !important; }
}
@media print {
  .barra-etiquetas, .selecao-pagina, table.tabela-notas .col-selecao { display: none !important; }
  .chip-etiqueta { border: 1px solid #000; }
}
/* CT-e (Etapa 3D, Tarefa 2): o selo do tomador é TEXTO (a cor só reforça; nunca só cor); a ficha imprime em A4 */
.selo-tomador { font-weight: 600; }
.selo-tomador.sua { color: #166534; }
.selo-tomador.outra { color: #92400e; }
.selo-tomador.grupo { color: #1d4ed8; }
.selo-tomador.exterior, .selo-tomador.nao_informado { color: #4b5563; }
.tomador-celula { display: flex; flex-direction: column; min-width: 0; }
table.tabela-cte td[data-rotulo="Tomador"] { min-width: 10rem; max-width: 18rem; }
dl.dados-cte .tomador-ficha .dados-tomador { display: block; margin-top: .15rem; overflow-wrap: anywhere; }
.nfe-transportadas { padding-left: 1.4rem; }
.nfe-transportadas li { margin: .3rem 0; overflow-wrap: anywhere; }
.nfe-transportadas .documento { display: block; font-size: .82rem; color: #4b5563; }
.observacoes-cte { white-space: pre-line; overflow-wrap: anywhere; max-width: 70rem; }
.quadro-situacao-cte .corpo-manifestar label { display: block; margin-top: .3rem; }
.quadro-situacao-cte .corpo-manifestar input[name="motivo"] { box-sizing: border-box; width: 100%; max-width: 100%; }
@media (max-width: 40rem) {
  table.tabela-cte td[data-rotulo="Tomador"] { max-width: none; min-width: 0; }
  .tomador-celula { align-items: flex-end; text-align: right; }
}
@media print {
  body.pagina-larga.pagina-cte nav, body.pagina-larga.pagina-cte .faixa-demo, body.pagina-larga.pagina-cte > .msg, body.pagina-larga.pagina-cte .so-tela,
  body.pagina-larga.pagina-cte form, body.pagina-larga.pagina-cte .barra-etiquetas { display: none !important; }
  body.pagina-larga.pagina-cte main { margin: 0; padding: 0; }
  body.pagina-larga.pagina-cte h1 { font-size: 14pt; }
  body.pagina-larga.pagina-cte h2 { font-size: 11pt; margin: .6rem 0 .3rem; }
  body.pagina-larga.pagina-cte dl.dados-nota { border: 1px solid #000; font-size: 9pt; grid-template-columns: repeat(3, 1fr); }
  body.pagina-larga.pagina-cte .nfe-transportadas, body.pagina-larga.pagina-cte .historico-nota, body.pagina-larga.pagina-cte .observacoes-cte { font-size: 9pt; }
  body.pagina-larga.pagina-cte a { color: #000; text-decoration: none; }
}

/* Diagnóstico tributário: tela do faturamento (página larga). A situação sempre vem em TEXTO; a cor só reforça. */
body.pagina-larga .tabela-faturamento td.num { text-align: right; white-space: nowrap; }
body.pagina-larga .faixa { display: inline-block; padding: .1rem .5rem; border-radius: .25rem; font-weight: 600; }
body.pagina-larga .faixa-ok { background: #e3f4e6; color: #12501f; }
body.pagina-larga .faixa-aviso { background: #fff1c9; color: #5c4100; }
body.pagina-larga .faixa-alerta { background: #fde0e0; color: #7a1010; }
body.pagina-larga .faixa-neutro { background: #eceff3; color: #3a4350; }
body.pagina-larga .marca-sem-dado { font-style: italic; color: #3a4350; }
body.pagina-larga .tabela-antecipacao td.num { text-align: right; white-space: nowrap; }
body.pagina-larga .totais-antecipacao dd { margin: 0 0 .4rem 0; }
/* Simples (DAS): cada coluna com largura mínima legível; a 380 px a tabela rola dentro da .rolagem-tabela */
body.pagina-larga .tabela-simples th, body.pagina-larga .tabela-simples td { min-width: 5rem; vertical-align: top; }
body.pagina-larga .tabela-simples td:first-child, body.pagina-larga .tabela-simples th:first-child { min-width: 5.5rem; }
body.pagina-larga .tabela-simples td:nth-child(3), body.pagina-larga .tabela-simples td:nth-child(5) { min-width: 9.5rem; }
body.pagina-larga .tabela-simples td:last-child, body.pagina-larga .tabela-simples th:last-child { min-width: 13rem; }
/* aviso fixo do Diagnóstico tributário (faturamento, Simples): caixa com borda; texto marrom-escuro sobre creme
   (contraste ~9:1, acima de 4,5:1); o texto diz o mesmo sem a cor */
.aviso-fixo { margin: .6rem 0; padding: .5rem .8rem; border: 2px solid #92400e; border-left-width: .5rem; border-radius: .25rem; background: #fffbeb; color: #78350f; }
/* DRE gerencial (Diagnóstico tributário): valores à direita sem quebrar; a tabela rola dentro da .rolagem-tabela */
body.pagina-larga .tabela-dre th, body.pagina-larga .tabela-dre td { min-width: 6.5rem; white-space: nowrap; }
body.pagina-larga .tabela-dre td.num { text-align: right; }
body.pagina-larga .tabela-dre th:first-child, body.pagina-larga .tabela-dre td:first-child { min-width: 16rem; white-space: normal; text-align: left; }
body.pagina-larga .tabela-dre tr.dre-subtotal > *, body.pagina-larga .tabela-dre tr.dre-resultado > * { font-weight: 700; background: #eaf2fc; }
body.pagina-larga .tabela-dre tr.dre-item th { padding-left: 1.4rem; }
body.pagina-larga .tabela-dre tr.dre-bloco > * { font-weight: 700; background: #dbe8f7; }
body.pagina-larga .tabela-dre tr.dre-percentual > * { font-style: italic; }
body.pagina-larga .tabela-dre tr.dre-confianca > * { font-style: italic; }
/* Folha do mês (folha de pagamento): valores à direita sem quebrar; a tabela rola dentro da .rolagem-tabela; o selo
   do estado é TEXTO (a cor só reforça) */
body.pagina-larga .tabela-folha th, body.pagina-larga .tabela-folha td { white-space: nowrap; }
body.pagina-larga .tabela-folha td.num { text-align: right; }
body.pagina-larga .tabela-folha tbody th { text-align: left; font-weight: normal; }
body.pagina-larga .tabela-folha tr.folha-total > * { font-weight: 700; background: #eaf2fc; }
body.pagina-larga .selo { font-size: .85rem; font-weight: 600; padding: .1rem .5rem; border-radius: .25rem; border: 1px solid currentColor; vertical-align: middle; }
body.pagina-larga .selo-fechada { color: #166534; }
body.pagina-larga .selo-aberta { color: #92400e; }
body.pagina-larga .selo-vazia { color: #4b5563; }
body.pagina-larga .reabrir-mes { margin-bottom: 1rem; }
body.pagina-larga .reabrir-mes input[name="motivo"] { display: block; width: 100%; max-width: 32rem; box-sizing: border-box; margin-bottom: .4rem; }
/* Folha do mês: nome e setor quebram linha (largura limitada); a matrícula e o nome ficam fixos à esquerda quando a
   tabela rola dentro da caixa (só em tela larga: no celular as duas colunas fixas ocupariam a tela inteira) */
body.pagina-larga .tabela-folha td.col-fixa-2, body.pagina-larga .tabela-folha td.col-setor, body.pagina-larga .tabela-folha th.col-setor { white-space: normal; min-width: 10rem; max-width: 16rem; }
body.pagina-larga .tabela-folha td.col-fixa-2 { min-width: 15rem; }
@media (min-width: 900px) {
  body.pagina-larga .tabela-folha .col-fixa-1, body.pagina-larga .tabela-folha .col-fixa-2 { position: sticky; background: #fff; z-index: 1; }
  body.pagina-larga .tabela-folha .col-fixa-1 { left: 0; min-width: 5.5rem; max-width: 5.5rem; }
  body.pagina-larga .tabela-folha .col-fixa-2 { left: 5.5rem; }
  body.pagina-larga .tabela-folha tr.folha-total > .col-fixa-1, body.pagina-larga .tabela-folha tr.folha-total > .col-fixa-2 { background: #eaf2fc; }
}
/* Provisões (folha, Etapa 3A): o mês detalhado fica em negrito com uma barra à esquerda (não só a cor) */
body.pagina-larga .tabela-provisao tr.provisao-escolhido > * { font-weight: 700; background: #fffbeb; }
body.pagina-larga .tabela-provisao tr.provisao-escolhido > th { box-shadow: inset .3rem 0 0 #92400e; }