/* .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-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;
}

/* 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 + 3):nth-child(-n + 6),
.dc-dre-table td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

/* Linha sintética (grupo do plano de contas, ex. "1.01 CIRCULANTE") — em
   negrito pra se destacar das analíticas que ela agrupa, mesmo padrão visual
   do PDF original (coluna "S/A"). */
.dc-conta-row--sintetica {
  font-weight: 600;
}

.dc-conta-row--sintetica td {
  background: var(--bg-surface-raised);
}

.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;
}

.dc-conta-observacao-btn {
  font-size: 0.78rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.dc-conta-observacao-btn:hover {
  text-decoration: underline;
}

.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);
}

.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;
  color: var(--text-secondary);
  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);
}

.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;
}