/* ============================================================================
 * comum.css — casca de interface das ferramentas MTM da Dexterity
 * KIT COMUM: arquivo IDÊNTICO em new-mtm-ndf, new-mtm-swap, new-mtm-opcoes e new-mtm-curvas.
 * Não altere aqui sem replicar nos quatro (README › Kit comum).
 *
 * Estilos dos blocos de assets/comum.js: etapas, campos, chips de status do mercado, resultado,
 * memória de cálculo, contabilização, JBNPV, lista, diálogo, aviso (toast) e modo incorporado.
 * O sistema visual (tokens, barra, rodapé, botões, tabela) vem de assets/dexterity.css — idêntico
 * em todas as ferramentas de Dados de Mercado. Estilos de uma ferramenta só: assets/app.css.
 * Cerceta = ganho/ok, âmbar = perda/atenção, roxo = nota, vermelho só para erro. Cantos retos,
 * sem sombra, fio de 1px.
 * ========================================================================== */

/* ------------------------------- base ------------------------------------ */
/* [hidden] vence qualquer display de classe (os blocos se escondem com o atributo) */
[hidden] { display: none !important; }
/* Endereço direto: a barra de marca fica fixa no topo — rolagens param abaixo dela */
html:not(.modo-embutido) .ferramenta, html:not(.modo-embutido) .ferramenta * { scroll-margin-top: 84px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px;
  background: var(--dxt-cerceta); color: var(--dxt-base); font-weight: 500; text-decoration: none;
}
.pular:focus { top: 8px; }

