/* =====================================================================
   ds-planilha.css — /dpmg/planilha/planilha
   =====================================================================
   `.card`, `.btn`, `.form-control`, `.form-check`, `.form-group`,
   `.helper-text`/`.form-text`, `.row`/`.col-*`, `.input-group` já vêm
   prontos de ds-compat.css; `.main-container`/`.empty-state`/`.table-wrap`
   vêm de ds-shell.css. Nada disso é repetido aqui.

   O partial `_planilha_conteudo.html` é compartilhado com a variante
   pública (`planilha_sem_menu.html`, fora de escopo) e abre com a macro
   `pub.hero()` — que emite `.hero-section`, sem CSS nesta pilha nova
   (a folha pública, dpmg-publico-shell.css, está fora do escopo desta
   migração). Por isso o hero entra aqui: é a única classe do topo da
   página restrita sem casca ainda. */

.hero-section {
  background: linear-gradient(155deg, var(--ds-green-700), var(--ds-green-900));
  color: var(--ds-on-brand);
  padding: var(--ds-space-8) 0 var(--ds-space-7);
  box-shadow: var(--ds-shadow-navbar);
}
.hero-section h1 {
  margin: 0 0 var(--ds-space-2);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  color: var(--ds-on-brand);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  line-height: var(--ds-leading-tight);
}
.hero-section p {
  margin: 0;
  max-width: 74ch;
  color: var(--ds-text-muted-on-brand);
  font-size: var(--ds-text-base);
}
.hero-section .section-icon { flex-shrink: 0; }
@media (max-width: 480px) {
  .hero-section { padding: var(--ds-space-6) 0; }
  .hero-section h1 { font-size: var(--ds-text-xl); }
}

/* =====================================================================
   LAYOUT — etapas à esquerda, resumo ao lado (propostas A + C)
   =====================================================================
   O cartão principal NÃO usa `.card > .card-header` de propósito: essa é a
   estrutura que dpmg-form-secoes.js varre para numerar seções e montar o
   índice em chips, e aqui a navegação é a das etapas. O filete dourado de
   seção de formulário é refeito à mão no `.planilha-principal`.

   Sem JS, os quatro painéis aparecem empilhados e o resumo fica oculto
   (`hidden` no markup); as classes `--etapas`/`--resumo` só entram quando
   dpmg-planilha.js liga cada parte. */
.planilha-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-6);
  align-items: start;
}
.planilha-layout--resumo {
  grid-template-columns: minmax(0, 1fr) 340px;
}
@media (max-width: 991px) {
  .planilha-layout--resumo { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Formato: completo × simplificado (controle segmentado) ---- */
.planilha-formato {
  border: 0;
  margin: 0 0 var(--ds-space-5);
  padding: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-4);
}
.planilha-formato__legenda {
  float: left; /* legend não participa do flex sem isso */
  padding: 0;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
}
.planilha-formato__opcoes {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-sunken);
}
@media (max-width: 600px) {
  .planilha-formato__opcoes { display: grid; width: 100%; }
}
.planilha-formato__opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: var(--ds-t-color), box-shadow var(--ds-duration-fast) var(--ds-ease);
}
.planilha-formato__opcao input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.planilha-formato__opcao:hover { color: var(--ds-text); }
.planilha-formato__opcao:has(input:checked) {
  background: var(--ds-surface);
  color: var(--ds-green-900);
  box-shadow: var(--ds-shadow-xs), inset 0 0 0 1px var(--ds-green-700);
}
.planilha-formato__opcao:has(input:focus-visible) {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
}
.planilha-formato__nome { font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); }
.planilha-formato__desc { font-size: var(--ds-text-xs); }

.planilha-principal {
  min-width: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-left: 4px solid var(--ds-gold-500);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}

