/* Simulador de remuneração do SDR · complementa /assets/nt.css (nt-calc, nt-campo, nt-tabela...).
   Só cores da marca: azul #1296FC, fundos #141619/#1A1D1F/#1C1C1E, cinzas #5F6A6C/#95A5A6. */

/* --------------------------------------------- partes comuns das calculadoras */
.calc-grupo { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.calc-grupo legend {
  padding: 0; margin: 0 0 .8rem;
  font-family: var(--nt-fonte-titulo); font-weight: 500; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--nt-cinza-claro);
}
.nt-campo input[aria-invalid="true"] { border-color: #ffffff; border-style: dashed; }
.calc-resumo {
  margin: 1.3rem 0 0; padding: .9rem 1rem; border-radius: 12px;
  background: var(--nt-azul-fundo); border: 1px solid rgba(18, 150, 252, .35);
  font-family: var(--nt-fonte-titulo); font-weight: 500; color: #ffffff; line-height: 1.5;
}
.calc-cta {
  margin: 1rem 0 0; padding: 1rem 1.1rem; border-radius: 12px;
  background: var(--nt-campo); border: 1px solid var(--nt-borda-forte);
}
.calc-cta p { margin: 0 0 .85rem; font-size: .98rem; line-height: 1.6; color: var(--nt-texto-suave); }

/* --------------------------------------------- colunas empilhadas (fixo + variável) */
.rem-colunas {
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1rem; align-items: end;
  margin: .6rem 0 1rem; padding: 1rem 1rem .6rem; border-radius: 12px;
  background: var(--nt-campo); border: 1px solid var(--nt-borda-forte);
}
.rem-colunas[hidden] { display: none; }
.rem-coluna { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.rem-pilha {
  display: flex; flex-direction: column; justify-content: flex-end;
  width: min(72px, 100%); height: 130px;
}
.rem-pilha span { display: block; width: 100%; transition: height .25s ease; }
.rem-pilha-variavel { background: var(--nt-azul); border-radius: 6px 6px 0 0; }
.rem-pilha-fixo { background: var(--nt-cinza); }
.rem-coluna-rotulo { font-family: var(--nt-fonte-titulo); font-size: .85rem; color: var(--nt-texto-suave); }
.rem-legenda { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .82rem; color: var(--nt-cinza-claro); text-align: center; }
.rem-chave::before {
  content: ""; display: inline-block; width: .75em; height: .75em; margin-right: .35em;
  border-radius: 2px; vertical-align: -.05em;
}
.rem-chave-fixo::before { background: var(--nt-cinza); }
.rem-chave-variavel { margin-left: .9rem; }
.rem-chave-variavel::before { background: var(--nt-azul); }

/* --------------------------------------------- tabela lado a lado */
.rem-tabela table { font-size: .9rem; }
.rem-tabela th, .rem-tabela td { padding: .55rem .6rem; }
.rem-tabela thead th { font-size: .82rem; line-height: 1.3; vertical-align: bottom; }
.rem-tabela tbody th { background: transparent; font-family: var(--nt-fonte-texto); font-weight: 400; color: var(--nt-texto-suave); }
.rem-tabela td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rem-tabela thead th:not(:first-child) { text-align: right; }
.rem-tabela .rem-linha-forte th, .rem-tabela .rem-linha-forte td { color: #ffffff; font-weight: 600; }
.rem-tabela thead th:nth-child(3), .rem-tabela td:nth-child(3) { background: var(--nt-azul-fundo); }
.rem-mix { margin: 0; font-size: .92rem; color: var(--nt-texto-suave); }
@media (max-width: 420px) {
  .rem-tabela th, .rem-tabela td { padding: .5rem .35rem; }
  .rem-tabela th:first-child { padding-left: .6rem; }
  .rem-tabela td:last-child, .rem-tabela thead th:last-child { padding-right: .6rem; }
  .rem-tabela table { font-size: .8rem; }
}