/* As telas de Escrituração e Integrações. Cascata: por último. */

/* ---------------- Despesas ---------------- */

.nota {
  font-size: 0.8rem; color: var(--tinta-fraca); margin: 0.3rem 0 1rem;
  max-width: 70ch; line-height: 1.5;
}
/* "Não há nada a fazer" também é resposta, e merece ser lida como boa
   notícia em vez de parecer tela que não carregou. */
.nota-ok {
  font-size: 0.85rem; color: var(--verde-selo); max-width: 70ch;
  background: var(--papel); border: 1px solid var(--pauta-forte);
  border-left: 3px solid var(--verde-selo);
  border-radius: 3px; padding: 0.7rem 0.9rem; margin: 0.6rem 0 1rem;
}

/* Espelho: a ação primeiro, o estado ao lado dela. É o gesto mais
   repetido da tela — várias vezes por dia —, então ele encabeça a
   seção, e o estado cabe numa linha em vez de três avisos. */
.espelho-barra {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.9rem; margin: 0.8rem 0;
}
.espelho-resumo {
  font-size: 0.85rem; color: var(--tinta-suave);
  display: flex; align-items: center; gap: 0.4rem;
}
.espelho-resumo-ok { color: var(--verde-selo); }
.espelho-resumo-pendente { color: var(--tinta); }

/* A abrangência é calibragem de instalação: fica recolhida, com o
   escopo à mostra no próprio rótulo. */
.espelho-config { margin: 1rem 0; max-width: 70ch; }
.espelho-config > summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 600;
  color: var(--tinta-suave); padding: 0.2rem 0;
}
.espelho-config > summary:hover { color: var(--carmim); }
.espelho-config .nota { margin-bottom: 0.2rem; }

/* CRC-Nacional: a caixa que recebe o arquivo da sessão, e a captura. */
.crc-solta {
  border: 2px dashed var(--pauta-forte); border-radius: 4px;
  padding: 0.8rem 1rem; margin: 0.4rem 0 0.8rem; max-width: 70ch;
  font-size: 0.85rem; color: var(--tinta-suave);
}
.crc-solta-sobre { border-color: var(--carmim); background: var(--papel-linha); }
.crc-solta-escolher { color: var(--carmim); cursor: pointer; text-decoration: underline; }
.crc-captura .crc-papel { font-size: 0.85rem; margin-right: 0.4rem; }
/* A credencial do IdRC e, recolhida, a reserva do arquivo de sessão. */
.crc-credencial[hidden] { display: none; }
.crc-reserva { margin: 0.2rem 0 0.6rem; font-size: 0.85rem; color: var(--tinta-suave); }
.crc-reserva summary { cursor: pointer; }
/* A conferência de valores: a faixa do resumo, os filtros e a tabela.
   Perda em carmim (o que a serventia deixou de receber), excesso em
   âmbar; a linha casada pela folga das datas pede conferência. */
.crc-valores-resumo { margin: 0.4rem 0 0.6rem; font-size: 0.95rem; }
.crc-perda { color: var(--perigo); font-weight: 600; }
.crc-excesso { color: var(--alerta); font-weight: 600; }
.crc-ok { color: var(--verde-selo); }
.crc-folga { font-size: 0.75rem; color: var(--alerta); }
.crc-filtros { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.5rem 0; }
/* No tom dos atalhos de período: moldura clara, o ativo em carmim. */
.crc-filtro {
  background: var(--papel); border: 1px solid var(--pauta-forte);
  border-radius: 3px; padding: 0.35rem 0.7rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; color: var(--tinta-suave);
}
.crc-filtro:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.crc-filtro.ativo { background: var(--carmim); border-color: var(--carmim); color: var(--sobre-acento); }
.crc-filtro-n { font-family: var(--mono); font-size: 0.75rem; margin-left: 0.2rem; opacity: 0.8; }
.crc-valores td .cortar {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3; max-width: 30ch;
}
@media (min-width: 1400px) { .crc-valores td .cortar { max-width: 42ch; } }
.crc-valores td { vertical-align: top; }
/* As NFS-e (despesas-nfse.js): a tabela das notas veste a da conferência
   do CRC; a nota cancelada ou substituída fica esmaecida (está fora da
   soma), e a situação diz em que cor está. O prazo do certificado acende
   em âmbar no último mês e no tom de erro depois de vencido. */
.nfse-notas tr.nfse-fora td { color: var(--tinta-fraca); }
.nfse-cancelada, .nfse-vencido { color: var(--perigo); font-weight: 600; }
.nfse-substituida, .nfse-vence-logo { color: var(--alerta); font-weight: 600; }
/* O display: flex do .espelho-inicio venceria o [hidden] — o mesmo
   cuidado do .crc-credencial: com certificado gravado, o formulário só
   aparece no "Trocar". */
.nfse-certificado[hidden] { display: none; }
/* A conferência com os selos: o estado do dia na cor do que ele diz, a
   linha do detalhe aberta logo abaixo do dia, e o casamento de cada nota. */
.nfse-dia-diverge, .nfse-dia-sem_notas, .nfse-dia-sem_selos,
.nfse-casamento-diverge { color: var(--perigo); font-weight: 600; }
.nfse-dia-incompleto { color: var(--alerta); font-weight: 600; }
.nfse-dia-a_emitir { color: var(--tinta-suave); }
.nfse-dia-confere, .nfse-casamento-confere { color: var(--verde-selo); }
.nfse-casamento-sem_parte, .nfse-casamento-fora { color: var(--tinta-fraca); }
.nfse-conferencia tr.nfse-dia-detalhe > td { background: var(--papel); padding: 0.6rem 0.8rem; }
.nfse-dia-por-dentro table { margin-bottom: 0.6rem; }
.nfse-pessoas { margin: 0.8rem 0; font-size: 0.9rem; }
.nfse-pessoas summary { cursor: pointer; color: var(--tinta-suave); }
/* As tomadas a decidir: um grupo por provável, recolhível, com as duas
   decisões no pé — a exclusão no tom do erro, porque apaga o conteúdo. */
.nfse-tomadas-bloco { margin: 0.4rem 0 1rem; }
.nfse-paginas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  margin: 0.4rem 0; font-size: 0.85rem; color: var(--tinta-suave);
}
.nfse-tomada-vincular { font-size: 0.8rem; color: var(--tinta-suave); white-space: nowrap; }
.nfse-do-lancamento { margin: 0.6rem 0; padding: 0.5rem 0.7rem; border: 1px solid var(--pauta);
  border-radius: 4px; font-size: 0.85rem; }
.nfse-do-lancamento ul { margin: 0.3rem 0; padding-left: 1.1rem; }
.nfse-lanc-titulo { font-weight: 600; margin-bottom: 0.2rem; }
.nfse-lanc-nota { font-family: var(--mono); }
.nfse-do-lancamento[hidden] { display: none; }
.nfse-paginas input.nfse-pagina { width: 4.5em; text-align: right; }
.nfse-paginas .link-acao[disabled] { color: var(--tinta-fraca); cursor: default; text-decoration: none; }
.nfse-tomadas-grupo { margin: 0.4rem 0; }
.nfse-tomadas-grupo summary { cursor: pointer; }
/* A evidência é frase: quebra na casa, em vez de correr sob a margem. */
.nfse-tomadas td.nfse-tomada-evidencia { white-space: normal; min-width: 22ch; max-width: 48ch; }
.nfse-tomadas td.nfse-tomada-local { white-space: normal; min-width: 16ch; max-width: 26ch; }
.nfse-tomadas-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.nfse-tomadas-acoes .nfse-excluir { color: var(--perigo); border-color: var(--perigo); }
/* A situação leva a nota do porquê (a folga, o "solicitado em · gravado
   em"): quebra, em vez de sair cortada pela borda da tabela. */
.crc-valores tbody td.crc-situacao { white-space: normal; min-width: 13rem; }
/* A tabela de pendentes cabe na vista: as células da tabela-livro não
   quebram linha por padrão (números), e aqui o motivo traz dois
   códigos de selo e uma linha de contexto — quebra, com o código
   partido onde precisar. Grade fixa para o motivo levar a largura. */
.crc-pendentes { table-layout: fixed; }
.crc-pendentes tbody td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.crc-pendentes th:nth-child(1), .crc-pendentes td:nth-child(1) { width: 11rem; }
.crc-pendentes th:nth-child(2), .crc-pendentes td:nth-child(2) { width: 6.5rem; }
.crc-pendentes th:nth-child(4), .crc-pendentes td:nth-child(4) { width: 17rem; }
.crc-pendentes .crc-selo {
  font-family: var(--mono); font-size: 0.78rem; width: 100%; box-sizing: border-box;
  margin-bottom: 0.3rem;
}

/* A barra de progresso da sincronização/enriquecimento. */
.sync-progresso-rotulo {
  font-size: 0.8rem; color: var(--tinta-suave); margin: 0.55rem 0 0.3rem;
}
.sync-barra {
  height: 8px; background: var(--papel-linha);
  border: 1px solid var(--pauta-forte); border-radius: 4px;
  overflow: hidden;
}
.sync-barra-feito {
  height: 100%; width: 0; background: var(--carmim);
  transition: width 0.4s ease;
}
/* A espera da aprovação no celular: a pessoa tem de agir. */
.sync-aprovacao {
  border-left: 3px solid var(--carmim); background: var(--papel-linha);
  padding: 0.5rem 0.8rem; margin-top: 0.4rem; font-size: 0.85rem;
}
/* O desafio do reCAPTCHA repassado (despesas-crc.js): a imagem do
   quadro em tamanho natural, coberta pelo "carregando" depois de cada
   clique até a próxima chegar. */
.sync-desafio p { margin: 0.4rem 0; font-size: 0.85rem; }
.crc-desafio-quadro {
  position: relative; display: inline-block; max-width: 100%;
  margin: 0.4rem 0; border: 1px solid var(--pauta);
}
.crc-desafio-quadro img { display: block; max-width: 100%; cursor: crosshair; }
.crc-desafio-quadro:not(:has(img[src])) { min-width: 300px; min-height: 200px; }
.crc-desafio-carregando {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--papel) 85%, transparent);
  color: var(--tinta); font-size: 0.9rem; cursor: progress;
}
.crc-desafio-quadro.esperando .crc-desafio-carregando { display: flex; }
.sync-instavel {
  font-size: 0.78rem; font-style: italic; color: var(--alerta);
  margin-top: 0.4rem;
}
/* O início do espelho: campo de data com a legenda da origem ao lado e
   os botões de aplicar/voltar — uma linha só, quebrável no estreito. */
.espelho-inicio {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
  margin: 0.6rem 0 0.4rem;
}
.espelho-inicio-rotulo {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.85rem; font-weight: 600;
}
.espelho-inicio input[type="date"] {
  font-family: var(--mono); font-size: 0.85rem;
  padding: 0.25rem 0.45rem;
}
#espelhoAcoes { display: inline-flex; gap: 0.5rem; }
/* Pendências do espelho: tabela curta de faixas; lacuna (nunca
   consultada) fala mais alto que conferência prematura. */
