/* =====================================================================
   ds-atualizador.css — /atualizador-monetario (ia/template/atualizador_monetario.html)
   =====================================================================
   Substitui dpmg-atualizador-monetario.css na migração ao design system
   v2. `.row`/`.col-*`, `.form-control`/`.form-select`/`.form-label`/
   `.form-text`, `.btn`/`.btn-success`, `.text-danger`, `.visually-hidden`
   e os utilitários de espaçamento (`.mb-3`, `.mt-1` etc.) já vêm prontos
   de ds-compat.css; `.breadcrumb`/`.breadcrumb-bar` vêm de ds-shell.css;
   `.section-icon` vem de ds-planilha.css (ds-publico.css, quando
   existir, deve reexportar essa casca pública). Nada disso é repetido
   aqui — esta folha cobre só o vocabulário `.am-*` e os elementos que
   só esta página usa (`.copy-box`, `.btn-copy`, `.btn-export`,
   `.update-date`, `.aviso*`, `.rotulo-*`).

   Todas as cores antigas eram consumidas via `--dpmg-*` (ponte para
   `--ds-*` em ds-publico.css); aqui elas são escritas direto no token
   `--ds-*` de destino, conforme pedido — sem depender da ponte. */

/* ---- Casca da página (hero + avisos) ---------------------------------- */
.am-app { background: var(--ds-bg); }

.am-hero {
  /* --cor-hero apontava para --dpmg-green-dark, que é exatamente
     --ds-green-900 (#0f3d24) — mapeamento exato, sem aproximação. */
  background: var(--ds-green-900);
  color: var(--ds-on-brand);
  padding: var(--ds-space-8) 0 var(--ds-space-7);
}
/* `color` explícito, não herdado do `.am-hero`: ds.css declara
   `h1 { color: var(--ds-green-900) }` no reset de tipografia, e declaração
   vence herança. Na pilha antiga o reboot do Bootstrap não pintava o h1, e
   por isso ele herdava o branco do hero — quem migra folha por folha herda
   esse alçapão: sem esta linha o título nasce verde-900 sobre o fundo
   verde-900 do próprio hero, medido em 1:1, título invisível. */
.am-hero h1 {
  color: var(--ds-on-brand);
  font-weight: var(--ds-weight-bold);
  margin-bottom: var(--ds-space-2);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  flex-wrap: wrap;
}
/* Mesmo motivo do h1: a base de `.section-icon` (ds-publico.css) pinta
   verde sobre verde-claro, desenhada para o fundo branco do cartão de
   seção. Dentro do hero escuro precisa inverter para véu branco. */
.am-hero .section-icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--ds-on-brand);
  margin-right: 0;
  flex-shrink: 0;
}
.am-hero p {
  /* rgba branca sobre fundo de marca — exceção explicitamente permitida
     (véu translúcido, não é cor sólida escolhida à mão). */
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
  max-width: 60ch;
}
.am-wrap { padding: var(--ds-space-7) 0 var(--ds-space-9); }

.am-beta-badge {
  /* Selo "Beta": mesma família semântica do banner logo abaixo (aviso
     forte de instabilidade) — reaproveita danger-text/surface em vez de
     inventar um terceiro par de cores para a mesma ideia. */
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ds-surface);
  color: var(--ds-danger-text);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-1) var(--ds-space-2);
  vertical-align: middle;
}
.am-beta-banner {
  /* #fdecea/#f3b7ac/#7a1f0f eram um vermelho pastel próprio da página;
     função é idêntica à do par danger do DS — reaproveitado em vez de
     manter uma terceira paleta de vermelho só para esta tela. */
  background: var(--ds-danger-bg);
  border-bottom: 1px solid var(--ds-danger-border);
  color: var(--ds-danger-text);
  padding: var(--ds-space-3) 0;
  font-size: var(--ds-text-base);
}
.am-beta-banner .container { display: flex; align-items: flex-start; gap: var(--ds-space-2); }
.am-beta-banner strong { color: var(--ds-danger-text); }

.am-app details.aviso {
  /* --cor-aviso/--cor-aviso-borda/--cor-aviso-texto eram, na prática, o
     mesmo par de "aviso" do DS (--ds-warning-text bate exato, #6b4e00). */
  background: var(--ds-warning-bg);
  border: 1px solid var(--ds-warning-border);
  color: var(--ds-warning-text);
  border-radius: var(--ds-radius-md);
  margin: var(--ds-space-5) auto 0;
  padding: var(--ds-space-3) var(--ds-space-5);
  max-width: 900px;
}
.am-app details.aviso strong { color: var(--ds-warning-text); }
.am-app details.aviso summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-4);
  list-style: none;
}
.am-app details.aviso summary::-webkit-details-marker { display: none; }
.am-app details.aviso .aviso-toggle { flex-shrink: 0; font-size: var(--ds-text-sm); text-decoration: underline; }
.am-app details.aviso .aviso-toggle .rotulo-recolher { display: none; }
.am-app details.aviso[open] .aviso-toggle .rotulo-mais { display: none; }
.am-app details.aviso[open] .aviso-toggle .rotulo-recolher { display: inline; }
.am-app details.aviso .aviso-full { margin-top: var(--ds-space-2); }