.ferramenta { width: var(--dxt-container); margin-inline: auto; padding: 32px 0 0; min-width: 0; }
.mono { font-family: var(--dxt-font-mono); font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.small { font-size: 0.8125rem; }
.hint { font-size: 0.78rem; line-height: 1.45; color: var(--dxt-rotulo); }
.hint a, .nota a, .lead a { color: var(--dxt-acc-txt); }
.lead { color: var(--dxt-muted); font-size: 0.9375rem; line-height: 1.6; max-width: 72ch; margin: 0 0 16px; }
.pos { color: var(--dxt-acc-txt); }
.neg { color: var(--dxt-amarelo); }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
a.dxt-btn { text-decoration: none; }

.status { font-family: var(--dxt-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dxt-rotulo); }
.status.is-ok { color: var(--dxt-acc-txt); }
.status.is-aviso { color: var(--dxt-amarelo); }
.status.is-erro { color: var(--dxt-vermelho); }

/* Notas: roxo = informação, âmbar = atenção, cerceta = confirmação, vermelho = erro */
.nota { color: var(--dxt-rotulo); font-size: 0.8125rem; line-height: 1.55; margin: 10px 0 0; }
.nota strong { color: var(--dxt-off); font-weight: 500; }
.nota-roxo { border-left: 2px solid var(--dxt-roxo); padding-left: 12px; }
.nota-ambar { border-left: 2px solid var(--dxt-amarelo); padding-left: 12px; }
.nota-cerceta { border-left: 2px solid var(--dxt-cerceta); padding-left: 12px; }
.nota-erro { border-left: 2px solid var(--dxt-vermelho); padding-left: 12px; color: var(--dxt-off); }

.btn-link {
  background: none; border: 0; padding: 0; color: var(--dxt-acc-txt); cursor: pointer; font: inherit;
  font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 3px;
}
.btn-link.perigo { color: var(--dxt-amarelo); }
.btn-x {
  flex: none; width: 32px; height: 32px; background: none; border: 1px solid transparent; color: var(--dxt-rotulo);
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.btn-x:hover { color: var(--dxt-off); border-color: var(--dxt-line); }

/* Carregamento: quadrado girando (cantos retos) */
.giro {
  display: inline-block; flex: none; width: 9px; height: 9px; border: 1.5px solid currentColor;
  border-right-color: transparent; animation: giro 0.8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }
.dxt-btn.is-carregando { cursor: progress; opacity: 0.85; }
.dxt-btn.is-carregando .giro { width: 11px; height: 11px; margin-right: 2px; }

/* -------------------------------- etapas --------------------------------- */
.etapa { min-width: 0; }
.etapa + .etapa { margin-top: 28px; }
.etapa-cab { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.etapa-n { font-family: var(--dxt-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--dxt-acc-txt); }
.etapa-titulo { font-size: 1.25rem; letter-spacing: 0.02em; }
.etapa-cab::after { content: ""; flex: 1; height: 1px; background: var(--dxt-line); align-self: center; }
.etapa-cab .etapa-extra { order: 2; font-size: 0.8125rem; }
.etapa-cab::after { order: 1; }
.etapa-intro { margin: -4px 0 14px; color: var(--dxt-muted); font-size: 0.875rem; line-height: 1.55; max-width: 68ch; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 2px solid var(--dxt-amarelo); outline-offset: 4px; }

/* -------------------------------- campos --------------------------------- */
.form-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.form-grid > * { min-width: 0; }
.form-grid .largo { grid-column: 1 / -1; }
.campo { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo > legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.campo > legend + * { clear: both; }
.campo .dxt-input, .campo .dxt-select { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
.campo textarea.dxt-input { min-height: 110px; resize: vertical; font-family: var(--dxt-font-mono); font-size: 0.8125rem; line-height: 1.5; }
.campo .hint { margin: 0; }
.campo-msg { margin: 0; font-size: 0.8125rem; line-height: 1.4; }
.campo-msg::before { font-family: var(--dxt-font-mono); margin-right: 6px; }
.campo-msg.is-erro { color: #E8735C; }
.campo-msg.is-erro::before { content: "!"; color: var(--dxt-vermelho); }
.campo-msg.is-aviso { color: var(--dxt-amarelo); }
.campo-msg.is-aviso::before { content: "?"; }
.dxt-input[aria-invalid="true"], .dxt-select[aria-invalid="true"] { border-color: var(--dxt-vermelho); }
.dxt-input:disabled, .dxt-select:disabled { opacity: 0.45; cursor: not-allowed; }

/* Campo com unidade (US$, R$/US$, %) colada ao lado */
.entrada { display: flex; min-width: 0; }
.entrada .dxt-input { flex: 1 1 auto; min-width: 0; }
.entrada .unidade {
  display: inline-flex; align-items: center; flex: none; padding: 0 10px; border: 1px solid var(--dxt-line);
  font-family: var(--dxt-font-mono); font-size: 0.75rem; color: var(--dxt-rotulo); background: var(--dxt-surface); white-space: nowrap;
}
.entrada .unidade:first-child { border-right: 0; }
.entrada .unidade:last-child { border-left: 0; }

/* Escolha segmentada (rádios com cara de botões retos) */
.segmentado { display: flex; flex-wrap: wrap; border: 1px solid var(--dxt-line); width: fit-content; max-width: 100%; }
.segmentado label { position: relative; display: flex; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmentado span {
  display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; cursor: pointer;
  font-family: var(--dxt-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dxt-muted); border-right: 1px solid var(--dxt-line); transition: background-color .15s ease, color .15s ease;
}
.segmentado label:last-child span { border-right: 0; }
.segmentado span small { font-family: var(--dxt-font-sans); font-size: 0.75rem; letter-spacing: 0; text-transform: none; color: var(--dxt-rotulo); }
.segmentado label:hover span { color: var(--dxt-off); background: var(--dxt-elevate-1); }
.segmentado input:checked + span { color: var(--dxt-acc-txt); background: rgba(0, 153, 148, 0.14); }
.segmentado input:checked + span small { color: var(--dxt-muted); }
.segmentado input:focus-visible + span { outline: 2px solid var(--dxt-amarelo); outline-offset: -2px; }
.segmentado input:disabled + span { opacity: 0.45; cursor: not-allowed; }

/* Escolha em cartões (rádio com título e explicação) */
.cartoes-opcao { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--dxt-line); border: 1px solid var(--dxt-line); }
.cartao-opcao { position: relative; display: grid; gap: 4px; padding: 12px 14px 12px 12px; background: var(--dxt-base); border-left: 3px solid transparent; cursor: pointer; transition: background-color .15s ease; }
.cartao-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cartao-opcao .t { font-family: var(--dxt-font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.cartao-opcao .d { font-size: 0.8125rem; line-height: 1.45; color: var(--dxt-muted); }
.cartao-opcao:hover { background: var(--dxt-elevate-1); }
.cartao-opcao:has(input:checked) { background: var(--dxt-surface-2); border-left-color: var(--dxt-cerceta); }
.cartao-opcao:has(input:checked) .t { color: var(--dxt-acc-txt); }
.cartao-opcao:has(input:focus-visible) { outline: 2px solid var(--dxt-amarelo); outline-offset: -2px; }
.cartao-opcao:has(input:disabled) { cursor: not-allowed; }
.cartao-opcao:has(input:disabled) > :not(input) { opacity: 0.45; }

/* ------------------------- data e status do mercado ---------------------- */
.aviso-data { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--dxt-amarelo); background: rgba(255, 164, 54, 0.06); }
.aviso-data p { margin: 0 0 8px; font-size: 0.875rem; line-height: 1.5; color: var(--dxt-muted); }
.aviso-data strong { color: var(--dxt-off); font-weight: 500; }
.data-info { margin: 0; }

.status-mercado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.status-links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.chips-mercado { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip-mercado {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border: 1px solid var(--dxt-line);
  font-family: var(--dxt-font-mono); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.03em; color: var(--dxt-muted);
}
.chip-mercado.is-ok { border-color: rgba(0, 179, 172, 0.45); color: var(--dxt-acc-txt); }
.chip-mercado.is-carregando { color: var(--dxt-rotulo); }
.chip-mercado.is-falta { border-color: rgba(255, 164, 54, 0.55); }
.chip-mercado.is-opcional { border-style: dashed; }
.chip-mercado button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--dxt-amarelo); cursor: pointer; text-align: left; }
.chip-mercado.is-opcional button { color: var(--dxt-muted); }
.chip-mercado button u { text-underline-offset: 2px; }
.chip-mercado button:focus-visible { outline: 2px solid var(--dxt-amarelo); outline-offset: 4px; }

/* Painel de colar vértices / digitar PTAX */
.painel-colar { display: grid; gap: 12px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--dxt-line); border-left: 3px solid var(--dxt-roxo); background: var(--dxt-base); }
.painel-colar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.painel-colar-head h4 { font-size: 1rem; letter-spacing: 0.02em; }
.painel-colar textarea { width: 100%; }
.painel-colar .nota:empty { display: none; }
.campo-ptax .linha { display: flex; flex-wrap: wrap; gap: 8px; }
.campo-ptax .linha .dxt-input { flex: 1 1 150px; width: auto; }

/* ------------------------------ resultado -------------------------------- */
.resultado-vazio { padding: 20px; border: 1px dashed var(--dxt-line); color: var(--dxt-muted); }
.resultado-vazio h3 { font-size: 1.125rem; margin-bottom: 10px; color: var(--dxt-off); }
.resultado-vazio ul { margin: 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.7; }
.resultado-vazio p { margin: 12px 0 0; font-size: 0.875rem; }

.resultado-card { --cor: var(--dxt-line); border: 1px solid var(--dxt-line); border-left: 3px solid var(--cor); background: var(--dxt-surface); }
.resultado-card.is-pos { --cor: var(--dxt-cerceta); }
.resultado-card.is-neg { --cor: var(--dxt-amarelo); }
.resultado-topo { padding: 20px 20px 16px; }
.resultado-k { font-family: var(--dxt-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dxt-rotulo); }
.resultado-valor {
  display: block; margin-top: 10px; font-family: var(--dxt-font-display); font-weight: 600; line-height: 1;
  font-size: clamp(2.35rem, 5.4vw, 3.4rem); font-variant-numeric: tabular-nums; letter-spacing: 0.005em; overflow-wrap: anywhere;
}
.resultado-rotulo { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--dxt-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.resultado-rotulo::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.resultado-frase { margin: 10px 0 0; font-size: 1rem; line-height: 1.55; color: var(--dxt-off); max-width: 56ch; }
.resultado-frase strong { font-weight: 500; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--dxt-line); border-top: 1px solid var(--dxt-line); }
.kpi { min-width: 0; padding: 12px 16px 14px; background: var(--dxt-surface); }
.kpi-t { font-family: var(--dxt-font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dxt-rotulo); }
.kpi-v { margin-top: 6px; font-family: var(--dxt-font-mono); font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--dxt-off); }
.kpi-n { margin-top: 3px; font-size: 0.75rem; line-height: 1.4; color: var(--dxt-rotulo); }
.resultado-acoes { padding: 14px 16px; border-top: 1px solid var(--dxt-line); }
.resultado-card.is-desatualizado .resultado-topo > :not(.desatualizado), .resultado-card.is-desatualizado .kpis { opacity: 0.4; }
.desatualizado { margin: 0 0 12px; padding: 8px 10px; border-left: 2px solid var(--dxt-amarelo); background: rgba(255, 164, 54, 0.07); font-size: 0.8125rem; color: var(--dxt-off); }
.erro-calculo { padding: 16px 18px; border: 1px solid var(--dxt-line); border-left: 3px solid var(--dxt-vermelho); background: var(--dxt-surface); }
.erro-calculo h3 { font-size: 1.05rem; margin-bottom: 8px; }
.erro-calculo p { margin: 0; color: var(--dxt-muted); font-size: 0.875rem; }

/* Faltam dados */
.faltam { padding: 18px 20px; border: 1px solid rgba(255, 164, 54, 0.4); border-left: 3px solid var(--dxt-amarelo); background: var(--dxt-surface); }
.faltam-k { margin: 0 0 8px; font-family: var(--dxt-font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dxt-amarelo); }
.faltam h3 { font-size: 1.35rem; line-height: 1.05; }
.faltam > p { margin: 10px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--dxt-muted); }
.faltam-lista, .faltam-motivos { margin: 8px 0 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.6; }
.faltam-lista li { color: var(--dxt-off); }
.faltam-motivos li { color: var(--dxt-muted); }
.faltam-motivos strong { color: var(--dxt-off); font-weight: 500; }
.faltam-sub { margin: 16px 0 8px !important; font-family: var(--dxt-font-mono); font-size: 0.6875rem !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dxt-rotulo) !important; }
.faltam .acoes { margin-top: 4px; }
/* rótulos longos ("Usar 21/10/2026 (data publicada mais próxima)") quebram linha no celular */
.faltam .acoes .dxt-btn, .aviso-data .acoes .dxt-btn { max-width: 100%; white-space: normal; text-align: left; justify-content: flex-start; }
.faltam .hint { margin: 10px 0 0; }

/* --------------------------- seções recolhíveis -------------------------- */
.secao { margin-top: 28px; border-top: 1px solid var(--dxt-line); }
.secao > summary, .secao > .secao-cab {
  display: flex; align-items: center; gap: 12px; padding: 16px 0; list-style: none; cursor: pointer;
  font-family: var(--dxt-font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
}
.secao > .secao-cab { cursor: default; flex-wrap: wrap; }
.secao > .secao-cab h2 { font-size: inherit; line-height: inherit; }
.secao > summary::-webkit-details-marker { display: none; }
.secao > summary::after { content: "+"; margin-left: auto; font-family: var(--dxt-font-mono); font-weight: 400; font-size: 1.1rem; color: var(--dxt-acc-txt); }
.secao[open] > summary::after { content: "\2212"; }
.secao > summary:hover { color: var(--dxt-acc-txt); }
.secao > summary small, .secao > .secao-cab small { font-family: var(--dxt-font-sans); font-weight: 300; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--dxt-rotulo); }
.secao-corpo { padding: 0 0 8px; min-width: 0; }

/* --------------------------- memória de cálculo -------------------------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--dxt-line); border: 1px solid var(--dxt-line); }
.passo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 20px; background: var(--dxt-surface); }
.passo-n { font-family: var(--dxt-font-display); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--dxt-acc-txt); }
.passo h4 { font-size: 1rem; margin-bottom: 6px; }
.passo .formula, .formula {
  margin: 6px 0; padding: 8px 10px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--dxt-font-mono); font-size: 0.8125rem; color: var(--dxt-off); background: var(--dxt-base); border: 1px solid var(--dxt-line-soft);
}
.passo .resultado { margin: 4px 0 8px; font-family: var(--dxt-font-mono); font-size: 0.8125rem; color: var(--dxt-acc-txt); overflow-wrap: anywhere; }
.passo p.texto { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--dxt-muted); }
.memoria { margin-top: 10px; }
.memoria > summary { cursor: pointer; font-family: var(--dxt-font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #C08FC2; }
.memoria > summary:hover { color: var(--dxt-off); }
.memoria ol { margin: 8px 0 0; padding-left: 18px; font-size: 0.8125rem; line-height: 1.55; color: var(--dxt-muted); }
.memoria ol li { margin: 4px 0; }
.memoria .table-wrap { margin-top: 8px; }

/* --------------------------------- tabelas ------------------------------- */
/* posicionado: contém os textos só para leitor de tela (.sr-only, absolutos) das tabelas que rolam — sem isso
   eles se posicionam pela página e a alargam quando a tabela é mais larga que a tela */
.table-wrap { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 2px solid var(--dxt-amarelo); outline-offset: 2px; }
.dxt-table td.mono, .dxt-table th.mono { font-family: var(--dxt-font-mono); font-variant-numeric: tabular-nums; }
.dxt-table.small tbody td, .dxt-table.small thead th { padding: 7px 10px; font-size: 0.8125rem; }
.dxt-table tfoot td { padding: 10px 12px; border-top: 1px solid var(--dxt-line); font-weight: 500; font-size: 0.875rem; }
.dxt-table th.right { text-align: right; }

/* ----------------------------- contabilização ---------------------------- */
.contab-cfg { margin-bottom: 18px; }
.contab-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 12px; }
.contab-titulo { margin: 18px 0 10px; font-family: var(--dxt-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; }
.contab-barra .contab-titulo { margin: 0; }
.grupo { padding: 16px 18px; border: 1px solid var(--dxt-line); background: var(--dxt-surface); }
.grupo + .grupo { margin-top: 10px; }
.grupo h4 { font-size: 1.02rem; }
.grupo .base { margin: 6px 0 10px; padding-left: 10px; border-left: 2px solid var(--dxt-roxo); font-size: 0.8125rem; line-height: 1.5; color: var(--dxt-rotulo); }
.passo-c { padding: 10px 0; border-top: 1px solid var(--dxt-line-soft); }
.passo-c.is-futuro { opacity: 0.32; }
.passo-c.is-atual { margin: 0 -18px; padding: 10px 18px; background: var(--dxt-elevate-1); }
.passo-c p { margin: 0 0 6px; font-size: 0.875rem; line-height: 1.5; color: var(--dxt-muted); }
.lanc { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--dxt-line-soft); font-size: 0.875rem; }
.lanc:last-child { border-bottom: 0; }
.lanc .lado { font-family: var(--dxt-font-display); font-weight: 600; font-size: 1rem; }
.lanc .lado.D { color: var(--dxt-acc-txt); }
.lanc .lado.C { color: var(--dxt-amarelo); }
.lanc .conta { min-width: 0; overflow-wrap: anywhere; }
.lanc .rotulo { display: block; font-size: 0.75rem; color: #C08FC2; }
.lanc .valor { font-family: var(--dxt-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.razonetes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.razonete { min-width: 0; border: 1px solid var(--dxt-line); background: var(--dxt-surface); }
.razonete.is-quente { border-color: var(--dxt-cerceta); }
.razonete-head { padding: 8px 12px; border-bottom: 1px solid var(--dxt-line); font-family: var(--dxt-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: anywhere; }
.razonete-abertura { display: flex; justify-content: space-between; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--dxt-line-soft); font-size: 0.75rem; font-style: italic; color: var(--dxt-rotulo); }
.razonete-cols { display: grid; grid-template-columns: 1fr 1fr; }
.razonete-cols > div { padding: 6px 10px; min-width: 0; }
.razonete-cols > div + div { border-left: 1px solid var(--dxt-line); }
.razonete-lbl { margin-bottom: 4px; text-align: center; font-family: var(--dxt-font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dxt-rotulo); }
.razonete-val { min-height: 1.2rem; text-align: right; font-family: var(--dxt-font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.razonete-val.is-novo { color: var(--dxt-acc-txt); }
.razonete-tot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--dxt-line); background: var(--dxt-elevate-1); }
.razonete-tot > div { padding: 5px 10px; text-align: right; font-family: var(--dxt-font-mono); font-size: 0.8125rem; font-weight: 500; }
.razonete-tot > div + div { border-left: 1px solid var(--dxt-line); }
.razonete-saldo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--dxt-line); font-size: 0.8125rem; }
.prova { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--dxt-cerceta); font-size: 0.875rem; }
.prova.is-erro { border-color: var(--dxt-vermelho); }
.jb-cfg { margin-bottom: 14px; }
.jbnpv .acoes { margin-top: 12px; }

/* ---------------------- lista (tabela que vira cartões) ------------------ */
.lista-tabela td .acoes-linha { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lista-tabela tbody tr.is-editando { background: var(--dxt-elevate-2); }
.lista-tabela .nome-contrato { font-weight: 400; color: var(--dxt-off); }
.lista-tabela .sub { display: block; font-size: 0.75rem; color: var(--dxt-rotulo); }

/* ------------------------- layout da calculadora ------------------------- */
/* Entrada (etapas 01–02 e o botão principal) à esquerda, resultado (03) à direita; empilha no celular. */
.calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 44px; align-items: start; }
.calc > * { min-width: 0; }
.calc-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dxt-line-soft); }
.btn-principal { min-height: 48px; padding: 12px 26px; font-size: 1.0625rem; }
.opcional { font-family: var(--dxt-font-sans); font-weight: 300; letter-spacing: 0; text-transform: none; }
.mais-campos { border-top: 1px solid var(--dxt-line-soft); padding-top: 4px; }
.mais-campos > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 0; cursor: pointer; list-style: none; font-family: var(--dxt-font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dxt-acc-txt); }
.mais-campos > summary::-webkit-details-marker { display: none; }
.mais-campos > summary::before { content: "+"; width: 12px; }
.mais-campos[open] > summary::before { content: "\2212"; }
.mais-campos > summary small { font-family: var(--dxt-font-sans); font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--dxt-rotulo); }
.mais-campos > .form-grid { padding: 6px 0 4px; }
.editando { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 16px; padding: 10px 12px; border-left: 2px solid var(--dxt-roxo); background: rgba(152, 86, 154, 0.08); font-size: 0.875rem; color: var(--dxt-muted); }
.editando strong { color: var(--dxt-off); font-weight: 500; }
.desfazer { margin: 0 0 12px; }
.lista-acoes { margin-top: 14px; }
@media (max-width: 960px) { .calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .btn-principal { width: 100%; } }