.cobertura-tabela { max-width: 34rem; margin: 0.4rem 0 0.6rem; }
.cobertura-tabela td { padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.cobertura-lacuna { color: var(--carmim); font-weight: 600; }
.cobertura-dias { color: var(--tinta-fraca); white-space: nowrap; }
/* Estado da base: rótulo, tamanho em coluna mono, detalhe corrido. O
   subtítulo separa a serventia selecionada da instalação inteira. */
.base-subtitulo {
  font-size: 0.85rem; font-weight: 600; color: var(--tinta-suave);
  margin: 1rem 0 0.2rem;
}
.base-tabela { max-width: 60rem; margin: 0.4rem 0 0.8rem; }
.base-tabela td { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
.base-tabela td.tamanho {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.base-detalhe { color: var(--tinta-suave); font-size: 0.78rem;
  white-space: normal; }
/* Corrupção acusada pelo quick_check: é a única coisa desta tabela que
   não pode passar despercebida. */
.base-corrompida { color: var(--carmim); }
.sync-caixa {
  background: var(--papel); border: 1px solid var(--pauta-forte);
  border-left: 3px solid var(--alerta); border-radius: 3px;
  padding: 0.7rem 0.9rem; margin: 0.6rem 0 1rem; font-size: 0.85rem;
  max-width: 70ch;
}
.nota code {
  font-family: var(--mono); font-size: 0.76rem;
  background: var(--papel-linha); padding: 0.05rem 0.25rem; border-radius: 2px;
}

.badge-da { background: var(--verde-fundo); color: var(--verde-selo); }
.badge-lc { background: var(--alerta-fundo); color: var(--alerta); }
.badge-excluida { background: var(--papel-linha); color: var(--tinta-fraca); }

/* Ação discreta em texto, no desenho do .acesso-acao/.acao-mini — mas
   valendo para a âncora E para o botão, que na tela do DARE convivem
   na mesma célula (o PDF da guia é link; "ver lançamentos", botão). */
.link-acao {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.78rem;
  color: var(--tinta-suave); text-decoration: none;
}
.link-acao:hover { color: var(--carmim); text-decoration: underline; }
/* Duas ações na mesma célula precisam de mais que o espaço entre
   palavras para se lerem como duas. */
.link-acao + .link-acao { margin-left: 0.6rem; }

.despesas .conta-grupo {
  display: block; font-size: 0.68rem; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: 0.03em;
}
tr.despesa-excluida td { color: var(--tinta-fraca); }
tr.despesa-excluida td:nth-child(2) { text-decoration: line-through; }

.acoes { white-space: nowrap; }
.acoes .acao, .cadastros a {
  font-size: 0.78rem; color: var(--carmim); text-decoration: none;
  margin-right: 0.55rem;
}
.acoes .acao:hover { text-decoration: underline; }

.filtro-check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--tinta-suave); cursor: pointer;
}
.lista-filtros input[type="text"] {
  font-family: var(--sans); font-size: 0.85rem; width: 150px;
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  padding: 0.26rem 0.4rem; background: var(--papel); color: var(--tinta);
}

/* Recorrentes ainda não lançadas no mês */
.recorrentes {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  margin: 0.6rem 0 0.2rem; padding: 0.7rem 0.9rem;
  background: var(--papel); border: 1px solid var(--pauta);
  border-left: 3px solid var(--verde-selo); border-radius: 4px;
}
.recorrentes-rot { font-size: 0.8rem; color: var(--tinta-suave); margin-right: 0.3rem; }
.recorrente {
  background: var(--papel-linha); border: 1px solid var(--pauta-forte);
  border-radius: 3px; padding: 0.3rem 0.6rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; color: var(--tinta);
}
.recorrente:hover { border-color: var(--verde-selo); color: var(--verde-selo); }
.recorrente-valor { font-family: var(--mono); color: var(--tinta-fraca); margin-left: 0.4rem; }
/* O resto do mês mora na Agenda: um link no fim da faixa, e a faixa
   inteira vira uma linha quando nada vence nos próximos dias. */
.recorrentes-agenda {
  font-size: 0.8rem; color: var(--tinta-suave); text-decoration: underline;
  white-space: nowrap;
}
.recorrentes-agenda:hover { color: var(--carmim); }
.recorrentes-curta { padding: 0.45rem 0.9rem; }

/* Avisos */
.despesa-aviso {
  padding: 0.7rem 0.9rem; border-radius: 4px; margin-bottom: 0.9rem;
  font-size: 0.86rem; border: 1px solid;
}
.despesa-aviso-erro { background: var(--perigo-fundo-claro); border-color: var(--perigo); color: var(--perigo); }
.despesa-aviso-ok { background: var(--verde-fundo-claro); border-color: var(--verde-selo); color: var(--verde-selo); }

.faltantes {
  background: var(--perigo-fundo-claro); border: 1px solid var(--perigo); border-radius: 4px;
  padding: 0.9rem 1.1rem; margin: 0.9rem 0; font-size: 0.86rem;
}
.faltantes p { margin: 0.4rem 0; color: var(--tinta-suave); }
.faltantes ul { margin: 0.5rem 0 0.8rem; padding-left: 1.2rem; }
.faltantes li { margin: 0.15rem 0; }

.sql-previa {
  background: var(--papel); border: 1px solid var(--pauta-forte); border-radius: 4px;
  padding: 0.9rem 1.1rem; overflow-x: auto; max-height: 420px; overflow-y: auto;
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.5;
  color: var(--tinta); white-space: pre;
}
.exportar-acoes { justify-content: flex-start; margin: 1rem 0; }

/* Opções da exportação de comprovantes: uma por linha, e não lado a
   lado, porque cada uma carrega a explicação do que produz — em linha,
   as explicações se misturariam com a opção seguinte. */
.comprov-opcoes {
  display: flex; flex-direction: column; gap: 0.45rem;
  margin: 0.9rem 0 1.1rem; padding: 0.8rem 1rem;
  background: var(--papel); border: 1px solid var(--pauta); border-radius: 4px;
}
.comprov-opcoes .filtro-check { align-items: baseline; }
/* A folha de rosto vale para as duas formas: um fio a separa da
   escolha entre elas. Só o filho direto: rótulo aninhado (as datas do
   alcance) não é uma opção da caixa, e o fio ali seria ruído. */
.comprov-opcoes > label:last-child {
  border-top: 1px solid var(--pauta); padding-top: 0.55rem; margin-top: 0.2rem;
}
/* O segundo período: até onde a correção de nome alcança os lançamentos
   já gravados no ERP. Recuado sob a opção que o liga, para se ler como
   consequência dela e não como escolha independente. */
.alcance-datas {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: baseline;
  margin: 0.2rem 0 0 1.6rem; font-size: 0.84rem;
}
.alcance-datas label {
  display: flex; gap: 0.4rem; align-items: baseline;
  color: var(--tinta-suave);
}
/* Mesmo desenho dos campos da barra de período: são a mesma coisa —
   duas datas que delimitam um intervalo. */
.alcance-datas input[type="date"] {
  font-family: var(--mono); font-size: 0.85rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  background: var(--papel); color: var(--tinta);
}
.faltantes-lista {
  margin: 0 0 0.9rem; padding-left: 1.2rem;
  font-size: 0.84rem; color: var(--tinta-suave);
}
.faltantes-lista li { margin: 0.15rem 0; }

/* Cadastros editáveis em linha */
.cadastros input[type="text"], .cadastros input:not([type]) {
  width: 100%; font-family: var(--sans); font-size: 0.84rem;
  border: 1px solid transparent; border-radius: 2px;
  padding: 0.22rem 0.35rem; background: transparent; color: var(--tinta);
}
.cadastros input:not([type]):hover, .cadastros input[type="text"]:hover {
  border-color: var(--pauta-forte); background: var(--papel-linha);
}
.cadastros input:focus { border-color: var(--tinta-suave); background: var(--campo); outline: none; }
.cadastros .cad-codigo { font-family: var(--mono); }
.cadastros tr.cad-nova td { background: var(--papel-linha); }
/* A regra da conta de receita, na linha dela: os tipos de selo e a
   marca do CRC, miúdos, sob o nome. */
.regra-conta { display: flex; gap: 0.35rem; align-items: center; margin-top: 0.25rem; flex-wrap: wrap; }
.regra-conta .regra-atos { width: 5.5rem; font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; }
.regra-conta select { font-size: 0.8rem; }
/* As seções do plano (grupo; na receita, especialidade › categoria):
   uma linha-cabeçalho que recolhe as contas sob ela. */
.cadastros tr.secao-cab td { background: var(--papel-linha); padding: 0.2rem 0.4rem; }
.secao-alterna {
  border: 0; background: none; padding: 0.25rem 0.2rem; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--tinta); text-align: left;
}
.secao-alterna:hover { color: var(--carmim); }
/* A especialidade da conta nova de receita, sob a natureza: ao lado,
   as duas caixas empurravam a coluna para fora da tela. */
#novaContaEspecialidade { display: block; margin-top: 0.3rem; max-width: 13rem; }
#novaContaEspecialidade[hidden] { display: none; }
/* O grupo da conta nova: a lista dos que existem e, só quando se
   escolhe criar um, o campo livre por baixo dela. */
#novaContaGrupo { max-width: 100%; }
#novaContaGrupoNovo { margin-top: 0.3rem; }
.cadastros .cad-texto[hidden] { display: none; }
.cadastros tr.cad-nova input,
.cadastros tr.cad-nova .cad-texto { border-color: var(--pauta-forte); background: var(--papel); }

/* Nome de grupo e de conta ocupam mais de uma linha sem reclamar: o
   campo é textarea justamente para poder quebrar, e cresce sozinho pela
   altura do conteúdo. Sem alça de redimensionar — quem manda no tamanho
   é o texto. */
.cadastros .cad-texto {
  width: 100%; font-family: var(--sans); font-size: 0.84rem;
  line-height: 1.35; border: 1px solid transparent; border-radius: 2px;
  padding: 0.22rem 0.35rem; background: transparent; color: var(--tinta);
  resize: none; overflow: hidden; display: block; min-height: 1.8rem;
}
.cadastros .cad-texto:hover {
  border-color: var(--pauta-forte); background: var(--papel-linha);
}
.cadastros .cad-texto:focus {
  border-color: var(--tinta-suave); background: var(--campo); outline: none;
}

/* Correspondências entre planos: a coluna do plano escolhido nas abas,
   com uma ficha por ligação — a conta da Vera pode cair em mais de uma
   conta de lá. As colunas de identidade não podem ser espremidas pela
   do plano: é pelo nome da conta que se acha a linha a corrigir. */
.contas-mapa { min-width: 100%; }
.contas-mapa th, .contas-mapa td { vertical-align: top; }
.contas-mapa .col-grupo { min-width: 11rem; }
.contas-mapa .col-conta { min-width: 16rem; }
.mapa-celula { min-width: 14rem; }
.mapa-ligar { width: 100%; }
.mapa-chip {
  display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.2rem;
  padding: 0.12rem 0.3rem; border-radius: 2px;
  background: var(--papel-linha); border: 1px solid var(--pauta);
  font-size: 0.8rem;
}
.mapa-chip-saida { border-color: var(--pauta-forte); }
.mapa-codigo { font-family: var(--mono); color: var(--tinta-suave); }
.mapa-nome { max-width: 9rem; }
.mapa-marca, .mapa-tirar {
  border: none; background: none; cursor: pointer; padding: 0 0.15rem;
  color: var(--tinta-fraca); font-size: 0.85rem; line-height: 1;
}
.mapa-marca.ligada { color: var(--carmim); font-weight: 700; }
.mapa-marca:hover, .mapa-tirar:hover { color: var(--tinta); }
.mapa-tirar { margin-left: auto; }
.mapa-ligar { font-size: 0.78rem; }
.mapa-mais {
  border: none; background: none; cursor: pointer; padding: 0.1rem 0;
  font-family: var(--sans); font-size: 0.75rem; color: var(--tinta-fraca);
}
.mapa-mais:hover { color: var(--carmim); text-decoration: underline; }
/* Correspondência herdada da conta-mãe: informa, mas não é editável —
   esmaecida para não passar por escolha própria da filha. */
.mapa-herdada { opacity: 0.65; border-style: dashed; }

/* Recuo do desdobramento na tabela de contas da Vera: o campo de nome
   da filha entra deslocado sob o da mãe. */