/* ---- Formulário (cartão "Dados do cálculo") --------------------------- */
.am-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  /* --shadow-card (0 2px 12px rgba(0,0,0,.06)) é um degrau único de
     elevação de cartão — o mais próximo em --ds-shadow-* é --ds-shadow-sm. */
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-6);
  max-width: 900px;
  margin: var(--ds-space-6) auto 0;
}
.am-card h2 { font-size: var(--ds-text-lg); margin-bottom: var(--ds-space-4); color: var(--ds-green-900); }

.am-regime-toggle { display: flex; gap: var(--ds-space-3); margin-bottom: var(--ds-space-5); flex-wrap: wrap; }
.am-regime-toggle label {
  /* Mesmo padrão de "cartão de escolha" do .planilha-option (ds-planilha.css):
     rótulo clicável com radio embutido — borda de controle real. */
  border: 1px solid var(--ds-border-control);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  cursor: pointer;
  flex: 1 1 220px;
  min-width: 0; /* item de flex — evita que o texto empurre a linha para fora do cartão */
  display: flex;
  gap: var(--ds-space-2);
  align-items: flex-start;
}
.am-regime-toggle input { margin-top: var(--ds-space-1); }
.am-regime-toggle .titulo { font-weight: var(--ds-weight-semibold); display: block; }
.am-regime-toggle .descricao { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.am-regime-toggle label:has(input:checked) {
  border-color: var(--ds-green-700);
  /* rgba(26,92,58,.05) era um tingimento quase imperceptível — o degrau
     mais próximo disponível no DS é o tint sólido --ds-green-50. */
  background: var(--ds-green-50);
}

/* ---- Resultado ---------------------------------------------------------
   .am-resultado nasce escondido (display:none) e o JS acrescenta
   `.visivel` quando o cálculo termina — sem essa regra o resultado nunca
   aparece na tela, mesmo calculado. */
.am-resultado { display: none; margin-top: var(--ds-space-6); }
.am-resultado.visivel { display: block; }
.am-valor-final {
  /* rgba(26,92,58,.08) é um tint mais forte que o do rádio selecionado
     acima — usa o degrau sólido seguinte, --ds-green-100, para manter a
     hierarquia visual (resultado final se destaca mais que uma seleção). */
  background: var(--ds-green-100);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4) var(--ds-space-5);
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-weight-bold);
  color: var(--ds-green-900);
  margin-bottom: var(--ds-space-4);
}
.am-valor-final small { display: block; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular); color: var(--ds-text-muted); }
.am-alerta-faltantes {
  /* #fbeecf/#e6c98a batem exato com --ds-warning-bg/--ds-warning-border;
     #7a4b00 é o degrau mais próximo disponível, --ds-warning-text. */
  background: var(--ds-warning-bg);
  border: 1px solid var(--ds-warning-border);
  color: var(--ds-warning-text);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  font-size: var(--ds-text-base);
  margin-bottom: var(--ds-space-4);
}
.copy-box {
  /* --dpmg-gray -> --ds-surface-alt, conforme instrução. #e0e0e0 é uma
     borda neutra decorativa comum -> --ds-border. */
  background: var(--ds-surface-alt);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
  font-family: 'Courier New', monospace;
  font-size: var(--ds-text-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto; /* memória de cálculo pode conter linhas largas — rola dentro da caixa, nunca empurra a página */
}
.btn-copy {
  border: 1px solid var(--ds-green-700);
  background: var(--ds-surface);
  color: var(--ds-green-900);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-sm);
  margin-bottom: var(--ds-space-2);
}
.btn-copy:hover { background: var(--ds-green-50); }
/* .copied é escrita por atualizador-monetario-pagina.js após o clique em
   "Copiar" — feedback visual momentâneo; sem regra, o clique não muda nada. */
.btn-copy.copied { background: var(--ds-green-700); color: var(--ds-on-brand); border-color: var(--ds-green-700); }
.update-date { font-size: var(--ds-text-sm); color: var(--ds-text-muted); margin-top: var(--ds-space-2); }

