/* Simuladores (Novos + Seminovos) — CSS compartilhado.
   Regras de UI financeira: o Balão mostra parcela + balão + mês; o rebate
   é "custo comercial da taxa", nunca "desconto". Todos os valores usam
   var() dos tokens do design system. */

.smPage { max-width: 1180px; }

/* .smHeader: regra antiga, substituída por .modPageHeader/.modTitle/.modSubtitle (module-system.css). */
.smHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.smHeader h1 {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(1.375rem, calc(2.6vw * var(--fs-scale)), 1.875rem);
  letter-spacing: -.01em;
  margin: 0;
}
.smHeader p {
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
}
/* Identidade do produto: Novos x Seminovos sempre legível. */
.smProductBadge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
  background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  margin-bottom: var(--space-2);
}

/* ---------- seletor de modalidade ---------- */
.smModeBar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  max-width: 480px;
}
.smModeBar label {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.smModeDesc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* ---------- menu de modalidades em categorias recolhíveis (Novos e
   Seminovos): categorias fechadas por padrão, uma aberta por vez;
   escolher uma opção fecha a categoria. ---------- */
.smModeNav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  align-items: start;
  counter-reset: smModeGroup;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-hairline);
}
.smModeGroup {
  counter-increment: smModeGroup;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-standard) var(--ease-precise);
}
.smModeGroup.open { border-color: color-mix(in srgb, var(--color-accent-primary) 28%, transparent); }
.smModeGroupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  color: var(--color-text-secondary);
  transition: background var(--duration-standard) var(--ease-precise), color var(--duration-standard) var(--ease-precise);
}
.smModeGroupHeader:hover { background: rgba(255,255,255,.025); color: var(--color-text-primary); }
.smModeGroup.open .smModeGroupHeader { color: var(--color-text-primary); border-bottom: 1px solid var(--color-hairline); }
.smModeGroupHeader:focus-visible { outline: var(--focus-ring); outline-offset: -2px; z-index: 1; }
.smModeGroupHeaderMain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.smModeGroupLabel {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: inherit;
  font-weight: 500;
}
.smModeGroupLabel::before {
  content: counter(smModeGroup, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  opacity: .7;
}
/* Modo atual mostrado no cabeçalho da categoria fechada que o contém. */
.smModeHint { font-size: 0.7188rem; color: var(--color-accent-primary); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smModeDisclosure { flex: 0 0 auto; color: var(--color-text-muted); transform: rotate(0deg); transition: transform var(--duration-standard) var(--ease-precise), color var(--duration-standard) var(--ease-precise); }
.smModeGroup.open .smModeDisclosure { transform: rotate(90deg); color: var(--p-red-1); }
.smModeGroupHeader:hover .smModeDisclosure { color: var(--color-text-primary); }
.smModeGroup.open .smModeGroupHeader:hover .smModeDisclosure { color: var(--p-red-1); }
.smModeRowsWrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-standard) var(--ease-precise); }
.smModeGroup.open .smModeRowsWrap { grid-template-rows: 1fr; }
.smModeRowsInner { overflow: hidden; min-height: 0; }
.smModeButtons { display: flex; flex-direction: column; border-top: 1px solid var(--color-hairline); }
.smModeBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 50px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  padding: 0 var(--space-4) 0 20px;
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 0.7812rem;
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-standard) var(--ease-precise), color var(--duration-standard) var(--ease-precise);
}
.smModeButtons .smModeBtn:last-child { border-bottom: none; }
.smModeBtn::before {
  content: '';
  position: absolute;
  left: 8px; top: 50%;
  width: 2px; height: 0;
  border-radius: 1px;
  background: var(--p-red-1);
  opacity: 0;
  transform: translateY(-50%);
  transition: height var(--duration-standard) var(--ease-precise), opacity var(--duration-standard) var(--ease-precise), box-shadow var(--duration-standard) var(--ease-precise);
}
.smModeBtnLabel { line-height: 1.3; }
.smChevron { flex: 0 0 auto; color: var(--color-text-muted); transition: transform var(--duration-standard) var(--ease-precise), color var(--duration-standard) var(--ease-precise); }
.smModeBtn:hover { background: rgba(255,255,255,.025); color: var(--color-text-primary); }
.smModeBtn:hover::before { height: 14px; opacity: .4; }
.smModeBtn:hover .smChevron { transform: translateX(2px); color: var(--color-text-primary); }
.smModeBtn.active { background: rgba(255,255,255,.045); color: var(--color-text-primary); font-weight: 500; }
.smModeBtn.active::before { height: 22px; opacity: 1; box-shadow: 0 0 6px 0 color-mix(in srgb, var(--color-accent-primary) 45%, transparent); }
.smModeBtn.active .smChevron { color: var(--p-red-1); transform: translateX(1px); }
.smModeBtn:focus-visible { outline: var(--focus-ring); outline-offset: -2px; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .smModeBtn, .smModeBtn::before, .smChevron, .smModeGroup, .smModeGroupHeader, .smModeDisclosure, .smModeRowsWrap { transition: none; } }
/* Em telas estreitas, uma coluna só. */
@media (max-width: 480px) { .smModeNav { grid-template-columns: 1fr; } }