.cadastros td.recuo-nivel { padding-left: calc(0.4rem + var(--nivel, 0) * 1.3rem); }

/* Cabeçalho ordenável da tabela de contas: um botão que herda o tipo do
   th, para o cabeçalho continuar parecendo cabeçalho. */
.col-ordenar {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit;
}
.col-ordenar:hover { color: var(--carmim); }

/* Ações da linha de conta: desdobrar e apagar lado a lado. */
.cad-acoes { white-space: nowrap; }
.cad-apagar {
  border: none; background: none; cursor: pointer; padding: 0 0.25rem;
  color: var(--tinta-fraca); font-size: 0.95rem; line-height: 1;
}
.cad-apagar:hover { color: var(--carmim); }

/* Abas de plano externo na Integração: um por vez, porque todas as
   colunas juntas passavam da janela — e a que ficava fora era sempre a
   do ERP. */
.plano-abas {
  display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.7rem;
}
.plano-abas-rotulo { font-size: 0.8rem; color: var(--tinta-fraca); }
.plano-aba {
  background: var(--papel); border: 1px solid var(--pauta-forte);
  border-radius: 3px; padding: 0.3rem 0.8rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; color: var(--tinta-suave);
}
.plano-aba:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.plano-aba.ativa {
  background: var(--carmim); border-color: var(--carmim); color: var(--sobre-acento);
}

/* O plano externo conta a conta, aninhado como o ERP o aninha. */
.arvore-plano {
  background: var(--papel); border: 1px solid var(--pauta);
  border-radius: 3px; padding: 0.4rem 0.6rem; max-width: 64rem;
}
.arvore-item {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.18rem 0 0.18rem calc(var(--nivel, 0) * 1.3rem);
  border-bottom: 1px solid var(--papel-linha); font-size: 0.84rem;
}
.arvore-item:last-child { border-bottom: none; }
.arvore-codigo { color: var(--tinta-fraca); font-size: 0.76rem; min-width: 3rem; }
.arvore-nome { max-width: 22rem; }
.arvore-inativa .arvore-nome { color: var(--tinta-fraca); text-decoration: line-through; }
.arvore-recebe { font-size: 0.78rem; color: var(--tinta-suave); margin-left: auto; text-align: right; }
.arvore-solta { color: var(--tinta-fraca); font-style: italic; }
.arvore-origem { white-space: nowrap; cursor: pointer; }
.arvore-sep { margin: 0 0.3rem; color: var(--tinta-fraca); }
.arvore-recuo { display: inline-block; padding-left: calc(var(--nivel, 0) * 1.1rem); }

/* Classificação do lançamento nos planos externos (formulário). */
.classificacoes { font-size: 0.8rem; }
.classif-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin-top: 0.2rem;
}
.classif-plano { color: var(--tinta-fraca); white-space: nowrap; }
.classif-manual { color: var(--carmim); font-weight: 600; }
.classif-ajustar {
  border: none; background: none; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 0.75rem; color: var(--tinta-fraca);
  text-decoration: underline;
}
.classif-ajustar:hover { color: var(--carmim); }
/* O editor do ajuste: campo pesquisável (a lista .sugestoes ancora nele)
   e o botão de voltar ao mapeado. */
.classif-editor {
  position: relative; display: flex; align-items: center; gap: 0.5rem;
  flex: 1 1 18rem;   /* o que sobrar na linha; sem espaço, a linha de baixo inteira */
}
.classif-editor[hidden] { display: none; }
.classificacoes .classif-busca {
  flex: 1; min-width: 0; font-size: 0.8rem; padding: 0.25rem 0.4rem;
}
.classif-mapeado {
  border: none; background: none; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 0.75rem; color: var(--tinta-fraca);
  text-decoration: underline; white-space: nowrap;
}
.classif-mapeado:hover { color: var(--carmim); }

/* Conta remanejada à mão na conferência da importação. */
.linha-conta { font-size: 0.78rem; max-width: 16rem; }
.linha-conta[data-remanejada] { border-color: var(--carmim); }
.nota-inline { color: var(--tinta-fraca); font-size: 0.78rem; }

/* Os papéis da comprovação (o que a conta exige, o que o tipo de
   comprovante cumpre): três marcas curtas lado a lado, sem quebrar. */
.papeis-marcas { display: inline-flex; gap: 0.7rem; white-space: nowrap;
  font-size: 0.82rem; }
.papeis-marcas label { display: inline-flex; align-items: center;
  gap: 0.2rem; cursor: pointer; }

/* Exportação do balancete em PDF: a caixa de opções dos comprovantes,
   com a data ao lado do interruptor e o par nome/cargo recuado sob o
   seu. O fio do último filho não vale aqui — o bloco da assinatura não
   é uma opção à parte, é o detalhe da de cima. */
.modal-balancete { max-width: 560px; }
/* A tabela por conta precisa de mais que o modal padrão. */
.modal-comprovantes { max-width: 720px; }
.balancete-opcoes > label:last-child { border-top: 0; padding-top: 0; margin-top: 0; }
.balancete-opcoes .filtro-check { align-items: center; }
.balancete-data {
  margin-left: 0.4rem; padding: 0.15rem 0.35rem; font: inherit;
  font-family: var(--mono); font-size: 0.8rem;
  border: 1px solid var(--pauta); border-radius: 3px; background: var(--campo);
}
.balancete-data:disabled { color: var(--tinta-fraca); background: var(--papel); }
.balancete-assinatura { margin: 0.2rem 0 0.3rem 1.55rem; }
.balancete-assinatura[hidden] { display: none; }

/* Balancete com receitas: o interruptor ao lado do botão de exportar,
   um título de seção por lado (Receitas, Despesas) e o resultado do
   período fechado com o fio duplo, como no PDF. Resultado negativo
   sai em carmim — é o número que a pessoa veio ver. */
.balancete-acoes { gap: 1.1rem; align-items: center; }
.balancete-acoes .filtro-check { margin: 0; }
.balancete-secao {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  margin: 1.4rem 0 0.4rem;
}
.balancete-resultado {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 0.9rem 0 0.4rem; padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--tinta); border-bottom: 3px double var(--tinta);
  font-weight: 600;
}
.balancete-resultado small { color: var(--tinta-fraca); font-weight: normal; }
.balancete-resultado .val { font-size: 1.05rem; }
.balancete-resultado .negativo, .resumo-item .val.negativo { color: var(--perigo); }

/* Livro diário: a tabela-livro de quatro colunas, com a data na linha
   da especialidade que abre o dia, o subtotal do dia discreto e o
   lançamento como link para a sua origem (selo ou despesa). */
.livro-subtitulo { font-size: 0.78rem; color: var(--tinta-fraca); margin-top: -0.3rem; }
.livro-opcoes { gap: 1rem; align-items: center; }
.livro-opcoes .filtro-check { margin: 0; }
.livro-opcoes select {
  font: inherit; font-size: 0.85rem; padding: 0.15rem 0.3rem;
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  background: var(--papel); color: var(--tinta);
}
.livro-diario td:first-child { white-space: nowrap; font-weight: 600; width: 6.5rem; }
/* A descrição é comprida e QUEBRA linha; os valores, não — é a tabela
   inteira que precisa caber na tela, não cada lançamento numa linha. */
.livro-diario td.esq:nth-child(2), .livro-diario th.esq:nth-child(2) { white-space: normal; width: auto; }
.livro-diario td:nth-child(3), .livro-diario td:nth-child(4),
.livro-diario th:nth-child(3), .livro-diario th:nth-child(4) { white-space: nowrap; width: 7rem; }
.livro-recusa a { color: var(--perigo); }
/* As setas de dia em dia: fixas, a meia altura da janela, à direita da
   tabela — a horizontal vem por CSSOM do retângulo da tabela
   (atualizarSetasDoLivro), e em janela estreita, sem margem, ficam
   sobre a borda direita da tela, com a tabela por baixo. Abaixo do
   menu e do cabeçalho fixos na pilha, acima do conteúdo. */
.livro-setas {
  position: fixed; top: 50%; transform: translateY(-50%); left: 0;
  display: flex; flex-direction: column; gap: 0.3rem; z-index: 30;
}
.livro-setas[hidden] { display: none; }
.livro-seta {
  width: 2.2rem; height: 2.2rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel); color: var(--tinta-suave);
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  box-shadow: 0 1px 3px var(--sombra); cursor: pointer;
}
.livro-seta:hover:not(:disabled) { border-color: var(--carmim); color: var(--carmim); }
.livro-seta:disabled { opacity: 0.35; cursor: default; }
.sync-sem-resposta { margin-top: 0.4rem; font-size: 0.8rem; color: var(--alerta); }
.livro-revisao-ok { color: var(--verde-selo); }
.livro-revisao-pendente a { color: var(--carmim); }
/* Os filtros de visualização do livro: o valor em mono e à direita,
   como na coluna; o aviso de filtro em carmim — a tabela à vista não
   é o livro inteiro, e as somas dela também não. */
.livro-filtros { gap: 1.4rem; }
.livro-filtro-blocos { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.livro-filtros input.livro-filtro-valor {
  font-family: var(--mono); width: 110px; text-align: right;
}
.livro-filtrado { color: var(--carmim); }
.espelho-inicio .botao-secundario { margin-left: 0.4rem; }
.livro-diario tr.livro-bloco td { padding-top: 0.55rem; }
.livro-diario tr.livro-bloco:first-child td { padding-top: 0.3rem; }
.livro-diario tr.subgrupo td.esq { padding-left: 1.2rem; }
.livro-diario tr.livro-dia-total td {
  color: var(--tinta-suave); font-size: 0.8rem;
  border-bottom: 1px solid var(--pauta); padding-bottom: 0.45rem;
}
.livro-diario tr.livro-especialidade td { color: var(--tinta-suave); }
/* Agrupado: o tipo de selo (ou a conta) sob a especialidade, e os
   lançamentos dele um degrau à direita. */
.livro-diario tr.livro-subgrupo td { color: var(--tinta-suave); font-weight: 600; font-size: 0.8rem; border-bottom: 0; padding-bottom: 0.1rem; }
.livro-diario tr.livro-subgrupo td.esq { padding-left: 1.2rem; }
.livro-diario tr.livro-aninhado td.esq { padding-left: 2.4rem; }
/* O fecho do dia: total, especialidades e acumulado, do mais forte ao
   mais discreto; o fio fica no acumulado, que é a última linha. */
.livro-diario tr.livro-dia-total td { border-bottom: 0; padding-bottom: 0.1rem; }
.livro-diario tr.livro-dia-esp td { color: var(--tinta-fraca); font-size: 0.78rem; border-bottom: 0; padding: 0.1rem 0.6rem; }
.livro-diario tr.livro-dia-esp td.esq { padding-left: 1.2rem; }
.livro-diario tr.livro-acumulado td {
  color: var(--tinta-fraca); font-size: 0.78rem; padding-top: 0.1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--pauta);
}
.livro-diario tr.livro-resultado small { color: var(--tinta-fraca); font-weight: normal; }
.livro-diario td.negativo { color: var(--perigo); }
.livro-origem {
  color: inherit; text-decoration: underline dotted var(--tinta-fraca);
  text-underline-offset: 3px;
}
.livro-origem:hover { color: var(--carmim); }
/* A linha do selo é referência secundária: menor e mais clara que os
   subtotais, para o olho ficar no detalhe. */
.livro-selo { color: var(--tinta-fraca); font-size: 0.68rem; letter-spacing: 0.01em; }
.livro-recusa p { margin: 0.3rem 0; }