/* ---- Barra de etapas ---- */
.planilha-etapas { border-bottom: 1px solid var(--ds-border); }
.planilha-etapas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.planilha-etapas__item {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 0;
  background: transparent;
  color: var(--ds-text-muted);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: var(--ds-t-color);
}
.planilha-etapas__item:hover { background: var(--ds-green-50); color: var(--ds-text); }
.planilha-etapas__item:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: calc(-1 * var(--ds-focus-outline-offset) - 2px);
}
.planilha-etapas__num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-border-control);
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.planilha-etapas__texto { display: flex; flex-direction: column; min-width: 0; }
.planilha-etapas__nome { font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); }
.planilha-etapas__dica { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.planilha-etapas__item.is-atual {
  color: var(--ds-green-900);
  box-shadow: inset 0 -3px 0 var(--ds-green-700);
}
.planilha-etapas__item.is-atual .planilha-etapas__num {
  background: var(--ds-green-700);
  border-color: var(--ds-green-700);
  color: var(--ds-on-brand);
}
.planilha-etapas__item.is-feita .planilha-etapas__num {
  background: var(--ds-green-100);
  border-color: var(--ds-green-500);
  color: var(--ds-green-900);
}
/* Em tela estreita some a dica e, abaixo de 600px, o nome — fica só o
   número, com o nome da etapa atual lido no título do painel logo abaixo. */
@media (max-width: 991px) {
  .planilha-etapas__dica { display: none; }
}
@media (max-width: 600px) {
  .planilha-etapas__item { justify-content: center; padding-inline: var(--ds-space-2); }
  .planilha-etapas__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- Painel de cada etapa ---- */
.planilha-painel {
  padding: var(--ds-space-6) var(--ds-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  min-width: 0;
}
/* Sem JS os painéis ficam empilhados: um fio separa um do outro. */
.planilha-layout:not(.planilha-layout--etapas) .planilha-painel + .planilha-painel {
  border-top: 1px solid var(--ds-border);
}
@media (max-width: 600px) {
  .planilha-painel { padding: var(--ds-space-5) var(--ds-space-4); }
}
.planilha-painel__cabecalho { display: flex; flex-direction: column; gap: var(--ds-space-1); }
.planilha-painel__titulo {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
  line-height: var(--ds-leading-tight);
}
.planilha-painel__titulo:focus { outline: none; }
.planilha-painel__titulo:focus-visible { outline: var(--ds-focus-outline); outline-offset: var(--ds-focus-outline-offset); }
.planilha-painel__texto { color: var(--ds-text-muted); font-size: var(--ds-text-sm); max-width: 70ch; }
.planilha-painel .form-group { margin-bottom: 0; }
.planilha-painel__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-3);
  padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border);
}

.planilha-campo-medio { max-width: 360px; }

/* ---- Escolha do modelo ---- */
.planilha-modelos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-4); }
.planilha-modelos__rotulo {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-2);
}
.planilha-modelos__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-3);
}
@media (max-width: 700px) {
  .planilha-modelos__grade { grid-template-columns: minmax(0, 1fr); }
}
.planilha-modelos .planilha-option { margin-bottom: 0; height: 100%; }
.planilha-option__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
.planilha-option__selo {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  padding: 1px var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: var(--ds-success-bg);
  color: var(--ds-success-text);
}
.planilha-option__uso { margin-top: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-text); }
.planilha-option__meta { margin-top: var(--ds-space-1); font-size: var(--ds-text-xs); color: var(--ds-text-muted); }

/* ---- Período, base e valores ---- */
.planilha-periodo,
.planilha-valores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-4) var(--ds-space-5);
}
@media (max-width: 700px) {
  .planilha-periodo, .planilha-valores { grid-template-columns: minmax(0, 1fr); }
}
.planilha-mes-ano {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--ds-space-2);
}
/* mascara.js cria um .invalid-feedback depois de CADA campo, inclusive dos
   selects de mês/ano que aqui são células de grade. Vazio, ele some; com
   mensagem, desce para uma linha própria abaixo dos dois selects. */
.planilha-pagina .invalid-feedback:empty { display: none; }
.planilha-mes-ano > .invalid-feedback { grid-column: 1 / -1; order: 1; }
.planilha-escolha { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-6); }
.planilha-escolha .form-check + .form-check { margin-top: 0; }
.planilha-escolha__desc { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
fieldset#grupo_base_calculo { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Linha de um período/pagamento: início, fim e valor. Cada coluna precisa
   de ~220px para o par mês/ano não cortar "Novembro"; o que não couber
   desce para a linha de baixo. */
.bloco-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ds-space-3) var(--ds-space-4);
  align-items: end;
}
/* Campo com prefixo (R$, %): base 0 faz o campo encolher para caber ao
   lado do prefixo — com a base automática de ds-compat.css, numa coluna
   estreita o campo quebrava para baixo do "R$". */