/* -------------------------------- diálogo -------------------------------- */
dialog.dlg {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 24px;
  border: 1px solid var(--dxt-line); background: var(--dxt-surface); color: var(--dxt-off);
}
dialog.dlg::backdrop { background: rgba(0, 0, 0, 0.62); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dlg-head h2 { margin: 0; font-size: 1.35rem; }
.dlg form { display: grid; gap: 12px; }
.dlg .lead { margin: 0; font-size: 0.875rem; }
.dlg .check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; line-height: 1.45; color: var(--dxt-muted); cursor: pointer; }
.dlg .check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--dxt-cerceta); }
.dlg .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dlg pre.code { max-height: 200px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.dlg .rep-status:empty { display: none; }
pre.code { margin: 8px 0 0; padding: 12px; font-family: var(--dxt-font-mono); font-size: 0.75rem; background: var(--dxt-base); border: 1px solid var(--dxt-line); overflow-x: auto; }

/* --------------------------------- toast --------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px; background: var(--dxt-surface); border: 1px solid var(--dxt-cerceta); color: var(--dxt-off); font-size: 0.875rem; line-height: 1.45;
}
.toast.is-erro { border-color: var(--dxt-vermelho); }

/* ------------------------------ casca direta ----------------------------- */
.casca-nome { font-family: var(--dxt-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dxt-off); text-decoration: none; padding-left: 16px; border-left: 1px solid var(--dxt-line); line-height: 1.2; }
.casca-topo .dxt-topbar-inner { padding: 12px 0; }
.casca-topo .dxt-logo { height: 24px; width: auto; display: block; }
.casca-rodape .dxt-footer-inner { padding: 32px 0; gap: 24px 40px; }
.casca-rodape ul { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); column-gap: 24px; }
.ferramenta-rodape { margin-top: 40px; padding: 18px 0 8px; border-top: 1px solid var(--dxt-line); }
.ferramenta-rodape p { margin: 0; max-width: 80ch; font-size: 0.75rem; line-height: 1.6; color: var(--dxt-rotulo); }