/* Formulário de lançamento: um documento em três seções (Despesa,
   Pagamento, Comprovantes), tituladas como as telas da casa. A grade
   tem doze colunas, para cada campo ter a largura do que recebe: o
   valor três (até a casa do milhão), data e CPF/CNPJ quatro, o texto
   livre a linha inteira. Todo controle tem a MESMA altura: mono e sans
   têm métricas diferentes, e sem a altura fixa dois campos da mesma
   linha saíam desalinhados. */
.modal-despesa { max-width: 760px; }
.form-secao {
  font-family: var(--serif); font-size: 0.98rem; font-weight: 600;
  color: var(--tinta); margin: 1.4rem 0 0.75rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--pauta-forte);
}
.form-erro + .form-secao, .modal-ato + .form-secao { margin-top: 0.4rem; }
.form-grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.9rem 0.8rem;
}
.campo-3 { grid-column: span 3; }
.campo-4 { grid-column: span 4; }
.campo-5 { grid-column: span 5; }
.campo-6 { grid-column: span 6; }
.campo-8 { grid-column: span 8; }
.form-grade .campo input:not([type="checkbox"]), .form-grade .campo select {
  height: 2.3rem; box-sizing: border-box; line-height: 1.2;
}
.form-grade .campo input[type="date"] { font-size: 0.85rem; }
/* O valor é o número do documento: mono, à direita, com a moeda ao
   lado — a moldura é do par, e o campo dentro dela não tem borda. */
.campo-moeda {
  display: flex; align-items: center; gap: 0.4rem; height: 2.3rem;
  box-sizing: border-box; padding: 0 0.6rem; background: var(--campo);
  border: 1px solid var(--pauta-forte); border-radius: 3px;
}
.campo-moeda:focus-within { border-color: var(--tinta-suave); }
.campo-moeda span {
  font-family: var(--mono); font-size: 0.78rem; color: var(--tinta-fraca);
  letter-spacing: 0;
}
.form-grade .campo .campo-moeda input {
  flex: 1; height: auto; border: none; padding: 0; background: transparent;
  text-align: right; font-size: 1rem; font-weight: 600;
}
.campo-moeda input:focus { outline: none; }
/* Pago | Programado: dois botões numa moldura, no tom dos atalhos de
   período — o ativo em carmim. */
.alterna {
  display: flex; height: 2.3rem; box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--pauta-forte); border-radius: 3px; background: var(--campo);
}
.alterna button {
  flex: 1; border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.84rem; color: var(--tinta-suave);
  text-transform: none; letter-spacing: normal;
}
.alterna button + button { border-left: 1px solid var(--pauta-forte); }
.alterna button:hover:not(.ativo) { background: var(--papel-linha); color: var(--tinta); }
.alterna button.ativo { background: var(--carmim); color: var(--sobre-acento); }
/* A caixa dos comprovantes: tracejada como a da sessão do CRC, e o
   campo de arquivo fica escondido atrás do "escolha no computador". A
   caixa é o convite; o alvo do arrasto é o modal inteiro, e enquanto
   um arquivo passa por cima dele a moldura tracejada e a caixa acendem
   juntas — é o modal dizendo "pode soltar em qualquer ponto". */
.anexo-solta {
  border: 1px dashed var(--pauta-forte); border-radius: 3px;
  padding: 1rem 1.1rem; margin-top: 0.5rem; text-align: center;
  font-size: 0.82rem; color: var(--tinta-suave);
}
.anexo-solta-nota {
  display: block; margin-top: 0.35rem; font-size: 0.76rem;
  color: var(--tinta-fraca);
}
.modal-recebe .anexo-solta { border-color: var(--carmim); background: var(--papel-linha); }
.modal-recebe { outline: 2px dashed var(--carmim); outline-offset: -6px; }
/* O campo que a Vera preencheu pelo documento: âmbar claro até alguém
   digitar nele — é o que separa "lido" de "escrito". */
.form-grade .campo input.campo-lido, .campo-moeda:has(input.campo-lido) {
  background: var(--lido);
}
/* No valor quem pinta é a moldura do par: o campo dentro dela segue
   transparente — com fundo, ele cobria a borda da moldura. */
.form-grade .campo-moeda input.campo-lido { background: transparent; }
.anexo-escolher {
  border: none; background: none; padding: 0; font: inherit;
  color: var(--carmim); text-decoration: underline; cursor: pointer;
}
.anexo-tipo { background: var(--campo); }
.campo { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-fraca); }
/* Pagamento ainda não confirmado: âmbar de pendência, nem o verde de
   pago nem o carmim de anomalia — prevista é estado normal, não erro. */
.badge-prevista, .badge-parcial { background: var(--alerta-fundo); color: var(--alerta); }
/* A receita lançada na Agenda: a marca diz que o dinheiro entra, e o
   valor sai no verde de quem recebe — a agenda é de pagamentos por
   vocação, e o que entra precisa se anunciar. */
.badge-receita { background: var(--verde-fundo); color: var(--verde-selo); margin-right: 0.35rem; }
.valor-entrada { color: var(--verde-selo); }

/* Agenda de pagamentos: a linha de confirmação abre sob a despesa. O
   orçamento de largura é o da lista de lançamentos — o recorte (.cortar)
   só corta quando o span tem teto, e sem estes a guia de repasse, de
   histórico comprido, alargava a tabela para fora da tela. */
.agenda-tabela .historico  { max-width: 30ch; }
.agenda-tabela .conta      { max-width: 18ch; }
.agenda-tabela .fornecedor { max-width: 16ch; }
/* Duas linhas antes da reticência, como na lista: a altura sobra, a
   largura não — três colunas de texto mais o valor e as ações
   precisam caber sem empurrar a tabela para fora do quadro. */
.agenda-tabela .cortar {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.agenda-tabela { min-width: 44rem; }
/* O recorte em caixa é bloco: ícone e clipe ficariam em linha própria.
   O invólucro os põe lado a lado, o texto encolhendo primeiro. */
.agenda-hist { display: flex; align-items: flex-start; gap: 0.35rem; }
.agenda-hist .cortar { flex: 0 1 auto; min-width: 0; }
.agenda-hist .agenda-sinais { flex: none; margin-left: 0; padding-top: 0.1rem; }
.agenda-hist .agenda-sinais .rotulo-vinc:first-child { margin-left: 0; }
.agenda-confirmacao > td { background: var(--recuo); }
/* Seleção para o lote: coluna estreita de marcas e a barra de ações,
   que só aparece com algo marcado. */
.agenda-marca { width: 1.6rem; text-align: center; }
.agenda-lote {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin: 0.6rem 0; padding: 0.5rem 0.8rem;
  background: var(--papel-linha); border: 1px solid var(--pauta-forte);
  border-radius: 3px; font-size: 0.85rem;
}
/* display: flex venceria o [hidden] do navegador — devolve a palavra. */
.agenda-lote[hidden] { display: none; }
/* Partes do grupo: sub-linhas recuadas, visivelmente do pagamento de
   cima — e o desvincular discreto, como os demais rotulo-vinc. */
.agenda-parte > td { background: var(--recuo); font-size: 0.82rem; }
.agenda-parte-hist { padding-left: 1.6rem; }
/* O "N partes" abre e fecha as sub-linhas: o desenho é o da ação em
   texto (.link-acao); aqui fica o que é do lugar — e o sublinhado de
   sempre, como no desvincular ao lado: sozinho numa coluna de dados,
   sem ele o rótulo não se anuncia clicável. */
.agenda-partes { white-space: nowrap; text-decoration: underline; }
.agenda-form {
  display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.5rem 0;
}
/* A sugestão de recorrência é linha da mesma tabela, mas ainda não é
   lançamento: tinta mais fraca e o rótulo tracejado, para o olho não a
   somar ao que já está escriturado. */
.agenda-sugestao > td { color: var(--tinta-fraca); }
/* A marca da sugestão é um ícone só, com o porquê no title: um rótulo
   por extenso em cada linha gritava mais do que o histórico. */
.agenda-rec {
  display: inline-block; margin-right: 0.4rem; cursor: help;
  color: var(--tinta-suave); font-size: 0.95rem; line-height: 1;
  vertical-align: bottom;
}
/* Ação principal à vista e o resto no menu ⋯: coluna estreita. */
.agenda-tabela td.agenda-acoes { width: 1%; white-space: nowrap; }
.agenda-acoes .botao-secundario { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.agenda-acoes .botao-secundario + .acoes-botao { margin-left: 0.2rem; }
/* O clipe ao lado do histórico: vazio (sem documento) fica apagado —
   é o que a agenda quer que se veja antes de pagar. */
.agenda-sinais { margin-left: 0.4rem; white-space: nowrap; }
.agenda-sinais .rotulo-vinc + .rotulo-vinc { margin-left: 0.3rem; }
.agenda-sem-doc { opacity: 0.45; }
.agenda-sem-doc:hover { opacity: 1; }

/* Emissão de DARE-SP */
.daresp-controles {
  display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap;
  margin: 0.8rem 0;
}
.daresp-check {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem;
  color: var(--tinta); padding-bottom: 0.4rem;
}
.daresp-faltas { margin: 0.4rem 0 0 1.1rem; font-size: 0.86rem; }
.daresp-conferencia, .daresp-emitida { margin: 1rem 0; }
/* Linha digitável e PIX: o que se leva para o banco. Monoespaçado e
   selecionável — quem não puder usar o botão copia à mão. */
.daresp-pagar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.5rem 0;
}
.daresp-codigo {
  font-family: var(--mono); font-size: 0.86rem; user-select: all;
  background: var(--papel-fundo);
  border: 1px solid var(--pauta); border-radius: 3px;
  padding: 0.3rem 0.5rem; word-break: break-all;
}
.daresp-codigo-pix { max-width: 34rem; font-size: 0.76rem; }
.daresp-lanc {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.3rem 0; font-size: 0.86rem;
}
.daresp-detalhe > td { background: var(--recuo); }

/* Divisor de seção dentro de um formulário em grade (ex.: o bloco de
   identificação da serventia, abaixo dos campos técnicos). */
.campo-largo { grid-column: 1 / -1; }
.campo-rot { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--tinta-fraca); }
/* Campo é branco, todos iguais: sobre o papel do modal, o branco é o
   que diz "aqui se escreve" — no tom do papel eles pareciam inativos
   ao lado do histórico, que já era branco. */
.campo input, .campo select,
.captura-candidata select, .captura-candidata input {
  font-family: var(--sans); font-size: 0.9rem; text-transform: none;
  letter-spacing: normal; color: var(--tinta);
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  padding: 0.4rem 0.5rem; background: var(--campo); min-width: 0;
}
.campo input:focus, .campo select:focus,
.captura-candidata select:focus, .captura-candidata input:focus {
  border-color: var(--tinta-suave); outline: none;
}
.campo-valor input, .campo-data input { font-family: var(--mono); }

/* Desdobramento no formulário: o alternador discreto e as linhas de
   parte (conta + valor + histórico opcional + remover). */
.desdobrar-alterna {
  border: none; background: none; padding: 0; text-align: left;
  color: var(--tinta-suave); font-size: 0.82rem;
  text-decoration: underline; cursor: pointer;
}
/* O desdobramento é um apêndice da conta: cola nela (anula o vão da
   grade) e deixa o vão inteiro para o que vem depois — o selo, na
   receita, é outro assunto e precisa de ar. */
