/* .dc-* — só usado em dashboard-contabil.html. Reaproveita perfis-acesso.css
   (.pa-table/.pa-tabs/.pa-table-wrap) e components.css (.modal-* / .btn-*),
   mesmo padrão de importacao-plano-saude.css/indicador-desempenho.css. */

.dc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.dc-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
}

/* flex-basis:auto (o padrão) mede o bloco de título+subtítulo pela largura
   que o parágrafo teria numa única linha só, bem maior que o espaço
   realmente disponível — o flex-wrap decide quebrar linha com base nessa
   largura "hipotética" de conteúdo, não na largura já quebrada em várias
   linhas, então o botão era empurrado pra uma linha própria mesmo sobrando
   espaço na tela. flex-basis:0% (via "flex: 1 1 0%") tira o conteúdo dessa
   conta: o bloco passa a ocupar só o espaço que sobra depois do botão. */
.dc-header > *:first-child {
  min-width: 0;
  flex: 1 1 0%;
}

/* flex-shrink:0 mantém o botão/ações no tamanho natural (nunca é ele que
   cede espaço); margin-left:auto é só uma rede de segurança pro caso raro
   de a tela ser estreita demais mesmo assim e a linha quebrar de verdade —
   sem isso, um item sozinho numa linha própria fica alinhado à esquerda
   mesmo com justify-content:space-between (não sobra outro item pra
   "espaçar" contra). */
.dc-header > *:last-child {
  flex-shrink: 0;
  margin-left: auto;
}

.dc-header-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dc-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 70ch;
}

.dc-review-empresa {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dc-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: var(--space-6);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
}

.dc-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.dc-list-pagination__info {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Quantidade de registros do histórico, abaixo da paginação. */
.dc-list-count {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* Ordenação + filtro "estilo Excel" por coluna do histórico (#dc-list-table)
   — mesmo mecanismo/classes de .ips-* em importacao-plano-saude.css, só
   renomeado pro prefixo desta página (não compartilhado entre os dois
   arquivos porque cada tela carrega só o próprio CSS). */
#dc-list-table th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.dc-sort-icon {
  color: var(--text-muted);
  font-size: 0.75rem;
}

#dc-list-table th[data-sort].is-sort-asc .dc-sort-icon,
#dc-list-table th[data-sort].is-sort-desc .dc-sort-icon {
  color: var(--accent);
}

/* .pa-table-wrap normalmente usa overflow:hidden pra arredondar os cantos da
   tabela — dc-list-table-wrap (só esta tabela) sobrescreve pra visible,
   senão o popup de filtro (que precisa "vazar" pra fora do cabeçalho, sobre
   as linhas) seria cortado ali. */
.dc-list-table-wrap {
  overflow: visible;
}

.dc-col-filter {
  position: relative;
  display: inline-block;
  margin-left: var(--space-1);
}

.dc-col-filter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.dc-col-filter__btn:hover {
  color: var(--text-primary);
  background: var(--bg-canvas);
}

.dc-col-filter__btn.is-active {
  color: var(--accent);
}

/* Botão "borracha" no fim do cabeçalho do histórico — limpa de uma vez todos
   os filtros por coluna e volta a ordenação pro padrão (mais recente
   primeiro). */
.dc-list-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.dc-list-reset-btn:hover {
  color: var(--text-primary);
  background: var(--bg-canvas);
}

.dc-col-filter__popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 220px;
  padding: var(--space-3);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: left;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text-primary);
}

.dc-col-filter__popup .checklist-box {
  max-height: 220px;
}

.dc-col-filter__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dc-col-filter__actions button {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  font-size: 0.8rem;
}

.dc-concluida-aviso {
  font-size: 0.85rem;
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.12);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.dc-form {
  max-width: 560px;
}

/* .modal-actions (components.css) nasce alinhado à direita, pensado pro
   rodapé de um modal estreito — aqui "Nova Análise" é a própria página, não
   um modal, e os botões devem ficar junto do campo de arquivo acima deles,
   à esquerda, não soltos do outro lado da página. */
.dc-form .modal-actions {
  justify-content: flex-start;
}

.dc-file-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dc-file-field__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  flex-shrink: 0;
}

.dc-file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dc-file-field__input:focus-visible + .dc-file-field__name {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.dc-file-field__name {
  font-size: 0.85rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.dc-file-field__remove {
  flex-shrink: 0;
}

/* Barra de progresso de "Nova Análise"/"Reprocessar" — mostrada enquanto o
   PDF é processado de forma síncrona no backend (sem fila de tarefas, não há
   um percentual real pra reportar); a subida até ~90% é simulada em JS
   (pidDcIniciarProgressoSimulado) e só fecha os últimos 10% quando a
   resposta volta de verdade, ver dashboard-contabil.js. */
.dc-progress__bar {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-subtle);
  overflow: hidden;
}

.dc-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.2s ease-out;
}