.planilha-pagina .input-group > .form-control { flex-basis: 0; }
.planilha-blocos__ajuda { margin: 0 0 var(--ds-space-3); }
.planilha-pagamentos__ajuda { margin: 0 0 var(--ds-space-3); }

/* ---- Acréscimos: uma linha por opção ---- */
.planilha-opcoes { display: flex; flex-direction: column; }
.planilha-opcoes__item {
  padding-block: var(--ds-space-2);
  border-bottom: 1px solid var(--ds-border);
}
.planilha-opcoes__item:first-child { border-top: 1px solid var(--ds-border); }
.planilha-nota {
  display: flex;
  gap: var(--ds-space-2);
  align-items: flex-start;
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-info-bg);
  color: var(--ds-info-text);
  font-size: var(--ds-text-sm);
}
.planilha-nota svg { flex-shrink: 0; margin-top: 2px; }
.planilha-info-adicionais {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-4);
}
@media (max-width: 700px) {
  .planilha-info-adicionais { grid-template-columns: minmax(0, 1fr); }
}

.planilha-acoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}
.planilha-acoes .btn[type="submit"] { margin-left: auto; }

/* ---- Resumo ao lado ---- */
.planilha-resumo {
  position: sticky;
  top: calc(var(--ds-navbar-height) + var(--ds-space-4));
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
}
@media (max-width: 991px) {
  .planilha-resumo { position: static; }
}
.planilha-resumo__topo {
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
}
.planilha-resumo__kicker {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  color: var(--ds-gold-ink);
}
.planilha-resumo__modelo {
  margin-top: var(--ds-space-1);
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
  line-height: var(--ds-leading-tight);
}
.planilha-resumo__periodo { margin-top: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.planilha-resumo__periodo:empty { display: none; }
.planilha-resumo__corpo {
  padding: var(--ds-space-4) var(--ds-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  transition: opacity var(--ds-duration-fast) var(--ds-ease);
}
.planilha-resumo.is-carregando .planilha-resumo__corpo { opacity: 0.55; }
.planilha-resumo__pendente { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.planilha-resumo__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-space-2) var(--ds-space-3);
  margin: 0;
  font-size: var(--ds-text-sm);
}
.planilha-resumo__lista dt { margin: 0; color: var(--ds-text); }
.planilha-resumo__lista dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.planilha-resumo__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-space-2);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-border);
}
.planilha-resumo__total span { font-weight: var(--ds-weight-semibold); color: var(--ds-green-900); }
.planilha-resumo__total strong {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-green-900);
  font-variant-numeric: tabular-nums;
}
.planilha-resumo__nota { font-size: var(--ds-text-xs); color: var(--ds-text-muted); }
.planilha-resumo__acoes { padding: 0 var(--ds-space-5) var(--ds-space-5); }
.planilha-resumo__acoes .btn { width: 100%; }

/* ---- Cartão de escolha (rádio) — tipo de planilha ----
   `.selected` é escrito por selecionarPlanilha() em dpmg-planilha.js: é
   estado, não decoração — por isso a régua de contrato exige a classe. */
.planilha-option {
  border: 1px solid var(--ds-border-control);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  padding: var(--ds-space-3) var(--ds-space-4);
  margin-bottom: var(--ds-space-2);
  cursor: pointer;
  min-width: 0;
  transition: var(--ds-t-color), box-shadow var(--ds-duration-fast) var(--ds-ease);
}
.planilha-option:hover { border-color: var(--ds-green-500); background: var(--ds-green-50); }
.planilha-option.selected {
  border-color: var(--ds-green-700);
  background: var(--ds-green-50);
  box-shadow: inset 3px 0 0 var(--ds-green-700);
}
.planilha-option .form-check { margin: 0; }
.planilha-option .form-check-label strong { color: var(--ds-green-900); }
.planilha-option:has(.form-check-input:focus-visible) {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
}

/* ---- Campo somente-leitura (início do período, calculado a partir do
   período global) ---- */
.inicio-readonly {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--ds-space-3);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-sunken);
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  width: fit-content;
}

/* ---- Cartão de período (planilhas cíveis) ---- */
.bloco-card {
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-alt);
  padding: var(--ds-space-4);
  margin-bottom: var(--ds-space-3);
  min-width: 0;
}
.bloco-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}
.bloco-titulo {
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
  font-size: var(--ds-text-base);
}
.btn-remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-danger-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-danger-text);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  transition: var(--ds-t-color);
}
.btn-remover:hover { background: var(--ds-danger-bg); }