/* ----------------------------- modo incorporado -------------------------- */
/* Na moldura a página do site traz título, texto e rodapé: aqui fica só a ferramenta, sem
   rolagem interna (a altura vai para a página) — nada pode depender da altura da janela. */
.modo-embutido body { display: flow-root; background: var(--dxt-base); }
.modo-embutido .ferramenta { width: calc(100% - 12px); padding-top: 6px; }
/* A página do site confirmou ("pronto") que ajusta a altura: a moldura nunca rola por dentro. */
.moldura-ajustada { scrollbar-width: none; }
.moldura-ajustada::-webkit-scrollbar { display: none; }
.modo-embutido .ferramenta-rodape { margin-top: 28px; }
.modo-embutido .toast { position: absolute; bottom: auto; }
/* Na moldura o diálogo cresce com o conteúdo (a moldura acompanha a altura): sem rolagem interna. Sem
   transição: com movimento reduzido o dexterity.css dá 0,01 ms a tudo, e a posição lida logo depois de
   abrirDialogo() ajustar o top (rolagem e altura pedidas à página) ainda seria a antiga. */
.modo-embutido dialog.dlg { position: absolute; margin: 0; left: 50%; transform: translateX(-50%); bottom: auto; max-height: none; overflow: visible; transition: none; }