#fDesdobrar { margin-top: -0.55rem; }
.campo-selo { margin-top: 0.35rem; }
.desdobrar-alterna:hover { color: var(--carmim); }
.desdobrar-dica {
  font-size: 0.76rem; color: var(--tinta-fraca);
  text-transform: none; letter-spacing: normal; margin-bottom: 0.3rem;
}
.parte-linha {
  display: grid; grid-template-columns: minmax(12rem, 2fr) 7rem 1fr auto;
  gap: 0.4rem; align-items: center; margin-bottom: 0.4rem;
}
.parte-linha .parte-valor { font-family: var(--mono); text-align: right; }
.parte-remover {
  border: none; background: none; color: var(--tinta-fraca);
  font-size: 1rem; cursor: pointer; padding: 0 0.3rem;
}
.parte-remover:hover { color: var(--carmim); }
.parte-acoes {
  display: flex; align-items: center; gap: 0.8rem; margin-top: 0.2rem;
}
.parte-total {
  font-size: 0.82rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.campo-livros { gap: 0.35rem; }
.livro-check {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.86rem; text-transform: none; letter-spacing: normal;
  color: var(--tinta); cursor: pointer;
}
.livro-dica { font-size: 0.76rem; color: var(--alerta); }

.anexos-lista { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.4rem; }
.anexo-item {
  display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.84rem;
  text-transform: none; letter-spacing: normal;
}
.anexo-item a { color: var(--carmim); text-decoration: none; }
.anexo-item a:hover { text-decoration: underline; }
.anexo-tam { font-size: 0.72rem; color: var(--tinta-fraca); font-family: var(--mono); }
.anexo-novo { color: var(--tinta-suave); font-style: italic; }
.anexo-vazio { font-size: 0.8rem; color: var(--tinta-fraca);
  text-transform: none; letter-spacing: normal; }
.anexo-remover { color: var(--tinta-fraca) !important; font-weight: 700; }
.anexo-remover:hover { color: var(--perigo) !important; }

.form-erro {
  background: var(--perigo-fundo-claro); border: 1px solid var(--perigo); border-radius: 3px;
  padding: 0.55rem 0.8rem; font-size: 0.85rem; color: var(--perigo);
  margin-top: 0.8rem;
}
.form-acoes {
  display: flex; justify-content: flex-end; gap: 0.6rem;
  margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--pauta);
}

/* ---------------- Importação ---------------- */

/* O selo único da integração com o ERP: a inicial do sistema, a cor
   diz o estado. O escuro é o da origem (importada), como sempre foi; o
   verde, o de coisa resolvida; o âmbar pede um passo (vincular); o
   carmim acusa desatualização de lá. */
.badge-docwin {
  display: inline-block; min-width: 1.05rem; padding: 0.05rem 0;
  text-align: center; font-weight: 700; cursor: default;
}
.docwin-importada    { background: var(--tinta-suave); color: var(--papel); }
.docwin-sincronizada { background: var(--verde-selo); color: var(--papel); }
.docwin-exportada    { background: var(--alerta); color: var(--papel); }
.docwin-alterada     { background: var(--carmim); color: var(--papel); }
.docwin-perdida      { background: var(--tinta-fraca); color: var(--papel); }

/* As tabelas da exportação: texto em duas linhas com reticência (o
   mesmo .cortar da lista), porque .livro td é nowrap e um histórico
   comprido alargava a tabela para fora do quadro. */
.exportacao-tabela .cortar {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.exportacao-tabela .historico  { max-width: 28ch; }
.exportacao-tabela .conta      { max-width: 18ch; }
.exportacao-tabela .fornecedor { max-width: 16ch; }
.exportacao-abas { margin-bottom: 1rem; }

/* A dica de comprovação do formulário: informa, não bloqueia. */
.anexo-comprovacao {
  font-size: 0.78rem; color: var(--verde-selo); margin: 0.5rem 0 0;
}
.anexo-comprovacao.anexo-comprovacao-falta { color: var(--alerta); }
.anexo-comprovacao.anexo-comprovacao-neutra { color: var(--tinta-fraca); }

/* Avisos de comprovação: âmbar ao lado do clipe quando falta o
   exigido, carmim sozinho quando não há documento nenhum. O glifo é o
   ⚠ em apresentação de texto (FE0E), que aceita cor do CSS — o emoji
   traria o amarelo dele, alheio à paleta. */
.doc-aviso { font-weight: 700; margin-left: 0.15rem; }
.doc-aviso-parcial { color: var(--alerta); }
a.rotulo-vinc.doc-aviso-total {
  color: var(--perigo); border-color: var(--perigo); font-weight: 700;
}
a.rotulo-vinc.doc-aviso-total:hover { background: var(--perigo); color: var(--sobre-acento); }

/* Casas fixas: cada sinal ocupa a sua, presente ou não, para que a
   coluna se leia de cima a baixo em vez de dançar linha a linha.

   O que separa uma casa da outra é a casa, não a marca: a
   `margin-left` que o rótulo carrega por toda parte some aqui, porque
   numa caixa de largura fixa com conteúdo centrado ela engordava
   justamente o que tinha de caber. E a largura é MÍNIMA, não fixa —
   com `width`, o que não coubesse transbordava para os DOIS lados, e
   era assim que o lembrete ia parar em cima do clipe e roubava o
   clique dele. Os mínimos abaixo comportam o conteúdo de sempre (o
   clipe com contagem de um dígito e o aviso de comprovação); uma
   contagem maior empurra o vizinho, que é bem menos ruim do que subir
   nele. */
.despesas td.sinais { white-space: nowrap; text-align: left; }
.despesas td.sinais .sinal { display: inline-block; text-align: center; }
.despesas td.sinais .sinal + .sinal { margin-left: 0.3rem; }
.despesas td.sinais .sinal > .rotulo-vinc {
  margin-left: 0; padding-left: 0.3rem; padding-right: 0.3rem;
}
.despesas td.sinais .sinal-origem { min-width: 1.2rem; }
.despesas td.sinais .sinal-anexos { min-width: 2.9rem; }
.despesas td.sinais .sinal-recado { min-width: 1.7rem; }
.despesas td.sinais .sinal-elo { min-width: 1.4rem; }
.despesas td.sinais .badge { margin-left: 0; }

.sinal-elo-marca { color: var(--tinta-fraca); cursor: default; }

/* O lembrete é recado, não alerta: tinta comum, e só o carmim da marca
   quando o ponteiro passa. Se gritasse como os avisos de comprovação,
   competiria com eles — e a diferença entre "falta documento" e
   "lembrar de conferir" é justamente essa. */
a.rotulo-vinc.sinal-lembrete {
  color: var(--tinta-suave); border-color: var(--pauta-forte);
  font-size: 0.95rem; line-height: 1;
}
a.rotulo-vinc.sinal-lembrete:hover { background: var(--carmim); color: var(--sobre-acento); }

.campo-dica {
  font-weight: 400; text-transform: none; letter-spacing: normal;
  color: var(--tinta-fraca); font-size: 0.72rem;
}

.despesa-aviso-atencao {
  background: var(--alerta-fundo-claro); border-color: var(--alerta); color: var(--alerta);
}

.baldes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.balde {
  font-size: 0.76rem; padding: 0.2rem 0.55rem; border-radius: 2px;
  background: var(--papel-linha); color: var(--tinta-suave);
  border: 1px solid var(--pauta-forte); white-space: nowrap;
}
.balde-nova { background: var(--verde-fundo); color: var(--verde-selo); border-color: var(--verde-selo); }
.balde-vinculada, .balde-correspondente { background: var(--azul-fundo); color: var(--azul); border-color: var(--azul-borda); }
.balde-invalida, .balde-bloqueada, .balde-conflito {
  background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo);
}
.balde-atualizada { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); }
.balde-repetida { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); }
.balde-perdida { background: var(--papel-linha); color: var(--tinta-fraca); }

/* A marca V<id> que a exportação deixou nas observações do lançamento:
   discreta ao lado do histórico, como o carimbo que é. */
.marca-vera {
  font-family: var(--mono); font-size: 0.68rem; color: var(--tinta-fraca);
  margin-left: 0.4rem; white-space: nowrap;
}

/* Ausentes e repetidos: as caixas de atenção da conferência, com a
   tabela e os controles dentro. */
.ausentes, .repetidos { background: var(--alerta-fundo-claro); border-color: var(--alerta); }
.ausentes .livro, .repetidos ul { margin: 0.6rem 0 0.2rem; }
.ausentes .ausente-acao { max-width: 34ch; font-size: 0.8rem; }
.ausentes-acoes { margin: 0.4rem 0 0; justify-content: flex-start; gap: 0.5rem; }
.repetido-grupo { margin: 0.5rem 0; }
.repetido-grupo ul { padding-left: 1.2rem; }
.repetido-grupo .decisao-acoes { display: inline-flex; margin-left: 0.6rem; font-size: 0.8rem; }

tr.linha-ruim td { background: var(--perigo-veu); }
.linha-motivo {
  font-size: 0.72rem; color: var(--tinta-fraca); margin-top: 0.15rem;
  white-space: normal; max-width: 42ch;
}
.livro td.mono { font-family: var(--mono); }

.decisao {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.8rem;
  align-items: center; padding: 0.6rem 0.9rem; margin-bottom: 0.4rem;
  background: var(--papel); border: 1px solid var(--pauta);
  border-left: 3px solid var(--azul-borda); border-radius: 4px; font-size: 0.86rem;
}
.decisao-lado .rot {
  display: block; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--tinta-fraca);
}
.decisao-acoes { display: flex; gap: 0.8rem; white-space: nowrap; }
.decisao-acoes label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }

.opcoes-importacao {
  display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem;
}

#arquivoCsv, #arquivoPlano { font-size: 0.85rem; margin-bottom: 0.5rem; }

/* A consulta do plano é editável: os nomes de coluna variam por
   serventia, e ajustar ali é mais rápido que renomear no cliente. */
.sql-editavel {
  width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.5;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--pauta-forte); border-radius: 4px;
  padding: 0.9rem 1.1rem; resize: vertical;
}
.sql-editavel:focus { border-color: var(--tinta-suave); outline: none; }
.balde-inalterada { background: var(--papel-linha); color: var(--tinta-fraca); }

/* ---------------- Fornecedor, documento e comprovantes ---------------- */

.conta-grupo-rot {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tinta-fraca); padding: 0.4rem 0.4rem 0.15rem;
  border-bottom: 1px solid var(--papel-linha); margin-top: 0.2rem;
}
.ato-multi-lista .serventia-busca { margin-bottom: 0.2rem; }

.campo-fornecedor { position: relative; }
.sugestoes {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: var(--papel); border: 1px solid var(--tinta-suave);
  border-radius: 3px; box-shadow: 0 8px 20px var(--sombra);
  max-height: 260px; overflow-y: auto;
}
.sugestoes[hidden] { display: none; }
.sugestao {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.4rem 0.6rem; cursor: pointer;
  text-transform: none; letter-spacing: normal;
}
/* Destaque do teclado e do mouse é o mesmo: quem alterna entre os dois
   não perde de vista onde está. */
.sugestao:hover, .sugestao.ativa { background: var(--papel-linha); }
.sugestao.ativa { box-shadow: inset 2px 0 0 var(--carmim); }
.sugestao-nome { font-size: 0.88rem; color: var(--tinta); }
.sugestao-doc {
  font-family: var(--mono); font-size: 0.74rem; color: var(--tinta-fraca);
  margin-left: auto;
}
.sugestao-uso { font-size: 0.7rem; color: var(--tinta-fraca); }

.campo-documento input { font-family: var(--mono); }
.campo input.campo-invalido {
  border-color: var(--perigo); background: var(--perigo-leve);
}

.anexo-dica {
  display: block; margin-top: 0.3rem; font-size: 0.74rem;
  color: var(--tinta-fraca); text-transform: none; letter-spacing: normal;
}
.anexo-categoria {
  font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 2px;
  background: var(--papel-linha); color: var(--tinta-suave);
  border: 1px solid var(--pauta-forte); white-space: nowrap;
}
.anexo-sem-categoria { color: var(--tinta-fraca); font-style: italic; }
.anexo-descartar { color: var(--tinta-fraca) !important; font-weight: 700;
  text-decoration: none; }