/* Botão "Adicionar mais um período": largura cheia, tracejado (convida a
   ação sem competir visualmente com o botão de gerar). */
.btn-adicionar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ds-space-5);
  border: 1px dashed var(--ds-border-control);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-green-700);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  transition: var(--ds-t-color);
}
.btn-adicionar:hover { background: var(--ds-green-50); border-color: var(--ds-green-500); }

/* =====================================================================
   PAINEL DE PRÉVIA (data-dpmg-resumo-conferencia / data-dpmg-resumo-previa
   em _planilha_conteudo.html, montado por static/js/dpmg-resumo-conferencia.js)
   — o "ponto alto" desta tela: o usuário confere dinheiro (memória de
   cálculo) antes de gastar uma geração. Nenhuma classe aqui tem
   `overflow:hidden`: é a lição documentada no contrato — conteúdo cortado
   dentro de `overflow:hidden` não gera rolagem e some para o usuário; os
   valores (dd) quebram linha em vez de vazar, e não há necessidade de
   overflow-x porque nada aqui força `white-space:nowrap`.
   ===================================================================== */
.dpmg-resumo-conferencia {
  margin-top: var(--ds-space-6);
  padding: var(--ds-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  border: 1px solid var(--ds-border-strong);
  border-left: 4px solid var(--ds-gold-500);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-lg);
  min-width: 0;
}
.dpmg-resumo-conferencia:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
}
.dpmg-resumo-conferencia-titulo {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-xl);
  color: var(--ds-green-900);
}
.dpmg-resumo-conferencia-aviso {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}
.dpmg-resumo-conferencia-aviso-falha {
  margin: 0;
  display: flex;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-warning-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-warning-bg);
  color: var(--ds-warning-text);
  font-size: var(--ds-text-sm);
}
.dpmg-resumo-conferencia-aviso-linha {
  margin: 0;
  font-size: var(--ds-text-sm);
  color: var(--ds-warning-text);
}
.dpmg-resumo-conferencia-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  min-width: 0;
}
.dpmg-resumo-conferencia-carregando {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}
.dpmg-resumo-conferencia-carregando::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ds-border-strong);
  border-top-color: var(--ds-green-700);
  animation: dpmg-resumo-spin var(--ds-spin-duration) linear infinite;
}
@keyframes dpmg-resumo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dpmg-resumo-conferencia-carregando::before { animation: none; }
}

.dpmg-resumo-conferencia-grupo-titulo {
  margin: var(--ds-space-2) 0 0;
  font-family: var(--ds-font-ui);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-text-muted);
}
/* dt/dd alternam como filhos diretos da <dl> (sem wrapper por item), então
   uma grade de 2 colunas os encaixa em pares automaticamente: dt cai na
   coluna 1, dd na coluna 2, o próximo par vai para a linha seguinte. */
.dpmg-resumo-conferencia-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px var(--ds-space-4);
  min-width: 0;
}
.dpmg-resumo-conferencia-lista dt {
  margin: 0;
  min-width: 0;
  padding-block: var(--ds-space-1);
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}
.dpmg-resumo-conferencia-lista dd {
  margin: 0;
  min-width: 0;
  padding-block: var(--ds-space-1);
  border-bottom: 1px solid var(--ds-border);
  text-align: right;
  font-weight: var(--ds-weight-medium);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-text-sm);
  overflow-wrap: anywhere;
}

.dpmg-resumo-conferencia-trecho {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
  background: var(--ds-surface-alt);
  min-width: 0;
}
.dpmg-resumo-conferencia-trecho-paragrafo {
  margin: 0 0 var(--ds-space-2);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-relaxed);
  color: var(--ds-text);
}
.dpmg-resumo-conferencia-trecho-paragrafo:last-child { margin-bottom: 0; }
.dpmg-resumo-conferencia-trecho-citacao {
  padding-left: var(--ds-space-4);
  border-left: 3px solid var(--ds-gold-500);
  font-style: italic;
  color: var(--ds-text-muted);
}
.dpmg-resumo-conferencia-trecho-nota {
  margin: var(--ds-space-2) 0 0;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-faint);
}

.dpmg-resumo-conferencia-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-space-3);
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-border);
}
@media (max-width: 480px) {
  .dpmg-resumo-conferencia-acoes .btn { flex: 1; }
}