/* ---------- "Falar com um Analista" (Novos e Seminovos): segundo item
   do .modPageHeader, à direita; quebra para baixo do título em telas
   estreitas. ---------- */
.smAnalystCta { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; flex-shrink: 0; background: var(--color-accent-primary); border: 1px solid var(--color-accent-primary); border-radius: var(--radius-sm); padding: 0 18px; font-family: var(--font-ui); font-size: 0.7812rem; font-weight: 500; color: var(--color-on-accent); cursor: pointer; white-space: nowrap; }
.smAnalystCtaIcon { color: inherit; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .smAnalystCta { transition: background var(--duration-fast) var(--ease-precise), filter var(--duration-fast) var(--ease-precise); } }
.smAnalystCta:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.smAnalystCta:active { filter: brightness(.92); }
.smAnalystCta:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (max-width: 480px) { .smAnalystCta { width: 100%; justify-content: center; } }

/* ---------- grade de escolha de prazo: --term-cols calculado em JS pelo
   número de prazos e pela largura. ---------- */
.smTermSelectGrid {
  display: grid;
  grid-template-columns: repeat(var(--term-cols, 4), 1fr);
  gap: 1px;
  background: var(--color-hairline-strong);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.smTermSelectGrid button {
  background: var(--color-surface-2);
  border: 0;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  padding: 9px 4px;
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.smTermSelectGrid button.active { background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent); color: color-mix(in srgb, var(--color-accent-primary) 10%, #ffffff); font-weight: 500; }
.smTermSelectGrid button:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; z-index: 1; position: relative; }

/* ---------- plano com balões (Tradicional) ---------- */
.smPlanRegular { margin: 0; font-size: 0.9375rem; color: var(--color-text-secondary); }
.smPlanRegularCount { font-family: var(--font-mono); font-weight: 500; color: var(--color-text-primary); }
.smPlanRegularValue { display: inline; font-size: clamp(1.625rem, calc(4.2vw * var(--fs-scale)), 2.375rem) !important; }
.smPlanSpecials { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.smPlanSpecialRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: 10px 14px;
  background: var(--color-surface-2);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
  border-radius: var(--radius-sm);
}
.smPlanSpecialValue { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.smPlanSpecialBreakdown { font-size: 0.6875rem; color: var(--color-text-muted); flex-basis: 100%; }

.smGrid { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .smGrid { grid-template-columns: 1fr; } }
/* Modo empilhado (classe opcional .smGridStacked): formulário acima e resultado em largura total. */
.smGrid.smGridStacked { grid-template-columns: 1fr; }
.smGrid.smGridStacked .smFormCard { max-width: 480px; }

/* ---------- cronograma do plano (Semestral/Anual, Parcela Única):
   marcadores informativos, não botões. ---------- */
.smSchedule { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-hairline); }
.smScheduleRow { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-2) 0 var(--space-3); }
.smScheduleItem { display: flex; flex-direction: column; gap: 4px; }
.smScheduleItem strong { font-family: var(--font-mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.smScheduleLabel { font-size: 0.6875rem; color: var(--color-text-secondary); }
.smScheduleMarkersLabel { font-size: 0.6875rem; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.smScheduleMarkers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.smScheduleMarker {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-2); color: var(--color-text-secondary);
  font-family: var(--font-mono); font-size: 0.7812rem; font-variant-numeric: tabular-nums;
}

/* ---------- cartões de destaque (valor final de venda) ---------- */
.smEmphasisPair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 480px) { .smEmphasisPair { grid-template-columns: 1fr; } }
.smEmphasisCard {
  background: var(--color-surface-2); border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.smEmphasisCardPrimary { border-color: var(--color-accent-primary); background: color-mix(in srgb, var(--color-accent-primary) 7%, transparent); }
.smEmphasisValue { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums; margin: 4px 0 0; word-break: break-word; }
.smEmphasisValuePrimary { font-size: 1.625rem; color: color-mix(in srgb, var(--color-accent-primary) 10%, #ffffff); }
/* valor nunca quebra no meio; no nível Grande, abaixo de 1280 px, os dois cards de destaque ficam um embaixo do outro */
.smEmphasisValue { white-space: nowrap; word-break: normal; }
@media (max-width: 1279px) { :root[data-fonte="grande"] .smEmphasisPair { grid-template-columns: 1fr; } }

/* ---------- Taxas Subsidiadas: cartões por prazo ---------- */
.smSubsidiadaGroups { display: flex; flex-direction: column; gap: var(--space-5); }
.smSubsidiadaGroupHead { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.smSubsidiadaGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.smSubsidiadaCard {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-surface-2); border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.smSubsidiadaCard.best { border-color: var(--color-accent-primary); background: color-mix(in srgb, var(--color-accent-primary) 6%, transparent); }
.smSubsidiadaCardHead { display: flex; justify-content: space-between; align-items: baseline; }
.smSubsidiadaCardPrazo { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.smSubsidiadaCardTaxa { font-family: var(--font-mono); font-size: 0.7188rem; color: var(--color-text-muted); }
.smSubsidiadaCardPill { margin: -2px 0 2px; }
.smSubsidiadaCardRow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: 0.8125rem; padding-top: 4px; border-top: 1px solid var(--color-hairline); }
.smSubsidiadaCardRow strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.smSubsidiadaCardRow.smSubsidiadaCardRowEmphasis strong { font-size: 0.9062rem; color: var(--color-text-primary); }
.smSubsidiadaCardValueStack { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.smSubsidiadaCardRebatePct { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 400; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Regiões de formulário/resultado usam .modPanelForm/.modPanelResult
   (module-system.css); .smFormCard continua no Novos para o modo empilhado. */
.smFormCard, .smResultCard {
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 0.7188rem; color: var(--color-text-secondary); font-weight: 500; }
.field .hint { font-size: 0.6875rem; color: var(--color-text-muted); }
.field .hint.warn { color: var(--color-warning); }

.input, .select {
  font-family: var(--font-ui);
  font-size: 0.8438rem;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-text-primary);
}
.input.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.input:focus-visible, .select:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 1px; }
.input.invalid { border-color: var(--color-critical); }

.inputAffix { position: relative; }
.inputAffix .prefix {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.7812rem; color: var(--color-text-muted);
  pointer-events: none;
}
.inputAffix .input { padding-left: 30px; }
/* Entrada em R$ + Entrada em % lado a lado (o % fica estreito, à direita) */
.smEntryPair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, 34%); gap: 8px; }
.inputAffixSuffix .input { padding-left: 11px; padding-right: 26px; text-align: right; }
.inputAffix .suffix {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.7812rem; color: var(--color-text-muted);
  pointer-events: none;
}

.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented button {
  background: var(--color-surface-2); border: 0; border-right: 1px solid var(--color-hairline-strong);
  color: var(--color-text-secondary); font-size: 0.75rem; padding: 7px 13px; cursor: pointer;
  font-family: var(--font-ui);
}
.segmented button:last-child { border-right: 0; }
.segmented button.active { background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent); color: color-mix(in srgb, var(--color-accent-primary) 10%, #ffffff); }
.segmented button:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }

.btn {
  font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 500; padding: 9px 16px;
  border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; border: 1px solid transparent; line-height: 1.2;
}
.btn-primary { background: var(--color-accent-primary); border-color: var(--color-accent-primary); color: var(--color-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-surface-2); border-color: var(--color-hairline-strong); color: var(--color-text-primary); }
.btn-tertiary { background: none; border-color: transparent; color: var(--color-text-secondary); text-decoration: underline; padding: 4px 2px; }
.btn-sm { padding: 6px 12px; font-size: 0.75rem; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }

.smBalloonList { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
/* Linha de balão: o valor tem prioridade de largura; o mês é curto e o remover é pequeno. */
.smBalloonRow { display: grid; grid-template-columns: 92px minmax(150px, 1fr) auto; gap: var(--space-3); align-items: end; }
.smBalloonRow .field { margin-bottom: 0; min-width: 0; }
.smBalloonRow .btn { white-space: nowrap; }

.kpiLabel {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 0 0 6px;
}
.emptyState, .errorState {
  text-align: center; padding: 40px 20px; color: var(--color-text-secondary); font-size: 0.7812rem;
  border: 1px dashed var(--color-hairline-strong); border-radius: var(--radius-md);
}
.emptyState .t, .errorState .t { color: var(--color-text-primary); font-size: 0.8438rem; font-weight: 500; margin-bottom: 6px; }
.errorState { border-color: rgba(226, 84, 58, .4); color: #f3c7ba; }

.smWarning {
  display: flex; gap: 10px; background: var(--color-warning-soft); border: 1px solid rgba(219, 166, 72, .35);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.7812rem; color: #e8c992; margin: 0 0 var(--space-4);
}

.resultHero .kpiLabel { margin-bottom: 8px; }
.resultHero .resultValue {
  font-size: clamp(1.875rem, calc(5vw * var(--fs-scale)), 2.75rem); font-weight: 300; letter-spacing: -.01em; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.resultSecondaryGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--color-hairline); margin-top: 16px;
}
.resultSecondaryGrid .val { font-size: 1rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; word-break: break-word; }

/* ---------- grade de resultado (Linear: vários prazos de uma vez) ---------- */
/* --term-grid-cols vem de UI.wireTermResultGrid() (simuladores-shared.js):
   colunas que dividem exatamente o número de prazos, sem linha incompleta. */
.smTermGrid { display: grid; grid-template-columns: repeat(var(--term-grid-cols, 6), 1fr); gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); overflow: hidden; margin-top: var(--space-4); }
.smTermCard { background: var(--color-surface-2); padding: 12px 8px; text-align: center; }
.smTermCard.best { background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); }
.smTermCard .term { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-text-muted); margin-bottom: 6px; }
.smTermCard .payment { font-family: var(--font-mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.smTermCard .rate { font-size: 0.6562rem; color: var(--color-text-muted); margin-top: 4px; }
.smTermCard .unavailable { color: var(--color-text-muted); font-size: 0.6875rem; }

/* ---------- Subsidiadas comparison groups ---------- */
.smCompareGroups { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.smCompareGroup { border: 1px solid var(--color-hairline); border-radius: var(--radius-md); overflow: hidden; }
.smCompareGroupHead { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--color-surface-2); font-size: 0.7812rem; font-weight: 500; }
.smCompareRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) auto; gap: var(--space-3); align-items: center; padding: 10px 14px; border-top: 1px solid var(--color-hairline); font-size: 0.7812rem; }
.smCompareRow.best { background: var(--color-success-soft); }
.smCompareRow .lbl { display: block; font-size: 0.625rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.smCompareRow .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.smPill { font-size: 0.6562rem; padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono); white-space: nowrap; }
.smPill.excellent { background: var(--color-success-soft); color: var(--color-success); }
.smPill.good { background: var(--color-success-soft); color: var(--color-success); }
.smPill.bad { background: var(--color-critical-soft); color: var(--color-critical); }
.smPill.neutral { background: var(--color-surface-2); color: var(--color-text-secondary); }

/* ---------- Antecipação / Cash Conversion detail tables ---------- */
.smTableWrap { overflow-x: auto; margin-top: var(--space-4); }
.smTable { width: 100%; border-collapse: collapse; font-size: 0.7812rem; }
.smTable th, .smTable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-hairline); }
.smTable th { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 500; }
.smTable td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.smClassBadge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; font-family: var(--font-mono); }
.smClassBadge.FINANCIAR { background: var(--color-success-soft); color: var(--color-success); }
.smClassBadge.UTILIZAR { background: var(--color-warning-soft); color: var(--color-warning); }
.smClassBadge.EQUIVALENTE { background: var(--color-surface-2); color: var(--color-text-secondary); }