.anexo-descartar:hover { color: var(--carmim) !important; }

.anexo-item {
  justify-content: flex-start; gap: 0.5rem; padding: 0.15rem 0;
}
.anexo-item .anexo-nome {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 26ch;
}
.anexo-item .anexo-tam { margin-left: auto; }
.anexo-tipo {
  font-family: var(--sans); font-size: 0.76rem; text-transform: none;
  letter-spacing: normal; color: var(--tinta-suave);
  border: 1px solid var(--pauta-forte); border-radius: 2px;
  padding: 0.1rem 0.25rem; background: var(--papel-linha);
  max-width: 20ch;
}
.anexo-tipo:focus { border-color: var(--tinta-suave); outline: none; }
/* Removido tem de se ler como removido, e não como apagado: fundo
   próprio, nome riscado e um "restaurar" que se comporta como botão. */
.anexo-removido {
  background: var(--perigo-veu);
  border-left: 2px solid var(--carmim-claro);
  padding-left: 0.4rem; margin-left: -0.4rem; border-radius: 2px;
}
.anexo-removido .anexo-nome {
  text-decoration: line-through; color: var(--tinta-fraca);
}
.anexo-restaurar {
  font-size: 0.74rem; color: var(--carmim); text-decoration: none;
  border: 1px solid var(--carmim); border-radius: 2px;
  padding: 0.05rem 0.4rem; white-space: nowrap;
}
.anexo-restaurar:hover { background: var(--carmim); color: var(--sobre-acento); }
.anexo-nota {
  margin: 0.5rem 0 0; font-size: 0.74rem; color: var(--tinta-suave);
  text-transform: none; letter-spacing: normal; line-height: 1.4;
}

/* Ordenação: arrastar para mover longe, setas para mover uma casa —
   e as setas são também o caminho de quem usa teclado. */
.anexo-pegar {
  cursor: grab; color: var(--tinta-fraca); font-size: 0.9rem;
  line-height: 1; user-select: none; padding: 0 0.1rem;
}
.anexo-item:active .anexo-pegar { cursor: grabbing; }
.anexo-setas { display: inline-flex; gap: 0.1rem; }
.anexo-seta {
  background: var(--papel-linha); border: 1px solid var(--pauta-forte);
  border-radius: 2px; cursor: pointer; line-height: 1;
  font-size: 0.7rem; padding: 0.1rem 0.25rem; color: var(--tinta-suave);
}
.anexo-seta:hover:not(:disabled) { border-color: var(--tinta-suave); color: var(--tinta); }
.anexo-seta:disabled { opacity: 0.35; cursor: default; }
.anexo-arrastando { opacity: 0.4; }
.anexo-alvo { box-shadow: inset 0 2px 0 var(--carmim); }

/* Removido não tem alça nem setas; o recuo alinha o nome com os ativos. */
.anexo-removido { padding-left: 3.6rem; }

.anexo-otimizado { color: var(--verde-selo); font-family: var(--mono); }
.anexo-otimizar {
  margin-top: 0.5rem; font-size: 0.8rem;
  text-transform: none; letter-spacing: normal;
}
/* O inline-flex do .filtro-check venceria o [hidden] — só aparece
   havendo imagem a reduzir na fila. */
.anexo-otimizar[hidden] { display: none; }
.anexo-dica-inline { color: var(--tinta-fraca); font-size: 0.74rem; }
.form-ok {
  background: var(--verde-fundo-claro) !important; border-color: var(--verde-selo) !important;
  color: var(--verde-selo) !important;
}
/* O que o documento anexado disse ao formulário: um bloco por
   arquivo — título em negrito no tom do estado, o arquivo em itálico,
   um item por campo e as ações numa linha própria. A caixa é neutra,
   papel, para não parecer erro nem sucesso antes de se ler. */