.am-nota-ajuda {
  background: var(--ds-green-50);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-3);
  font-size: var(--ds-text-sm);
  color: var(--ds-green-900);
  margin-top: var(--ds-space-2);
}
.am-alerta-termo-final {
  background: var(--ds-warning-bg);
  border: 1px solid var(--ds-warning-border);
  color: var(--ds-warning-text);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  font-size: var(--ds-text-base);
  margin-bottom: var(--ds-space-4);
}
.am-resumo-numeros { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.am-resumo-numeros .am-resumo-item {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-base);
  flex: 1 1 220px;
  min-width: 0; /* item de flex — evita que números/rótulos longos vazem da linha */
}
.am-resumo-numeros .am-resumo-item strong { display: block; color: var(--ds-green-900); font-size: var(--ds-text-md); }
.am-export-row { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; margin-bottom: var(--ds-space-2); }
.btn-export {
  border: 1px solid var(--ds-green-700);
  background: var(--ds-surface);
  color: var(--ds-green-900);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-4);
  font-size: var(--ds-text-sm);
}
.btn-export:hover { background: var(--ds-green-50); }

/* ---- Lista de lançamentos (múltiplos itens por conta) ------------------ */
.am-itens-titulo { font-size: var(--ds-text-lg); margin: var(--ds-space-6) 0 var(--ds-space-4); color: var(--ds-green-900); }
.am-item-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-1);
  margin-bottom: var(--ds-space-4);
}
.am-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-3);
}
.am-item-numero { font-weight: var(--ds-weight-semibold); color: var(--ds-green-900); font-size: var(--ds-text-base); }
.am-item-remove {
  border: 1px solid var(--ds-border-control);
  background: var(--ds-surface);
  color: var(--ds-text-muted);
  border-radius: var(--ds-radius-sm);
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1;
  font-size: 1.1rem;
  cursor: pointer;
}
.am-item-remove:hover { background: var(--ds-danger-bg); color: var(--ds-danger-text); border-color: var(--ds-danger-border); }
.am-itens-acoes { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; margin-bottom: var(--ds-space-2); }
.am-painel-serie {
  background: var(--ds-green-50);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  margin: var(--ds-space-4) 0 var(--ds-space-6);
}
.am-painel-serie summary { cursor: pointer; font-weight: var(--ds-weight-semibold); color: var(--ds-green-900); list-style: none; }
.am-painel-serie summary::-webkit-details-marker { display: none; }
.am-painel-serie-corpo { margin-top: var(--ds-space-4); }
.am-item-detalhe {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-2) var(--ds-space-3);
  margin-bottom: var(--ds-space-2);
}
.am-item-detalhe summary {
  cursor: pointer;
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-green-900);
  list-style: none;
  font-size: var(--ds-text-base);
}
.am-item-detalhe summary::-webkit-details-marker { display: none; }
.am-item-detalhe .copy-box { margin-top: var(--ds-space-2); max-height: 300px; }

/* ---- Impressão da memória de cálculo -----------------------------------
   Sem `!important` em nenhuma das quatro regras abaixo (as quatro que a
   folha antiga forçava): este bloco é o último da folha, então em todo
   empate de especificidade contra uma regra de tela definida ACIMA neste
   mesmo arquivo, a ordem de cascata já resolve a favor da regra de
   impressão — é a mesma técnica documentada em ds.css (seção "S5",
   comentário R4). Conferido caso a caso:
   - display:none dos elementos de navegação/formulário: nenhuma outra
     regra desta folha declara `display` para esses seletores fora deste
     bloco, então nem precisa de empate — já vence sozinha.
   - `.am-app, body { background }`: empata em especificidade (0,0,0,1)
     com a regra `body` de ds.css; como esta folha carrega depois de
     ds.css na pilha, vence por ordem — e ambas convergem para o mesmo
     token de impressão (--ds-print-bg), então nem chega a fazer
     diferença visual.
   - `.am-resultado { display:block }`: empata em especificidade
     (0,0,1,0) com a regra de tela `.am-resultado { display:none }`
     definida acima; por estar depois no arquivo, vence. Quando `.visivel`
     está presente, essa classe (0,0,2,0) já garante display:block por
     conta própria, sem conflito.
   - `.copy-box, .am-item-detalhe .copy-box { max-height:none }`: cada
     seletor do grupo empata em especificidade com sua contraparte de tela
     (.copy-box vs .copy-box; .am-item-detalhe .copy-box vs
     .am-item-detalhe .copy-box) e vence pela mesma razão de ordem. */
@media print {
  nav.navbar, .breadcrumb-bar, .am-hero, .am-beta-banner, details.aviso, #formCalculo,
  .btn-copy, .btn-export, .am-export-row, .site-footer, .skip-link {
    display: none;
  }
  .am-app, body { background: var(--ds-print-bg); }
  .am-resultado { display: block; }
  .am-card.am-resultado { box-shadow: none; border: none; padding: 0; margin: 0; max-width: 100%; }
  .copy-box, .am-item-detalhe .copy-box { max-height: none; overflow: visible; border: none; }
}