/* -------------------------------- celular -------------------------------- */
@media (max-width: 640px) {
  .ferramenta { padding-top: 20px; }
  .etapa-cab::after { display: none; }
  .resultado-topo { padding: 16px 16px 14px; }
  .kpi { padding: 10px 12px 12px; }
  .passo { grid-template-columns: 1fr; gap: 6px; padding: 14px 14px; }
  .grupo { padding: 14px 14px; }
  .passo-c.is-atual { margin: 0 -14px; padding: 10px 14px; }
  .faltam { padding: 16px 14px; }
  .segmentado { width: 100%; }
  .segmentado label { flex: 1 1 0; }
  .segmentado span { justify-content: center; flex: 1; padding: 8px 8px; }
  .casca-nome { padding-left: 12px; font-size: 0.95rem; }
  .resultado-acoes .dxt-btn { flex: 1 1 100%; }
  dialog.dlg { padding: 18px 16px; }
  /* Lista: cada linha vira um cartão com rótulos */
  .lista-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .lista-tabela, .lista-tabela tbody, .lista-tabela tr, .lista-tabela td { display: block; width: 100%; }
  .lista-tabela tbody tr { padding: 10px 0; border-bottom: 1px solid var(--dxt-line); }
  .lista-tabela tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .lista-tabela tbody td::before { content: attr(data-rotulo); flex: none; font-family: var(--dxt-font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dxt-rotulo); text-align: left; padding-top: 2px; }
  .lista-tabela tbody td.lista-nome { display: block; text-align: left; padding-bottom: 4px; }
  .lista-tabela tbody td.lista-nome::before { content: none; }
  .lista-tabela tbody td.lista-acoes { justify-content: flex-start; padding-top: 8px; }
  .lista-tabela tbody td.lista-acoes::before { content: none; }
  .lista-tabela tfoot { display: block; }
  .lista-tabela tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 10px 0; }
  .lista-tabela tfoot td { display: block; width: auto; padding: 0; border: 0; }
  .lista-tabela tfoot td:empty { display: none; }
  /* Barra de marca: no celular ela tem duas linhas — rola junto em vez de ficar fixa */
  .casca-topo { position: static; }
  html:not(.modo-embutido) .ferramenta, html:not(.modo-embutido) .ferramenta * { scroll-margin-top: 12px; }
}
@media (max-width: 400px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
}