.form-leitura {
  background: var(--papel-linha); border-color: var(--pauta-forte);
  color: var(--tinta-suave); padding: 0.7rem 0.9rem;
}
.leitura + .leitura {
  margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--pauta);
}
.leitura-titulo b { font-weight: 600; color: var(--tinta); }
.leitura-atencao .leitura-titulo b { color: var(--alerta); }
.leitura-ok .leitura-titulo b { color: var(--verde-selo); }
.leitura-lendo .carga-giro { vertical-align: -0.15em; margin-right: 0.2rem; }
.leitura-itens { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.leitura-itens li { margin: 0.15rem 0; }
.leitura-campo { font-weight: 600; color: var(--tinta); }
.leitura-campo::after { content: ":"; }
.leitura-sep { color: var(--tinta-fraca); margin: 0 0.15rem; }
.leitura-sub {
  margin-top: 0.45rem; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--tinta-fraca);
}
.leitura-notas { color: var(--tinta-suave); }
.leitura-acoes { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.aviso-acao {
  font: inherit; font-size: 0.8rem; padding: 0.25rem 0.7rem;
  border: 1px solid var(--carmim); border-radius: 3px;
  background: var(--carmim); color: var(--sobre-acento); cursor: pointer;
}
.aviso-acao:hover { background: var(--carmim-claro); border-color: var(--carmim-claro); }
.aviso-acao-secundaria {
  background: var(--campo); color: var(--tinta-suave); border-color: var(--pauta-forte);
}
.aviso-acao-secundaria:hover {
  background: var(--papel); color: var(--tinta); border-color: var(--tinta-suave);
}

/* ---------------- Largura da listagem ---------------- */

/* A tabela nunca empurra a página: se faltar espaço, ela rola sozinha. */
.tabela-rolavel { overflow-x: auto; }

/* Textos longos são cortados com reticências; o title guarda o inteiro.
   Um fornecedor de razão social comprida não pode alargar a tabela a
   ponto de empurrar o valor para fora da vista. */
/* O recorte vive no span, não na célula: max-width numa td só vale com
   table-layout fixo, e sem ele a coluna de data colapsa e o texto das
   vizinhas passa por cima. */
.cortar {
  display: inline-block; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.despesas { min-width: 52rem; }

/* Duas linhas em vez de uma reticência precoce: a altura é o recurso
   barato aqui, a largura é que não sobra. */
.despesas .cortar {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.despesas tbody td { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.despesas .historico  { max-width: 30ch; }
.despesas .conta      { max-width: 22ch; }
.despesas .fornecedor { max-width: 22ch; }
/* "Conta corrente" cabe numa linha: em fonte proporcional 14ch é menos
   que 14 caracteres, e faltava pouco. */
.despesas .forma      { max-width: 17ch; }

/* O rótulo do grupo continua numa linha só: ele é contexto, e duas
   linhas de maiúsculas pequenas competiriam com o nome da conta. */
.despesas .conta-grupo {
  display: block; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Menu de ações */
.despesas td.acoes { width: 1%; white-space: nowrap; text-align: center; }
.acoes-botao {
  background: none; border: 1px solid transparent; border-radius: 3px;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: var(--tinta-fraca); padding: 0.1rem 0.45rem;
}
.acoes-botao:hover, .acoes-botao[aria-expanded="true"] {
  border-color: var(--pauta-forte); color: var(--tinta);
  background: var(--papel-linha);
}
.acoes-menu {
  position: fixed; z-index: 80;
  background: var(--papel); border: 1px solid var(--tinta-suave);
  border-radius: 3px; box-shadow: 0 8px 20px var(--sombra);
  padding: 0.25rem; min-width: 12rem;
}
.acoes-menu[hidden] { display: none; }
.acao-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 0.45rem 0.6rem; border-radius: 2px;
  font-family: var(--sans); font-size: 0.85rem; color: var(--tinta);
}
.acao-item:hover { background: var(--papel-linha); }
.acao-item.excluir { color: var(--perigo); }
.acao-item:disabled {
  color: var(--tinta-fraca); cursor: default; background: none;
}

/* ------------------------------------------------------------------ edição na lista */
/* Data, vencimento, histórico e valor se corrigem na própria linha. A
   marca é um sublinhado pontilhado que só aparece com o ponteiro em
   cima: a tabela é para ler, e quatro campos permanentemente
   assinalados em cada linha transformariam o livro num formulário. */
/* inline-block alinhado por baixo, como o .cortar que ele às vezes
   embrulha: envolver um inline-block num inline comum reabre a caixa de
   linha e engorda a altura de todas as linhas da tabela. */
.editavel {
  display: inline-block; vertical-align: bottom; max-width: 100%;
  cursor: text; border-radius: 2px;
  padding: 0 0.15rem; margin: 0 -0.15rem;
}
/* O display acima vence o [hidden] da folha do navegador — mesma
   especificidade, e a do autor manda. Sem esta linha o texto continuava
   em tela ao lado do editor. */
.editavel[hidden] { display: none; }
.despesas tbody tr:hover .editavel { box-shadow: 0 1px 0 var(--pauta-forte); }
.editavel:hover { background: var(--papel-linha); }

/* O editor ocupa a célula inteira: reaproveitar a largura da coluna é o
   que faz a linha não pular de altura nem de posição ao abrir. */
/* Flutua sobre a linha: com as colunas congeladas, o editor pode ser
   mais largo que a célula sem mexer em nada — e o campo de data precisa
   ser, porque o controle nativo do navegador não cabe nos onze
   caracteres de "01/07/2026". A sombra diz que ele está por cima. */
.editavel-campo {
  width: 100%; min-width: 0; box-sizing: border-box;
  position: relative; z-index: 2;
  box-shadow: 0 2px 6px var(--sombra);
  font-family: var(--mono); font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.25rem; margin: -0.1rem 0;
  border: 1px solid var(--pauta-forte); border-radius: 3px;
  background: var(--papel); color: var(--tinta);
}
.editavel-campo:focus { outline: 2px solid var(--carmim); outline-offset: -1px; }
.editavel-campo.campo-invalido { border-color: var(--perigo); }
.editavel-valor { text-align: right; }
.editavel-campo[type="date"] { min-width: 8.6rem; }
/* O histórico é texto corrido, e não número: fonte do texto, e quebra
   em quantas linhas precisar — largura é o que falta na coluna, e
   altura a linha da tabela cede sem custo. */
.editavel-texto {
  font-family: var(--sans); resize: none; overflow: hidden;
  white-space: pre-wrap; line-height: 1.35;
}

/* ------------------------------------------------------------------ formulário de despesa */
/* Pago depois do vencimento: a data avisa sem gritar. */
.fora-prazo { color: var(--carmim); cursor: help; }

/* Conta do balancete: link discreto — a cor é a do texto, o sublinhado
   pontilhado diz que leva a algum lugar (a lista filtrada). */
.balancete-conta {
  color: inherit; text-decoration: underline dotted var(--tinta-fraca);
  text-underline-offset: 3px;
}
.balancete-conta:hover { color: var(--carmim); }
/* Nas receitas, a categoria do plano ("Outras receitas") abre um nível
   a mais sob a especialidade. É um CABEÇALHO, e tem de se parecer com
   um: ocupa a linha inteira (sem casas de valor, que a faziam passar
   por rubrica), vem em versalete sobre um filete e recua meio passo
   entre a especialidade e as contas, que descem mais um. */
tr.balancete-categoria td {
  padding-top: 0.7rem; padding-left: 1.3rem; border-bottom: none;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
tr.balancete-categoria + tr.subgrupo td { border-top: 1px solid var(--pauta); }
tr.balancete-sob-categoria td:first-child { padding-left: 2.6rem; }
/* A receita que sobrepõe um selo no livro: a marca S na coluna dos
   sinais, no molde do D do ERP — e a linha do livro levemente marcada. */
.sinal-selo-marca {
  display: inline-block; min-width: 1.1rem; text-align: center;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 700;
  color: var(--verde-selo); border: 1px solid var(--verde-selo);
  border-radius: 3px; padding: 0 0.15rem; text-decoration: none;
}
.livro-sobreposto td:nth-child(2) { border-left: 2px solid var(--verde-selo); }
.campo-selo input.mono { font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.campo-selo input.mono::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.campo-rot-nota { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.campo-historico textarea, .campo-conta { position: relative; }
.campo-historico, .campo-conta, .campo-fornecedor, .campo-selo { position: relative; }
.sugestao-nome.mono { font-family: var(--mono); letter-spacing: 0.04em; }
.campo-historico textarea {
  font-family: var(--sans); font-size: 0.9rem; text-transform: none;
  letter-spacing: normal; color: var(--tinta);
  padding: 0.35rem 0.5rem; border: 1px solid var(--pauta-forte);
  border-radius: 3px; background: var(--campo); resize: vertical; min-height: 3.2em;
}
.campo-historico textarea:focus { border-color: var(--tinta-suave); outline: none; }

/* O ciclo e o seu parâmetro (dia da semana, n-º dia útil): lado a lado
   quando cabem, o parâmetro na linha de baixo quando não. */
.recorrencia-par { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.recorrencia-par select { min-width: 0; flex: 1 1 8rem; }
.recorrencia-par select[hidden] { display: none; }
/* "n de t": dois campos curtos em mono, apagados sem recorrência. */
.parcelas-par { display: flex; align-items: center; gap: 0.4rem; }
.form-grade .parcelas-par input {
  flex: 1; min-width: 0; text-align: center; font-family: var(--mono);
}
.parcelas-par span { font-size: 0.85rem; color: var(--tinta-suave); text-transform: none; }
.form-grade .campo input:disabled {
  background: var(--papel-linha); color: var(--tinta-fraca); cursor: not-allowed;
}
/* Pago | programado: a data de pagamento some quando o pagamento ainda
   vai acontecer (a data planejada é o vencimento), e a célula diz isso. */
.campo input[type="date"][hidden] { display: none; }
.situacao-nota {
  display: flex; align-items: center; height: 2.3rem;
  font-size: 0.85rem; text-transform: none; letter-spacing: 0;
  color: var(--tinta-suave); font-style: italic; cursor: help;
}
.situacao-nota[hidden] { display: none; }

/* O lembrete mora num post-it: ícone no título, marcado quando há
   recado; o bilhete abre por cima do formulário. */
.lembrete-botao {
  margin-left: 0.6rem; padding: 0.1rem 0.45rem; font-size: 0.95rem;
  background: none; border: 1px dashed var(--pauta-forte);
  border-radius: 3px; cursor: pointer; color: var(--tinta-fraca);
  vertical-align: middle;
}
.lembrete-botao:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.lembrete-botao.tem-recado {
  background: var(--postit); border-color: var(--postit-fio); border-style: solid;
  color: var(--tinta);
}
.postit-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: var(--veu-postit);
  display: flex; align-items: center; justify-content: center;
}
.postit-fundo[hidden] { display: none; }
.postit {
  width: min(340px, 90vw); padding: 1rem 1.1rem 0.9rem;
  background: var(--postit);
  border: 1px solid var(--postit-borda);
  box-shadow: 0 8px 22px var(--sombra-postit);
  transform: rotate(-1deg);
}
.postit-titulo { font-family: var(--serif, serif); font-weight: 700; }
.postit-dica { font-size: 0.72rem; color: var(--postit-tinta); margin: 0.15rem 0 0.6rem; }
.postit textarea {
  width: 100%; min-height: 7em; resize: vertical;
  font-family: var(--sans); font-size: 0.9rem; color: var(--tinta);
  background: transparent; border: none; outline: none;
  border-bottom: 1px dashed var(--postit-fio);
}
.postit-acoes {
  display: flex; justify-content: space-between; margin-top: 0.7rem;
}
.postit-acoes button {
  font-family: var(--sans); font-size: 0.8rem; cursor: pointer;
  background: none; border: none; padding: 0.2rem 0.3rem;
}
.postit-remover { color: var(--carmim); }
.postit-ok { font-weight: 600; color: var(--tinta); }

.recorrente-data {
  font-size: 0.72rem; color: var(--tinta-suave);
  border-left: 1px solid var(--pauta-forte);
  padding-left: 0.45rem; margin-left: 0.2rem;
}

/* acesso e permissões: em /acesso.css, da suíte (veraid). */

@media (max-width: 1000px) {
  .despesas .historico  { max-width: 22ch; }
  .despesas .conta,
  .despesas .conta-grupo,
  .despesas .fornecedor { max-width: 16ch; }
  .despesas .forma      { max-width: 10ch; }
}

/* Tela grande: a lista cresce (.conteudo-largo), e os tetos das colunas
   de texto crescem com ela — senão a tabela só ganhava vão entre as
   colunas, com o histórico quebrando do mesmo jeito. Em dois degraus,
   para o monitor de 1440 e o de 1920; abaixo disso valem os de cima. */
@media (min-width: 1400px) {
  .conteudo-largo .despesas .historico,
  .conteudo-largo .agenda-tabela .historico,
  .conteudo-largo .exportacao-tabela .historico { max-width: 44ch; }
  .conteudo-largo .despesas .conta,
  .conteudo-largo .despesas .conta-grupo,
  .conteudo-largo .despesas .fornecedor,
  .conteudo-largo .agenda-tabela .conta,
  .conteudo-largo .agenda-tabela .fornecedor,
  .conteudo-largo .exportacao-tabela .conta,
  .conteudo-largo .exportacao-tabela .fornecedor { max-width: 28ch; }
  .conteudo-largo .despesas .forma { max-width: 20ch; }
  .conteudo-largo .mapa-nome { max-width: 14rem; }
  .conteudo-largo .arvore-nome { max-width: 32rem; }
}
@media (min-width: 1700px) {
  .conteudo-largo .despesas .historico,
  .conteudo-largo .agenda-tabela .historico,
  .conteudo-largo .exportacao-tabela .historico { max-width: 62ch; }
  .conteudo-largo .despesas .conta,
  .conteudo-largo .despesas .conta-grupo,
  .conteudo-largo .despesas .fornecedor,
  .conteudo-largo .agenda-tabela .conta,
  .conteudo-largo .agenda-tabela .fornecedor,
  .conteudo-largo .exportacao-tabela .conta,
  .conteudo-largo .exportacao-tabela .fornecedor { max-width: 36ch; }
  .conteudo-largo .despesas .forma { max-width: 24ch; }
  .conteudo-largo .mapa-nome { max-width: 18rem; }
  .conteudo-largo .arvore-nome { max-width: 40rem; }
}

@media (max-width: 640px) {
  .cabecalho { flex-wrap: wrap; gap: 0.8rem; }
  .serventia-atual { min-width: 180px; }
  .conteudo { padding: 1rem; }
  .resumo-geral { gap: 1.2rem; }
  .form-grade { grid-template-columns: 1fr; }
  .campo-3, .campo-4, .campo-5, .campo-8 { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao { transition: none; }
}

/* -------------------------------------------------- adição rápida */
/* O véu da janela inteira enquanto se arrasta um arquivo. pointer-events
   desligado: os eventos de drag/drop continuam chegando ao window (é o
   nucleo.js quem os trata), e o véu é só o convite visual. */
.dropzona {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: var(--veu); pointer-events: none;
}
.dropzona[hidden] { display: none; }
.dropzona-aviso {
  background: var(--papel); border: 2px dashed var(--carmim);
  border-radius: 6px; padding: 1.6rem 2.4rem; text-align: center;
  font-size: 1.15rem; color: var(--tinta);
  box-shadow: 0 16px 40px var(--sombra-forte);
}
.dropzona-sub {
  display: block; margin-top: 0.3rem;
  font-size: 0.85rem; color: var(--tinta-suave);
}

/* O avanço da fila — a barra da sincronização, aqui contando
   documentos. Fica no alto da lista, onde a pessoa está olhando quando
   solta o malote do mês; a régua do topo da janela cobre quem já
   desceu para conferir os primeiros cartões. */
.captura-progresso { margin: 0.9rem 0 1rem; }
.captura-progresso .sync-progresso-rotulo {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0 0 0.35rem;
}
.captura-progresso-nome {
  font-family: var(--mono); font-size: 0.78rem; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 20rem;
}
/* A contagem encosta à direita, sobre a barra, e não dança de largura
   a cada documento — algarismo tabular. */
.captura-progresso-conta {
  margin-left: auto; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.captura-item {
  border: 1px solid var(--pauta-forte); border-radius: 4px;
  background: var(--papel); padding: 0.9rem 1.1rem; margin: 0.8rem 0;
  display: flex; gap: 1rem; align-items: stretch;
  position: relative;   /* ancora o × de descartar */
}
/* Cartão ocupado — subindo para leitura ou virando lançamento. Some o
   × junto: descartar o que já está a caminho do servidor não desfaz
   nada, só confunde. */
.captura-item.captura-ocupado { opacity: 0.72; }
.captura-item.captura-ocupado .captura-remover { display: none; }
.captura-remover {
  position: absolute; top: 0.3rem; right: 0.45rem;
  background: none; border: none; font-size: 1.15rem; line-height: 1;
  color: var(--tinta-fraca); cursor: pointer; padding: 0.15rem 0.35rem;
}
.captura-remover:hover { color: var(--carmim); }

/* O grupo sintético dos duplicados: apagado de propósito — não há
   decisão ali, só reconhecimento e descarte. */
.captura-duplicados { background: var(--papel-linha); }
.captura-duplicados-lista {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
}
.captura-duplicados-lista li {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.2rem 0; font-size: 0.88rem; min-width: 0;
}
.captura-duplicados-lista .captura-nome {
  font-weight: 400; overflow-wrap: anywhere;
}
.captura-duplicados-lista .rot {
  color: var(--tinta-suave); white-space: nowrap;
}
.captura-duplicados-lista .captura-resultado { color: var(--carmim); }
.captura-tratar {
  font-size: 0.78rem; color: var(--carmim); text-decoration: none;
  white-space: nowrap;
}
.captura-tratar:hover { text-decoration: underline; }
.captura-remover-linha {
  position: static; margin-left: auto; font-size: 1rem;
}
.captura-item.captura-problema { border-color: var(--alerta); }
.captura-item.captura-feita { opacity: 0.75; }
.captura-corpo { flex: 1; min-width: 0; }
.captura-doc {
  width: min(340px, 42%); min-height: 300px; border: 1px solid
  var(--pauta-forte); border-radius: 3px; background: var(--papel-linha);
}
.captura-cab {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.captura-nome {
  font-size: 0.95rem; font-weight: 600; color: var(--tinta);
  text-decoration: none; overflow-wrap: anywhere;
}
.captura-nome:hover { color: var(--carmim); text-decoration: underline; }
.captura-ver {
  font-size: 0.78rem; color: var(--carmim); text-decoration: none;
}
.captura-ver:hover { text-decoration: underline; }
.captura-candidata {
  margin: 0.5rem 0; display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; font-size: 0.85rem;
}
.captura-candidata .rot { color: var(--tinta-suave); }
.captura-campos { margin-top: 0.6rem; }
.captura-escolher { display: inline-block; cursor: pointer; }
/* O campo pesquisável do alvo ocupa o resto da linha e nunca estoura o
   cartão; a caixa relativa ancora a lista .sugestoes (o dropdown do
   fornecedor, reaproveitado). */
.captura-alvo-caixa {
  position: relative; flex: 1 1 18rem; min-width: 0; display: block;
}
.captura-alvo { width: 100%; }
.captura-resultado { cursor: pointer; color: inherit; text-decoration: none; }
.captura-resultado:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .captura-item { flex-direction: column; }
  .captura-doc { width: 100%; }
}

/* ---------------- Conferência de comprovantes ----------------
   O comprovante no centro, o lançamento ao lado. A grade é visor que
   cresce e barra de largura fixa; a altura da tela vem do JS (CSSOM,
   ajustarAlturaConf), e a barra rola por conta própria com as ações
   presas no pé — o botão de conferir nunca sai de vista. */
.conf-topo { margin-bottom: 0.7rem; }
.conf-controles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem;
}
.conf-lados, .conf-filtros { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* No tom dos atalhos de período: moldura clara, o ativo em carmim. */
.conf-lado, .conf-filtro {
  font-family: var(--sans); font-size: 0.82rem; cursor: pointer;
  padding: 0.35rem 0.7rem; border: 1px solid var(--pauta-forte);
  background: var(--papel); color: var(--tinta-suave); border-radius: 3px;
}
.conf-lado:hover, .conf-filtro:hover { color: var(--tinta); border-color: var(--tinta-suave); }
.conf-lado.ativo, .conf-filtro.ativo {
  background: var(--carmim); border-color: var(--carmim); color: var(--sobre-acento);
}
.conf-contagem { font-family: var(--mono); font-size: 0.75rem; margin-left: 0.2rem; opacity: 0.8; }
.conf-nav { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.conf-seta {
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.55rem;
  border: 1px solid var(--pauta-forte); background: var(--papel); color: var(--tinta);
}
.conf-seta:disabled { color: var(--tinta-fraca); cursor: default; }
.conf-posicao { font-family: var(--mono); font-size: 0.82rem; min-width: 5.5rem; text-align: center; }

.conf-tela {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: 1rem; height: calc(100vh - 13rem); min-height: 480px;
}
.conf-visor {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--pauta-forte); background: var(--papel-linha);
}
/* As abas dos comprovantes. A sequência mora AQUI, não no paginador
   do visor de PDF (que pagina só o documento à vista): a aba ativa tem
   de gritar — carmim, número cheio, e colada ao documento, sem a borda
   de baixo —, e as outras recuam para o fundo. */
/* Quebra de linha, e não rolagem: com overflow, a aba ativa que desce
   sobre o fio abria uma barra de rolagem vertical na faixa. */
.conf-abas {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.25rem;
  padding: 0.4rem 0.4rem 0; border-bottom: 2px solid var(--carmim);
  background: var(--papel-fundo);
}
.conf-aba {
  display: flex; align-items: center; gap: 0.45rem; flex: none;
  max-width: 17rem; padding: 0.3rem 0.65rem 0.3rem 0.4rem; cursor: pointer;
  border: 1px solid var(--pauta-forte); border-bottom: none;
  background: var(--papel-linha); color: var(--tinta-fraca);
  font-family: var(--sans); text-align: left;
}
.conf-aba:hover { color: var(--tinta); background: var(--papel); }
.conf-aba.ativa {
  position: relative; top: 2px;        /* cobre o fio carmim: a aba é do documento */
  padding-top: 0.45rem; padding-bottom: calc(0.3rem + 2px);
  background: var(--campo); color: var(--tinta);
  border-color: var(--carmim); border-width: 2px 2px 0;
  box-shadow: inset 0 3px 0 var(--carmim);
}
.conf-aba-num {
  flex: none; min-width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--pauta-forte); color: var(--tinta-suave); background: var(--papel);
}
.conf-aba.ativa .conf-aba-num { background: var(--carmim); border-color: var(--carmim); color: var(--sobre-acento); }
.conf-aba-texto { display: flex; flex-direction: column; min-width: 0; }
.conf-aba-nome {
  font-size: 0.8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.conf-aba.ativa .conf-aba-nome { font-weight: 600; }
.conf-aba-tipo { font-size: 0.68rem; color: var(--tinta-fraca); }
.conf-documento { flex: 1; min-height: 0; display: flex; }
.conf-pdf { flex: 1; width: 100%; height: 100%; border: 0; background: var(--documento); }
.conf-imagem-caixa { flex: 1; overflow: auto; text-align: center; background: var(--documento); }
.conf-imagem { max-width: 100%; cursor: zoom-in; }
.conf-imagem.conf-imagem-cheia { max-width: none; cursor: zoom-out; }
.conf-visor-pe {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.35rem 0.6rem; font-size: 0.78rem; color: var(--tinta-suave);
  border-top: 1px solid var(--pauta-forte); background: var(--papel);
}
.conf-visor-pe a { color: var(--carmim); }
.conf-visor-pe-varios { justify-content: flex-start; align-items: center; }
.conf-visor-pe-varios .conf-seta { font-size: 0.95rem; padding: 0.05rem 0.45rem; }
.conf-pe-posicao { color: var(--carmim); font-family: var(--mono); font-size: 0.8rem; }
.conf-visor-pe-varios .conf-pe-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.conf-vazio {
  margin: auto; padding: 2rem; max-width: 30rem; text-align: center;
  color: var(--tinta-suave);
}

.conf-barra {
  display: flex; flex-direction: column; gap: 0.55rem; min-height: 0;
  overflow-y: auto; padding: 0.8rem 0.9rem 0;
  border: 1px solid var(--pauta-forte); background: var(--papel);
}
.conf-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.conf-num { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.conf-estado {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border: 1px solid var(--pauta-forte); color: var(--tinta-suave);
}
.conf-estado-conferida { color: var(--verde-selo); border-color: var(--verde-selo); }
.conf-estado-sinalizada { color: var(--perigo); border-color: var(--perigo); }
.conf-bloco {
  border: 1px solid var(--pauta); border-left: 3px solid var(--pauta-forte);
  padding: 0.45rem 0.6rem; background: var(--papel);
}
.conf-bloco-rot {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tinta-fraca);
}
.conf-bloco-rot > span:first-child { flex: 1; }
.conf-bloco-sinalizado { border-left-color: var(--alerta); }
.conf-bloco-diverge { border-color: var(--perigo); border-left-color: var(--perigo); background: var(--perigo-leve); }
.conf-tag { color: var(--alerta); text-transform: none; letter-spacing: normal; }
.conf-marca {
  font-family: var(--sans); font-size: 0.7rem; cursor: pointer;
  padding: 0.05rem 0.4rem; border: 1px solid var(--pauta-forte);
  background: none; color: var(--tinta-suave); text-transform: none; letter-spacing: normal;
}
.conf-marca:hover { border-color: var(--carmim); color: var(--carmim); }
.conf-marca[aria-pressed="true"] { background: var(--carmim); border-color: var(--carmim); color: var(--sobre-acento); }
.conf-linha { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.conf-linha span { color: var(--tinta-suave); }
.conf-valor { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; }
.conf-texto { font-size: 0.9rem; overflow-wrap: anywhere; }
.conf-historico { white-space: pre-wrap; }
.conf-nota { font-size: 0.78rem; color: var(--tinta-suave); overflow-wrap: anywhere; }
.conf-nota-alerta { color: var(--alerta); }
.conf-mono { font-family: var(--mono); }
.conf-bloco-info { border-left-color: var(--pauta); }
.conf-doc-faltante .conf-texto { color: var(--alerta); }
.conf-recado {
  margin-top: 0.35rem; padding: 0.3rem 0.45rem; font-size: 0.82rem;
  background: var(--postit); border: 1px solid var(--postit-borda); overflow-wrap: anywhere;
}
.conf-acoes {
  position: sticky; bottom: 0; margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0 0.8rem; background: var(--papel);
  border-top: 1px solid var(--pauta);
}
.conf-teclas { font-size: 0.75rem; color: var(--tinta-fraca); margin-top: 0.5rem; }

/* A marca do veredito na coluna dos sinais da lista, na casa dela. */
.despesas td.sinais .sinal-conferencia { min-width: 1.5rem; }
a.rotulo-vinc.sinal-conferida { color: var(--verde-selo); border-color: var(--verde-selo); }
a.rotulo-vinc.sinal-conferida:hover { background: var(--verde-selo); color: var(--sobre-acento); }
a.rotulo-vinc.sinal-sinalizada { color: var(--perigo); border-color: var(--perigo); }
a.rotulo-vinc.sinal-sinalizada:hover { background: var(--perigo); color: var(--sobre-acento); }

/* O veredito na linha de quem lançou, no formulário. */
.form-veredito-conferida { color: var(--verde-selo); }
.form-veredito-sinalizada { color: var(--perigo); }

/* As caixas dos aspectos no post-it da sinalização. */
.postit-aspectos { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin: 0.5rem 0 0.2rem; }
.postit-aspecto { font-size: 0.85rem; cursor: pointer; }
.postit-ok:disabled { color: var(--tinta-fraca); cursor: default; }

@media (max-width: 1099px) {
  .conf-tela { grid-template-columns: 1fr; height: auto; }
  .conf-visor { height: 70vh; }
  .conf-barra { overflow: visible; }
  .conf-nav { margin-left: 0; }
}

/* Prestação de contas trimestral do interino ao TJSP: uma tabela-livro
   só, na ordem das linhas da planilha — a casa da linha à esquerda (em
   mono, no tom fraco), o rótulo, um valor por mês e o total. A célula
   que se digita na planilha é copiável (pisca ao copiar); a que a
   planilha calcula vem no tom suave, e as de resultado em negrito; as
   entradas do trimestre (remuneração, provisões) são campos na coluna
   do total. */
.prestacao td.prestacao-celula, .prestacao th.prestacao-celula {
  width: 3.4rem; text-align: left; white-space: nowrap; padding-right: 0.2rem;
}
.prestacao-coluna {
  font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-fraca);
  letter-spacing: 0.02em;
}
.prestacao th .prestacao-coluna { margin-right: 0.15rem; }
.prestacao td.prestacao-valor { cursor: copy; }
.prestacao td.prestacao-valor:hover {
  color: var(--carmim); text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.prestacao td.prestacao-copiado, .livro.prestacao tbody tr:hover td.prestacao-copiado {
  background: var(--verde-fundo-claro); color: var(--verde-selo);
}
.prestacao td.prestacao-total { font-weight: 600; }
.prestacao td.negativo { color: var(--perigo); }
.prestacao td.prestacao-falta { color: var(--tinta-fraca); font-style: italic; }
.prestacao tr.prestacao-calculada td { color: var(--tinta-suave); }
.prestacao tr.prestacao-calculada td.esq { font-style: italic; }
.prestacao tr.prestacao-destaque td { color: var(--tinta); font-weight: 700; font-style: normal; }
.prestacao tr.prestacao-destaque td.negativo { color: var(--perigo); }
.prestacao td.prestacao-entrada { width: 11rem; }
.prestacao td.prestacao-entrada input {
  width: 100%; box-sizing: border-box; text-align: right;
  font: inherit; font-family: var(--mono); font-size: 0.85rem;
  padding: 0.2rem 0.4rem; border: 1px solid var(--pauta-forte);
  border-radius: 3px; background: var(--campo); color: var(--tinta);
}
.prestacao .nota-inline { display: block; margin-top: 0.15rem; }
.prestacao-observacoes:empty { display: none; }
/* O teto do trimestre, sob a tabela: um campo e o botão. */
.prestacao-teto {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem;
  margin: 0.8rem 0 0.2rem; font-size: 0.85rem; color: var(--tinta-suave);
}
.prestacao-teto label { display: flex; flex-direction: column; gap: 0.2rem; }
.prestacao-teto input {
  width: 11rem; text-align: right; font: inherit; font-family: var(--mono);
  font-size: 0.85rem; padding: 0.2rem 0.4rem; border: 1px solid var(--pauta-forte);
  border-radius: 3px; background: var(--campo); color: var(--tinta);
}
/* O campo invisível da cópia pelo comando antigo: fora da tela, nunca
   lido por ninguém. */
.prestacao-copia-oculta { position: fixed; top: -100px; left: 0; opacity: 0; }