.smFootnote { font-size: 0.6875rem; color: var(--color-text-muted); margin-top: var(--space-3); line-height: 1.5; }

@media (max-width: 480px) {
  .smBalloonRow { grid-template-columns: 1fr; }
  .resultHero .resultValue { font-size: 1.875rem; }
}

/* ---- Limite do balão (texto auxiliar logo abaixo da entrada) ---- */
.smBalaoLimite { display: block; margin: -6px 0 14px; line-height: 1.45; font-size: 0.6875rem; color: var(--color-text-muted); } /* = .field .hint */
.smBalaoLimite b { color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
.smBalaoLimite.smBalaoLimiteAcima, .smBalaoLimite.smBalaoLimiteAcima b { color: var(--color-critical); }

/* ---- Grade "Parcela por prazo": prazo em destaque, parcela continua principal ---- */
.smTermGrid { grid-template-columns: repeat(var(--term-grid-cols, 6), minmax(0, 1fr)); }
.smTermCard .term { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); letter-spacing: .01em; }
.smTermCard .payment { white-space: nowrap; }

/* ---- Selo da taxa (Linear Seminovos, Taxas Subsidiadas) ---- */
.smRateBadge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
  color: var(--color-text-primary); background: var(--color-elevated-surface);
  border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm); padding: 2px 6px; line-height: 1.35;
}
.smRateBadge.smRateBadgeZero { color: var(--color-on-brand); background: var(--color-brand-red); border-color: var(--color-brand-red); }
.smTermCard .rate { margin-top: 6px; }
.smSubsidiadaGroupHead .smRateBadge { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.smSubsidiadaCardTaxa .smRateBadge { font-size: 0.6875rem; }
.smRateLine { margin: 0 0 var(--space-3); }
.smRateLine .smRateBadge { font-size: 0.8125rem; padding: 4px 10px; }

/* ---- Plano Linear: formulário e "Parcela por prazo" com o mesmo topo e a mesma altura ---- */
.smGrid.smGridEqual { align-items: stretch; }
.smGrid.smGridEqual > .modPanelForm, .smGrid.smGridEqual > .modPanelResult { height: 100%; box-sizing: border-box; }

/* ---------- leitura de balcão. SÓ APARÊNCIA: nenhum valor é calculado aqui.
   Prazos e parcelas grandes e em negrito, rótulos curtos em maiúsculas
   pequenas, saldo financiado em destaque, painéis proporcionais.
   Tamanhos em rem: acompanham o A+ (Normal e Grande). ---------- */
.smPage .smGrid { grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .smPage .smGrid { grid-template-columns: 1fr; } }
.smPage .smGrid > .modPanelForm, .smPage .smGrid > .modPanelResult { box-sizing: border-box; min-width: 0; }
.smPage .smGrid.smGridStacked { grid-template-columns: 1fr; }
.smPage .smModeDesc { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }

/* rótulos curtos em maiúsculas pequenas */
.smPage .field label, .smPage .kpiLabel, .smPage .smScheduleLabel {
  font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.smPage .field { margin-bottom: 12px; }
.smPage .field .hint { font-size: 0.75rem; }

/* campos: número grande e firme */
.smPage .input, .smPage .select { font-size: 0.9375rem; font-weight: 600; padding: 10px 12px; }
.smPage .input.mono { font-family: var(--font-ui); font-weight: 700; }
.smPage .inputAffix .prefix, .smPage .inputAffix .suffix { font-family: var(--font-ui); font-weight: 700; font-size: 0.8125rem; }
.smPage .inputAffix .input { padding-left: 34px; }

/* saldo financiado: só leitura -- fundo escuro, borda e número em vermelho */
.smPage .smSaldoField .smSaldoInput {
  background: var(--color-surface-2); border: 1.5px solid var(--color-accent-primary); color: var(--color-accent-primary);
  font-size: 1.1875rem; font-weight: 900; cursor: default; pointer-events: none;
}
.smPage .smSaldoField .prefix { color: var(--color-accent-primary); }

/* cabeçalho do resultado */
.smPage .smResultHead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.smPage .smResultHead .kpiLabel { margin: 0; font-size: 0.75rem; color: var(--color-text-primary); }
.smPage .smResultHeadNote { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-secondary); }

/* cartões por prazo */
.smPage .smTermGrid { gap: 10px; background: none; border: 0; border-radius: 0; overflow: visible; margin-top: 12px; }
.smPage .smTermCard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--color-surface-2); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md);
  padding: 14px 8px 12px; min-width: 0;
}
.smPage .smTermCard .term {
  font-family: var(--font-ui); font-size: clamp(1.625rem, calc(2.6vw * var(--fs-scale)), 2.25rem); font-weight: 900;
  line-height: 1; color: var(--color-text-primary); letter-spacing: -.01em; margin: 0;
}
.smPage .smTermCard .term::after { content: ''; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--color-accent-primary); margin: 8px auto 6px; }
.smPage .smTermLbl { font-size: 0.625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.smPage .smTermCard .payment {
  font-family: var(--font-ui); font-size: clamp(1.0625rem, calc(1.6vw * var(--fs-scale)), 1.375rem); font-weight: 900;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-primary);
}
.smPage .smTermCard .rate { margin-top: 6px; }
/* nenhum cartão vem destacado; só o prazo que o vendedor tocar */
.smPage .smTermCard { cursor: pointer; transition: border-color var(--duration-fast, .12s) ease, background var(--duration-fast, .12s) ease; }
.smPage .smTermCard.best { background: var(--color-surface-2); }
.smPage .smTermCard:hover { border-color: color-mix(in srgb, var(--color-accent-primary) 55%, transparent); }
.smPage .smTermCard:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }
.smPage .smTermCard.selected { background: linear-gradient(160deg, color-mix(in srgb, var(--color-brand-red) 30%, transparent), color-mix(in srgb, color-mix(in srgb, var(--color-brand-red) 74%, #000000) 14%, transparent)); border-color: var(--color-accent-primary); box-shadow: inset 0 0 0 1px var(--color-accent-primary); }
.smPage .smTermCard.selected .term::after { background: #fff; }

/* Taxa Subsidiada: rebate em 3 colunas iguais (total, montadora, concessionária) + valor final de venda */
.smPage .smRebateTrio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 10px; }
.smPage .smRebateCard { background: var(--color-surface-2); border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-md); padding: 12px 14px; min-width: 0; }
.smPage .smRebateCard .kpiLabel { margin: 0 0 4px; }
.smPage .smRebateValue { margin: 0; font-family: var(--font-ui); font-size: clamp(1rem, calc(1.5vw * var(--fs-scale)), 1.3125rem); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.smPage .smRebateNote { margin: 2px 0 0; font-size: 0.6875rem; color: var(--color-text-muted); }
.smPage .smFinalSale { margin: 0; }
@media (max-width: 560px) { .smPage .smRebateTrio { grid-template-columns: 1fr; } }
@media (max-width: 1279px) { :root[data-fonte="grande"] .smPage .smRebateTrio { grid-template-columns: 1fr; } }

/* valores principais: fonte pesada */
.smPage .resultHero .resultValue { font-family: var(--font-ui); font-weight: 900; letter-spacing: -.015em; }
.smPage .resultSecondaryGrid { gap: 12px 16px; padding: 14px 0 4px; margin-top: 14px; }
.smPage .resultSecondaryGrid .val { font-family: var(--font-ui); font-size: 1.125rem; font-weight: 800; }
.smPage .smEmphasisValue { font-family: var(--font-ui); font-weight: 900; }
.smPage .smScheduleItem strong, .smPage .smPlanSpecialValue, .smPage .smSubsidiadaCardPrazo, .smPage .smSubsidiadaCardRow strong { font-family: var(--font-ui); font-weight: 800; }
.smPage .smSubsidiadaCardPrazo { font-size: 1.5rem; font-weight: 900; }

/* Balão: "36x de R$ X + balão de R$ Y no mês 36" */
.smPage .smPlanRegular { font-size: 1.0625rem; font-weight: 600; }
.smPage .smPlanRegular .smPlanRegularValue { color: var(--color-text-primary); }
.smPage .smPlanRegularCount { font-family: var(--font-ui); font-size: clamp(1.625rem, calc(3.4vw * var(--fs-scale)), 2.25rem); font-weight: 900; }
.smPage .smPlanBalao { margin: 6px 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--color-text-secondary); }
.smPage .smPlanBalao strong { font-size: 1.375rem; font-weight: 900; color: var(--color-accent-primary); white-space: nowrap; }
.smPage .smPlanSpecials { margin-top: 12px; padding-top: 12px; }
.smPage .smPlanSpecialRow { justify-content: space-between; align-items: center; }
.smPage .smPlanSpecialRow .kpiLabel { margin: 0; }

@media (max-width: 480px) {
  .smPage .smTermCard .term { font-size: 1.5rem; }
  .smPage .smTermCard .payment { font-size: 1rem; }
}

.smPage .smBalloonRow { grid-template-columns: 124px minmax(150px, 1fr) auto; }
@media (max-width: 480px) { .smPage .smBalloonRow { grid-template-columns: 1fr; } }
.smPage .smEntryPair { grid-template-columns: minmax(0, 1fr) minmax(100px, 34%); }
.smPage .smEntryPair .inputAffixSuffix .input { padding-left: 8px; padding-right: 24px; }

/* Taxa Subsidiada: taxa escolhida em botões; cartões da taxa no painel da direita, 4 por linha;
   "Copiar taxa banco" pequeno em cada cartão. */
.smPage .smTaxaChips { display: flex; flex-wrap: wrap; gap: 6px; }
.smPage .smTaxaChip {
  min-width: 64px; padding: 8px 12px; cursor: pointer; font-family: var(--font-ui); font-size: 0.875rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--color-text-secondary); background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm);
}
.smPage .smTaxaChip:hover { border-color: color-mix(in srgb, var(--color-accent-primary) 55%, transparent); color: var(--color-text-primary); }
.smPage .smTaxaChip.active { color: #fff; background: color-mix(in srgb, var(--color-brand-red) 28%, transparent); border-color: var(--color-accent-primary); box-shadow: inset 0 0 0 1px var(--color-accent-primary); }
.smPage .smTaxaChip:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }
.smPage #nSubsTaxa + * { margin-top: 0; }
.smPage .field:has(#nSubsTaxa) { margin-bottom: 18px; }
.smPage #smResultRegion { container-type: inline-size; }
.smPage .smSubsEscolha .t { font-size: 1rem; font-weight: 800; }
.smPage .smSubsidiadaGroup .smResultHead { align-items: center; }
.smPage .smSubsidiadaGroup .smSubsidiadaGroupHead { margin: 0; }
.smPage .smSubsGrid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@container (max-width: 620px) { .smPage .smSubsGrid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 300px) { .smPage .smSubsGrid4 { grid-template-columns: 1fr; } }
.smPage .smSubsGrid4 .smSubsidiadaCard { padding: 12px; gap: 6px; min-width: 0; }
.smPage .smSubsGrid4 .smSubsidiadaCardHead { justify-content: center; }
.smPage .smSubsGrid4 .smSubsidiadaCardPrazo { font-size: clamp(1.5rem, calc(2.2vw * var(--fs-scale)), 2rem); line-height: 1; }
.smPage .smSubsGrid4 .smSubsidiadaCardTaxa { display: none; }
.smPage .smSubsGrid4 .smSubsidiadaCardPill { text-align: center; margin: 0; }
.smPage .smSubsGrid4 .smSubsidiadaCardRow { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 6px; }
.smPage .smSubsGrid4 .smSubsidiadaCardRow strong { text-align: left; font-size: 1rem; white-space: nowrap; }
.smPage .smSubsGrid4 .smSubsidiadaCardValueStack { align-items: flex-start; }
.smPage .smSubsGrid4 .smSubsidiadaCardRow .kpiLabel { margin: 0; font-size: 0.625rem; }
.smPage .smSubsGrid4 .smSubsidiadaCard { position: relative; }
.smPage .smCopyTaxaIcon {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; color: var(--color-text-muted); background: transparent;
  border: 1px solid var(--color-hairline-strong); border-radius: var(--radius-sm);
}
.smPage .smCopyTaxaIcon:hover { color: var(--color-text-primary); border-color: var(--color-accent-primary); }
.smPage .smCopyTaxaIcon:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }
/* aviso curto ("Taxa copiada"), no rodapé da tela */
.smToast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 1000; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: var(--radius-sm); background: var(--color-elevated-surface, #222); color: var(--color-text-primary);
  border: 1px solid var(--color-accent-primary); font-family: var(--font-ui); font-size: 0.875rem; font-weight: 700;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.smToast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .smToast { transition: none; } }

/* Taxa Subsidiada: rebate em vermelho com barrinha do % do financiado, filete sob o prazo, entrada suave dos cartões */
.smPage .smSubsGrid4 .smSubsRebateRow strong { color: var(--color-accent-primary); }
.smPage .smSubsGrid4 .smSubsidiadaCardValueStack { width: 100%; }
.smPage .smRebateBar { display: block; width: 100%; height: 4px; margin: 5px 0 3px; border-radius: 2px; background: var(--color-hairline-strong); overflow: hidden; }
.smPage .smRebateBar > span { display: block; height: 100%; border-radius: 2px; background: var(--color-accent-primary); }
.smPage .smSubsGrid4 .smSubsidiadaCardPrazo { display: flex; flex-direction: column; align-items: center; }
.smPage .smSubsGrid4 .smSubsidiadaCardPrazo::after { content: ''; display: block; width: 34px; height: 3px; border-radius: 2px; background: var(--color-accent-primary); margin: 8px auto 2px; }
@keyframes smCardEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.smPage .smSubsGrid4 .smSubsidiadaCard { animation: smCardEntra .28s ease-out both; }
.smPage .smSubsGrid4 .smSubsidiadaCard:nth-child(2) { animation-delay: .03s; }
.smPage .smSubsGrid4 .smSubsidiadaCard:nth-child(3) { animation-delay: .06s; }
.smPage .smSubsGrid4 .smSubsidiadaCard:nth-child(4) { animation-delay: .09s; }
.smPage .smSubsGrid4 .smSubsidiadaCard:nth-child(5) { animation-delay: .12s; }
.smPage .smSubsGrid4 .smSubsidiadaCard:nth-child(6) { animation-delay: .15s; }
.smPage .smSubsGrid4 .smSubsidiadaCard:nth-child(7) { animation-delay: .18s; }
.smPage .smSubsGrid4 .smSubsidiadaCard:nth-child(n+8) { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .smPage .smSubsGrid4 .smSubsidiadaCard { animation: none; } }

/* Taxa Subsidiada: cartão de prazo tocável; o tocado mostra abaixo a divisão do rebate */
.smPage .smSubsGrid4 .smSubsidiadaCard[data-subs-prazo] { cursor: pointer; }
.smPage .smSubsGrid4 .smSubsidiadaCard[data-subs-prazo]:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }
.smPage .smSubsGrid4 .smSubsidiadaCard.selected { border-color: var(--color-accent-primary); box-shadow: inset 0 0 0 1px var(--color-accent-primary); }
.smPage .smSubsDetalhe { margin-top: 16px; }
.smPage .smSubsDetalhe .smRebateTrio { margin-top: 8px; }
.smPage .smSubsDica { margin-top: 12px; }