.dc-progress__label {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Log de reprocessamentos anteriores, dentro do modal "Reprocessar análise"
   — reaproveita .dc-obs-resumo__titulo/__count (mesmo "título + contagem em
   pílula" já usado no resumo de observações por aba), só a lista em si é
   nova. Nasce `hidden` (ver dashboard-contabil.js) quando a apuração ainda
   não foi reprocessada nenhuma vez — sem seção vazia sobrando no modal. */
.dc-reprocessar-log {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.dc-reprocessar-log__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
  margin: 0 0 var(--space-2);
}

.dc-reprocessar-log__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.dc-reprocessar-log__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dc-reprocessar-log__item {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.dc-reprocessar-log__item strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Achados */

/* Resumo do topo da aba Observações — donut por severidade (SVG puro, sem
   Chart.js/dependência nova nesta tela interativa, diferente do relatório
   estático "Gerar Dashboard" que já usa Chart.js via CDN) + um card por
   categoria/regra de auditoria com a lista de contas/linhas apontadas, ou
   "Nenhum apontamento encontrado" quando a regra não gerou achado nesta
   apuração. Donut e cards são clicáveis e filtram a lista detalhada logo
   abaixo (ver renderAchadosResumo/pidDcSelecionarSeveridade em
   dashboard-contabil.js). Inspirado numa tela de auditoria de outro sistema
   que o usuário trouxe como referência visual. */
.dc-achados-resumo {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.dc-achados-resumo__chart {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.dc-donut {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

/* Técnica de donut com pathLength="100" — cada segmento é um <circle> com
   stroke-dasharray "pct (100-pct)" e stroke-dashoffset acumulado, contado a
   partir de 25 (um quarto de volta) pra começar às 12h em vez de às 3h.
   pointer-events do SVG só considera pixel realmente pintado (stroke), então
   cada segmento é clicável só na própria fatia, sem precisar de hit-test
   manual por ângulo. */
.dc-donut-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dc-donut-svg__bg {
  fill: none;
  stroke: var(--bg-surface-raised);
  stroke-width: 4;
}

.dc-donut-svg__seg {
  fill: none;
  stroke-width: 4;
  cursor: pointer;
  transition: stroke-width var(--transition-fast);
}

.dc-donut-svg__seg:hover,
.dc-donut-svg__seg.is-active {
  stroke-width: 5.5;
}

.dc-donut__hole {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dc-donut__total {
  font-size: 1.4rem;
  font-weight: 700;
}

.dc-donut__label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dc-donut-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.dc-donut-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: 2px var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dc-donut-legend__item:hover {
  background: var(--bg-surface-raised);
}

.dc-donut-legend__item.is-active {
  color: var(--text-primary);
  font-weight: 700;
}

.dc-donut-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dc-achados-categorias {
  flex: 1 1 640px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  align-content: start;
}

.dc-categoria-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
}

.dc-categoria-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dc-categoria-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dc-categoria-cor);
}

.dc-categoria-card__titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.dc-categoria-card__contagem {
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-raised);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Uma linha por regra dentro do card do grupo — substitui a antiga tabela
   por conta (uma linha por achado com badge de status), que era a maior
   fonte de poluição visual com 10 cards soltos. Detalhe por conta/status
   continua disponível na lista abaixo, ao clicar numa regra. */
.dc-categoria-card__regras {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}

.dc-categoria-card__regra {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.dc-categoria-card__regra:first-child {
  border-top: none;
}

.dc-categoria-card__regra--vazia {
  color: var(--text-muted);
}

.dc-categoria-card__regra--clicavel {
  cursor: pointer;
  transition: color var(--transition-fast);
}

.dc-categoria-card__regra--clicavel:hover {
  color: var(--text-primary);
}

.dc-categoria-card__regra--clicavel.is-active {
  color: var(--text-primary);
  font-weight: 700;
}

.dc-categoria-card__regra-label {
  flex: 1 1 auto;
  min-width: 0;
}

.dc-categoria-card__regra-contagem {
  flex-shrink: 0;
  min-width: 16px;
  text-align: right;
  font-weight: 700;
}

.dc-categoria-card__regra--vazia .dc-categoria-card__regra-contagem {
  font-weight: 400;
}

.dc-achados-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* Aparece só quando um card de categoria está ativo (filtroRegra != null,
   ver renderAchados) — os chips de severidade/status já têm seu próprio
   estado visual (.is-active), mas o filtro por categoria não tem um chip
   equivalente, então esta faixa avisa qual categoria está isolada e oferece
   uma forma explícita de limpar (além de clicar de novo no mesmo card). */
.dc-regra-filtro-ativo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.dc-regra-filtro-limpar {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}

.dc-regra-filtro-limpar:hover {
  text-decoration: underline;
}

.dc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dc-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.dc-chip:hover {
  border-color: var(--accent);
}

.dc-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.dc-achados-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dc-achado-card {
  border: 1px solid var(--border-subtle);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--bg-surface);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dc-achado-card--alta {
  border-left-color: var(--danger);
}

.dc-achado-card--media {
  border-left-color: var(--gold);
}

.dc-achado-card--baixa {
  border-left-color: var(--text-muted);
}

.dc-achado-card__main {
  flex: 1 1 320px;
  min-width: 0;
}

.dc-achado-card__titulo {
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.dc-achado-card__mensagem {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.dc-achado-card__observacao {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
  font-style: italic;
}

.dc-achado-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Expande/recolhe a conta usada no apontamento (achado.conta) — só
   presente em achados vinculados a uma conta específica; regras gerais
   (ex. balanceamento Ativo x Passivo) não têm esse toggle. */
.dc-achado-card__toggle-conta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
}

.dc-achado-card__toggle-conta:hover {
  text-decoration: underline;
}

.dc-achado-card__toggle-conta svg {
  transition: transform var(--transition-fast);
}

.dc-achado-card__toggle-conta.is-expanded svg {
  transform: rotate(90deg);
}

.dc-achado-card__conta {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2) var(--space-4);
}

.dc-achado-card__conta dt {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dc-achado-card__conta dd {
  margin: 2px 0 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* Tabelas de Balancete/DRE — reaproveitam .pa-table, só ajustes de alinhamento
   numérico e da célula de observação (que embute um botão). */

.dc-contas-table td:nth-child(n + 4):nth-child(-n + 7),
.dc-dre-table td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Análise Vertical tem um número variável de colunas de Valor/Variação (uma
   dupla por mês, ver ContabilApuracao.analise_vertical_meses) — diferente
   da DRE (sempre uma única coluna de valor, `td:nth-child(2)` acima), então
   alinha à direita toda coluna que não seja a 1ª (descrição) nem a última
   (observação), em vez de fixar um índice. */
.dc-av-table td:not(:first-child):not(:last-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dc-contas-table td:nth-child(-n + 2) {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Linha sintética (grupo do plano de contas, ex. "1.01 CIRCULANTE") — só
   negrito pra se destacar das analíticas que ela agrupa, mesmo padrão visual
   do PDF original (coluna "S/A"); sem fundo elevado, pra manter a tabela com
   uma cor de fundo única (mesmo visual já usado na DRE, que só usa negrito
   pra linha totalizadora — pedido explícito do usuário pra unificar). */
.dc-conta-row--sintetica {
  font-weight: 600;
}

/* Destaque temporário nas contas recém-reveladas ao expandir um grupo —
   pedido explícito do usuário: ao expandir uma conta, as contas que aparecem
   embaixo dela ganham esse realce; ao expandir uma delas em seguida, o
   realce se move pros filhos dela e as linhas destacadas antes voltam à cor
   padrão (dcContasDestaque/dcDreDestaque em dashboard-contabil.js sempre
   representam só a última leva revelada, nunca acumulam). `.pa-table td` já
   tem `transition: background`, então a troca de destaque anima sozinha.

   Cor por tema via as duas variáveis abaixo, não hardcoded na regra, pra dar
   pra inverter o efeito no tema claro sem duplicar a regra em si. No escuro,
   o destaque usa `--bg-canvas` (o tom mais escuro do tema — pedido explícito
   do usuário depois de ver `--card-bg-hover`, mais claro, nas linhas
   destacadas: queria o oposto, destaque mais escuro e o resto mais claro) e
   as linhas fora do destaque usam `--bg-surface-raised` (mais claro que
   `--bg-canvas`/`--bg-surface`, mas ainda distinto de `--card-bg-hover` —
   senão o hover das linhas não-destacadas ficaria idêntico ao repouso, sem
   nenhum feedback visual). No claro, o efeito já nasceu invertido por pedido
   anterior do usuário — as linhas fora do destaque é que ganham a cor
   (`--accent-rgb` bem sutil), e a leva recém-revelada fica em branco
   (`--bg-surface`), lida como "limpa" em vez de tingida; não mexido nesta
   rodada, só o tema escuro pediu a troca. */
:root {
  --dc-destaque-bg: var(--bg-canvas);
  --dc-row-tint-bg: var(--bg-surface-raised);
}

:root[data-theme="light"] {
  --dc-destaque-bg: var(--bg-surface);
  --dc-row-tint-bg: rgba(var(--accent-rgb), 0.08);
}

.dc-contas-table tbody tr td,
.dc-dre-table tbody tr td {
  background-color: var(--dc-row-tint-bg);
}

/* Especificidade proposital mais alta que a regra acima (duas classes, não
   uma) — senão a regra de tingimento genérico, com mais seletores de tipo
   (tbody+tr+td), venceria por especificidade e o destaque nunca apareceria. */
.dc-contas-table .dc-conta-row--destaque td,
.dc-dre-table .dc-conta-row--destaque td {
  background-color: var(--dc-destaque-bg);
}

/* Foco temporário ao clicar "Ver na tabela" num card de achado (ver
   dcIrParaLinha em dashboard-contabil.js) — um pulso na borda interna da
   linha, não uma troca de `background-color` (deixaria essa regra brigando
   com o tingimento/destaque acima pela mesma propriedade); assim o pulso
   aparece por cima de qualquer estado que a linha já tenha (sintética,
   destaque de grupo expandido etc.), 3 vezes em ~2,1s, e a própria
   `dcIrParaLinha` tira a classe pouco depois (~2,4s) — a animação nunca fica
   presa "ligada". `.dc-av-table` reaproveita porque toda linha da Análise
   Vertical também carrega `.dc-dre-table` (mesma tabela em duas classes, ver
   dashboard-contabil.html). */
@keyframes dcFocoPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.9);
  }
}

.dc-contas-table .dc-conta-row--foco td,
.dc-dre-table .dc-conta-row--foco td {
  animation: dcFocoPulse 700ms ease-in-out 3;
}

.dc-conta-desc-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Recolhe/expande os filhos de uma conta sintética (árvore construída a
   partir do nível de indentação, ver dcContaNivel em dashboard-contabil.js)
   — mesmo espírito de uma matriz do Power BI, pedido explícito do usuário
   pra facilitar a conferência de um balancete com muitas contas. Reaproveitado
   também pela árvore da DRE (renderDre), sobre ContabilLinhaDre.nivel. */
.dc-conta-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.dc-conta-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-surface-raised);
}

.dc-conta-toggle.is-expanded svg {
  transform: rotate(90deg);
}

.dc-conta-toggle svg {
  transition: transform var(--transition-fast);
}

.dc-conta-toggle-spacer {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Botão de observação — sempre o mesmo ícone (pedido explícito do usuário:
   nem "+ Observação" nem o texto da observação em si devem aparecer na
   tabela, poluía a coluna visualmente); só a cor muda pra indicar de
   relance quais linhas já têm observação preenchida (`title`/tooltip
   mostra o texto quando houver). Mesmo padrão dos outros ícones de tabela
   (`.icon-btn`, `perfis-acesso.css`), mas menor, pra caber numa célula sem
   aumentar a altura da linha. */
.dc-conta-observacao-btn {
  position: relative; /* âncora do `.dc-obs-contador` (badge de quantidade) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.dc-conta-observacao-btn:hover {
  background: var(--card-bg-hover);
  color: var(--accent);
}

.dc-conta-observacao-btn--preenchida {
  color: var(--accent);
}

/* Sintética recolhida sem observação própria, mas com observação em algum
   descendente (pedido explícito do usuário: dá pra perceber isso sem
   precisar expandir o grupo) — cor `--gold`, mesmo tom do estado "parcial"
   do botão "validado" (`.dc-conta-validado-btn--parcial` abaixo), pra não
   confundir com `--accent` (observação na própria linha). */
.dc-conta-observacao-btn--descendente {
  color: var(--gold);
}

/* Coluna "Observação" agora tem 2 botões lado a lado (validado + observação)
   — pedido explícito do usuário. Este `display:flex` fica num `<div>` *dentro*
   do `<td>`, nunca no próprio `<td>` — um `<td>` com `display:flex` deixa de
   se comportar como célula de tabela (altura/fundo/borda não acompanham mais
   a linha direito), o que já causou um bug visual real (linha "quebrando"
   antes de chegar nos botões, ver `renderContas()`/`renderDre()`). */
.dc-obs-cell-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Botão de "validado" (check) — cor fixa `--teal`, deliberadamente diferente
   de `--accent` (usado em `.dc-conta-observacao-btn--preenchida` e também a
   cor de tema que o usuário escolhe em "Tema de cores", ver tokens.css), pra
   não confundir "tem observação preenchida" com "conta já conferida". */
.dc-conta-validado-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.dc-conta-validado-btn:hover {
  background: var(--card-bg-hover);
  color: var(--teal);
}

.dc-conta-validado-btn--validado {
  color: var(--teal);
}

/* Estado "parcial" do tri-state de uma conta/linha sintética (com filhos) —
   pedido explícito do usuário: amarelo enquanto nem todo descendente estiver
   validado, mesmo depois de marcar a própria sintética. Vira
   `--validado` (verde/teal) assim que 100% dos descendentes estiverem
   validados — ver dcEstadoValidacaoGrupo()/dcValidadoInfo() em
   dashboard-contabil.js. */
.dc-conta-validado-btn--parcial {
  color: var(--gold);
}

.dc-conta-validado-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

/* Tooltip customizado no visual do Portal — os badges abaixo (alterada no
   reprocessamento, fonte de PDF atípica) precisavam de um texto mais longo,
   às vezes com quebra de linha própria (ex. "valor antes do
   reprocessamento" numa segunda linha), do que `.info-tooltip__text`
   (components.css) suporta — aquele é `white-space:nowrap`, pensado só pro
   rótulo curto "Mais informações". `tabindex="0"` no gatilho + `:hover`/
   `:focus-visible` mostram o tooltip também via teclado, não só no hover do
   mouse. `white-space: pre-line` preserva um `\n` deliberado no texto
   (quebra de linha própria) e ainda assim quebra/envolve o resto
   normalmente pela largura máxima.

   `position: fixed` (não `absolute` como `.info-tooltip__text`) — os badges
   deste pacote vivem dentro de `.pa-table-wrap`, que tem `overflow:hidden`
   pra arredondar o canto da tabela (perfis-acesso.css); um tooltip
   `absolute` cortava (confirmado pelo usuário: balão cortado em cima da
   primeira linha, cortado na lateral perto da borda da tabela). `fixed`
   posiciona relativo à viewport, escapando desse corte — `top`/`left` são
   calculados em JS (`pidDcPosicionaTooltip()`, dashboard-contabil.js, no
   `mouseenter`/`focus` do gatilho) e clampados pra nunca sair da tela nem
   pra cima nem pros lados; sem JS nenhum, ficaria sempre num canto fixo da
   tela, errado pra qualquer badge que não esteja bem naquele ponto. */
.dc-hover-tooltip {
  position: relative;
  display: inline-flex;
}

.dc-hover-tooltip__gatilho {
  display: inline-flex;
}

.dc-hover-tooltip__texto {
  position: fixed;
  width: max-content;
  max-width: 280px;
  white-space: pre-line;
  text-align: left;
  background: var(--bg-surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 0.75rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 20;
}

.dc-hover-tooltip__gatilho:hover + .dc-hover-tooltip__texto,
.dc-hover-tooltip__gatilho:focus-visible + .dc-hover-tooltip__texto {
  opacity: 1;
}

/* Badge de alerta — conta/linha que mudou no último reprocessamento
   (`alterada_reprocessamento`, ver "Reprocessar" no CLAUDE.md do pacote).
   Puramente informativo (não é um botão, só o gatilho de um
   `.dc-hover-tooltip` acima) — continua visível mesmo depois do contador
   marcar a conta/linha como validada de novo (pedido explícito do usuário:
   precisa dar pra identificar quais itens já foram reprocessados E
   revalidados), só troca de cor via `--validada` abaixo; só some de vez num
   próximo reprocessamento sem essa mudança específica. Cor `--danger`
   (pendente), igual à severidade "alta" dos achados — chama mais atenção
   que o dourado já usado pelo estado "parcial" do validado. */
.dc-conta-alterada-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--danger);
}

/* Mesmo verde de .status-pill--ativo (perfis-acesso.css) — "já revisado e
   confirmado", não é um token de tema, é o hex fixo já reaproveitado em
   outras telas pro mesmo significado. */
.dc-conta-alterada-badge--validada {
  color: #2f9e6e;
}

/* Aviso de "fonte de PDF atípica" (ContabilApuracao.fonte_pdf_atipica) ao
   lado do nome da empresa — mesmo espírito de .dc-conta-alterada-badge
   (gatilho de um `.dc-hover-tooltip`, não é um botão), cor `--gold` porque
   é um aviso de atenção, não um alerta de severidade alta como o badge de
   alteração acima. */
.dc-fonte-atipica-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--gold);
}

/* Editor inline de observação — substitui o antigo modal `#dc-observacao-modal`
   (pedido explícito do usuário, pra não perder o texto por causa de um
   clique acidental fora de um popup): uma linha extra logo abaixo da conta/
   linha, dentro da própria tabela. Fundo distinto do tingimento padrão das
   linhas (ver `--dc-row-tint-bg`/`--dc-destaque-bg` acima) — 2 classes,
   maior especificidade que a regra genérica de 1 classe + 3 seletores de
   tipo, então não precisa se preocupar com a ordem de declaração. */
.dc-contas-table .dc-obs-edit-row td,
.dc-dre-table .dc-obs-edit-row td {
  background-color: var(--bg-surface);
}

.dc-obs-edit-row td {
  padding: var(--space-4);
}

/* Este `<td>` é sempre o único da linha (colspan cobre todas as colunas),
   então ele é ao mesmo tempo "primeiro" e "último" filho pro seletor CSS —
   herdaria `text-align:right` de `.pa-table td:last-child` (bug de
   alinhamento já visto no painel de detalhe de outras telas) E a cor
   apagada de `.dc-contas-table td:nth-child(-n + 2)` (pensada pras colunas
   de conta/classificação, `--text-muted`), deixando o texto da thread de
   observações "apagado" mesmo já sem cor própria nele. Precisa do seletor
   com 2 classes (não só `.dc-obs-edit-row td`) pra empatar/ganhar em
   especificidade das duas regras acima (a versão de 1 classe perdia); força
   a esquerda (é texto corrido, não valor numérico) e `--text-primary`
   (texto principal do tema, não um branco fixo — continua legível nos dois
   temas) como cor herdada por padrão pra tudo que não define a própria. */
.pa-table .dc-obs-edit-row td {
  text-align: left;
  color: var(--text-primary);
}

.dc-obs-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dc-obs-edit .modal-field {
  margin: 0;
}

.dc-obs-edit .modal-actions {
  margin-top: 0;
}

/* ---- Thread de observações (histórico por empresa+conta) ----
   O painel inline deixou de ser "um textarea com o texto da linha" e virou
   uma thread: as observações vigentes daquela conta (as desta competência e
   as herdadas de competências anteriores, ver `ContabilObservacao` no
   backend) em cima, o campo de observação nova embaixo. Observação herdada
   fica visualmente mais apagada e sem os botões de editar/excluir — é
   registro histórico, só dá pra encerrar ou responder com uma nova. */
.dc-obs-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dc-obs-thread__vazio {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dc-obs-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--bg-surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dc-obs-item--historica {
  border-left: 3px solid var(--accent);
}

.dc-obs-item--encerrada {
  opacity: 0.72;
}

.dc-obs-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.dc-obs-item__assinatura {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dc-obs-item__selos {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.dc-obs-item__acoes {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.dc-obs-item__texto {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
}

.dc-obs-selo {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--card-bg-hover);
  color: var(--text-secondary);
}

.dc-obs-selo--historica {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

.dc-obs-selo--encerrada {
  background: rgba(var(--gold-rgb), 0.18);
  color: var(--gold);
}

.dc-obs-selo--cliente {
  background: rgba(var(--teal-rgb), 0.18);
  color: var(--teal);
}

.dc-obs-selo--editada {
  background: rgba(var(--coral-rgb), 0.18);
  color: var(--coral);
}

.dc-obs-historico-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 50vh;
  overflow-y: auto;
}

.dc-obs-historico-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--card-bg-hover);
}

.dc-obs-historico-item__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dc-obs-historico-item__texto {
  margin: 0;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.dc-obs-historico-item__texto--anterior {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--danger-rgb), 0.6);
}

.dc-obs-nova {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border-subtle);
}

/* Contagem de observações vigentes ao lado do ícone da coluna "Observação" —
   o texto em si nunca aparece na tabela (ver `.dc-conta-observacao-btn`),
   então o número é o único sinal de "quantas coisas já foram anotadas aqui". */
.dc-obs-contador {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.dc-obs-filtros {
  margin-bottom: var(--space-3);
}

/* Resumo de observações no final do Balancete/DRE (pedido explícito do
   usuário) — reaproveita `.dc-dash-obs-list`/`.dc-dash-obs*` (já definidas
   mais abaixo) pros itens da lista, só a moldura da seção é nova. */
.dc-obs-resumo {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.dc-obs-resumo__titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}

.dc-obs-resumo__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.dc-dre-row--totalizador td {
  font-weight: 700;
}

.dc-dre-row td:first-child {
  white-space: nowrap;
}

/* Selos de severidade/status do achado — pequenos o bastante pra ficar ao
   lado do título do card, sem depender de .status-pill (definida em
   nao-conformidades.css, não carregado nesta página). */

.dc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dc-badge--alta {
  color: var(--danger);
  background: rgba(var(--danger-rgb), 0.14);
}

.dc-badge--media {
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.18);
}

.dc-badge--baixa {
  color: var(--text-muted);
  background: var(--bg-surface-raised);
}

.dc-badge--tratado {
  color: #2f9e6e;
  background: rgba(47, 158, 110, 0.14);
}

.dc-badge--ignorado {
  color: var(--text-muted);
  background: var(--bg-surface-raised);
}

.dc-badge--pendente {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
}

/* ---- Aba "Dashboard" (pré-visualização do relatório "Gerar Dashboard") ---- */

.dc-dash-intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 80ch;
  margin-bottom: var(--space-5);
}

.dc-dash-section {
  margin-bottom: var(--space-6);
}

.dc-dash-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.dc-dash-section__titulo {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.dc-dash-section__header .dc-dash-section__titulo {
  margin-bottom: 0;
}

.dc-dash-section__dica {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Resumo do Fechamento — editor de texto rico (mesmo padrão de
   .ag-richtext em acessos-gerais.css/.ajuda-modal__editor em
   components.css: contenteditable + colar/arrastar imagem, ver
   pidDcInicializaResumoFechamentoEditor() em dashboard-contabil.js).
   Duplicado por tela de propósito, mesmo espírito dos outros dois — não é
   um componente compartilhado no projeto. */
.dc-dash-resumo-fechamento {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.dc-dash-resumo-fechamento__titulo {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.dc-dash-resumo-fechamento__dica {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

.dc-dash-richtext {
  min-height: 120px;
  max-height: 340px;
  overflow-y: auto;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.5;
}

.dc-dash-richtext:focus {
  outline: none;
  border-color: var(--accent);
}

.dc-dash-richtext:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
}

.dc-dash-richtext img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

.dc-dash-richtext[contenteditable="false"] {
  cursor: default;
  opacity: 0.85;
}

.dc-dash-resumo-fechamento__acoes {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.dc-dash-resumo-fechamento__status {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dc-dash-grupo {
  margin-bottom: var(--space-4);
}

.dc-dash-grupo__titulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
}

.dc-dash-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}

.dc-dash-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--bg-surface);
  cursor: pointer;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.dc-dash-card:hover {
  border-color: var(--accent);
}

.dc-dash-card.is-oculto {
  opacity: 0.5;
}

.dc-dash-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dc-dash-card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.dc-dash-card__label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dc-dash-card__valor {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dc-dash-obs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dc-dash-obs {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  transition: opacity var(--transition-fast);
}

.dc-dash-obs.is-oculto {
  opacity: 0.5;
}

.dc-dash-obs__info {
  min-width: 0;
}

.dc-dash-obs__origem {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin-right: var(--space-2);
}

.dc-dash-obs__referencia {
  font-size: 0.82rem;
  font-weight: 600;
}

.dc-dash-obs__texto {
  margin-top: var(--space-1);
  font-size: 0.82rem;
  /* Era `--text-secondary` (cinza) — pedido explícito do usuário: no tema
     escuro o texto da observação em si ficava "apagado"/difícil de ler
     contra o fundo do card. `--text-primary` é o token de texto principal
     (branco no escuro, escuro no claro), não um branco fixo — continua
     legível nos dois temas. */
  color: var(--text-primary);
  white-space: pre-wrap;
}

.dc-dash-toggle-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.dc-dash-toggle-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Modal "Ver fórmula" (#dc-indicador-formula-modal) */

.dc-ind-formula-box {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
}

.dc-ind-formula-box__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.dc-ind-formula-box p {
  font-size: 0.88rem;
  font-family: "DM Mono", monospace;
  color: var(--text-primary);
}

/* Modal "Novo/Editar Indicador" (#dc-indicador-modal) — construtor de
   componentes: cada .dc-ind-componente é um termo da fórmula (chave + tipo
   + o "picker" certo pro tipo, ver pidDcRenderComponentePicker em
   dashboard-contabil.js), reaproveitando .checklist-box/.checklist-item/
   .checklist-search de components.css pros pickers de conta/linha da DRE. */

.dc-ind-componentes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: 0.85rem;
  font-weight: 600;
}

.dc-ind-componente {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--bg-canvas);
  margin-bottom: var(--space-3);
}

/* Não reaproveita .modal-field-row (grid de exatamente 2 colunas,
   components.css) porque esta linha tem um 3º elemento (o botão de
   remover) que precisa ficar ao lado dos dois campos, não quebrar pra uma
   "3ª coluna" inexistente. */
.dc-ind-componente__linha {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.dc-ind-componente__linha .modal-field {
  flex: 1;
  min-width: 0;
}

.dc-ind-comp-chave,
.dc-ind-comp-tipo,
.dc-ind-comp-indicador {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.dc-ind-comp-remover {
  flex-shrink: 0;
  margin-bottom: 2px;
}

.dc-ind-comp-picker {
  margin-top: var(--space-2);
}

/* Único scroll de verdade dentro do construtor de componentes — o
   checklist de contas/linhas da DRE em si (até ~150 itens). Antes havia
   TAMBÉM um scroll na lista de componentes por fora (.dc-ind-componentes-lista,
   320px) — dois scrolls aninhados deixavam a área útil minúscula, a ponto
   de nem um componente inteiro caber sem rolar duas vezes (relatado pelo
   usuário). Removido o scroll externo: agora só o modal inteiro rola
   (`.modal-card` já tem `max-height`/`overflow-y`, ver components.css), e
   este checklist, bem maior que antes, é o único scroll aninhado que
   sobra — genuinamente necessário, já que uma apuração real tem ~100-150
   contas/linhas. */
.dc-ind-comp-picker .checklist-box {
  max-height: 260px;
}

.dc-ind-formula-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Seletor de ícone do indicador (modal "Novo/Editar Indicador") — cada
   botão já é o próprio preview (mesmo ícone que aparece no card do
   relatório "Gerar Dashboard", ver dashboard-contabil-relatorio.html);
   `.is-selecionado` é a única indicação de estado, sem nenhum input
   escondido visível — o valor real fica em memória (dcIndicadorIconeSelecionado
   em dashboard-contabil.js) até o Salvar. */
.dc-ind-icone-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dc-ind-icone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.dc-ind-icone-btn:hover {
  background: var(--card-bg-hover);
  color: var(--text-primary);
}

.dc-ind-icone-btn.is-selecionado {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

.dc-ind-componentes-lista {
  margin-bottom: var(--space-2);
}

/* Resultado de "Calcular com esta apuração" (#dc-indicador-calcular-btn) —
   mostra o valor resolvido de cada componente + o resultado final da
   fórmula, contra a apuração aberta agora, sem salvar nada. Pedido
   explícito do usuário: conferir se a fórmula pegou a conta certa antes
   de confirmar. */
.dc-ind-preview {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
}

.dc-ind-preview__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.85rem;
  font-family: "DM Mono", monospace;
}

.dc-ind-preview__lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.dc-ind-preview__lista li:last-child {
  border-bottom: none;
}

.dc-ind-preview__lista li span:first-child {
  color: var(--text-muted);
}

.dc-ind-preview__lista li span:last-child {
  font-weight: 600;
  color: var(--text-primary);
}

.dc-ind-preview__resultado {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
}

.dc-ind-preview__resultado strong {
  color: var(--accent);
}

.dc-ind-preview__erro {
  font-size: 0.85rem;
  color: var(--danger);
}

.dc-ind-preview__carregando {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Modal "Gerenciar Indicadores" (#dc-indicadores-hub-modal) — lista todo
   indicador personalizado (padrão e não padrão), pra visualizar/editar
   mesmo os que não estão ativos nesta apuração agora (ver
   pidDcRenderHubIndicadores em dashboard-contabil.js). */

.dc-ind-hub-secao {
  margin-bottom: var(--space-4);
}

.dc-ind-hub-secao__titulo {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.dc-ind-hub-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 240px;
  overflow-y: auto;
}

.dc-ind-hub-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-canvas);
}

.dc-ind-hub-item__ativo {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.dc-ind-hub-item__spacer {
  width: 16px;
  flex-shrink: 0;
}

/* Reset de <button> pra parecer texto clicável — abre "Ver fórmula" (ver
   data-dc-hub-ver em dashboard-contabil.js). */
.dc-ind-hub-item__nome {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-ind-hub-item__nome:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Botão flutuante "voltar ao topo" — fixo na viewport (não escopado a
   nenhuma aba), aparece via JS (dashboard-contabil.js, evento `scroll`)
   só depois que o início da página já saiu de vista. `bottom`/`right`
   dão folga suficiente pra não sobrepor nenhum outro elemento fixo da
   página (não há nenhum hoje, mas evita colidir se um for adicionado). */
.dc-back-to-top-btn {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 20;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background var(--transition-fast), transform 100ms ease;
}

.dc-back-to-top-btn:hover {
  background: var(--accent-hover);
}

.dc-back-to-top-btn:active {
  transform: scale(0.92);
}

/* Cabeçalho de tabela com o botão "Restaurar formatação padrão" (Balancete/
   DRE/Análise Vertical) — a última coluna (Observação) vira um flex pra
   manter o rótulo à esquerda e o botão colado na borda direita da linha de
   cabeçalho, sem precisar de uma coluna extra (e sem mexer nos `colspan`
   das linhas vazias/observação, que continuam contando só as colunas de
   dado). */
.dc-th-linha {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* "Expandir tudo" fica na PRIMEIRA coluna, antes do rótulo (o rótulo é que
   vai pra direita do botão), ao contrário de "Restaurar formatação", que
   fica na última coluna com o botão empurrado pra borda direita. */
.dc-th-linha--inicio {
  justify-content: flex-start;
}

/* Menor que o .icon-btn padrão (38px) — vive dentro de uma célula de
   cabeçalho de tabela, não pode competir em tamanho com o texto da coluna. */
.dc-reset-formatacao-btn,
.dc-recolher-grupos-btn {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-muted);
}