/* ==========================================================
   Calculadora de correção monetária — estilos restritos a #calculadora
   Reaproveita tokens e componentes de formulário de styles.css (.field, .err, .btn-submit).
   ========================================================== */
#calculadora{ border-top:1px solid var(--line-light); }

#calculadora .calc-intro{ max-width:640px; margin-bottom:38px; }
#calculadora .calc-intro h2{ margin:14px 0 14px; font-size:clamp(30px,3.2vw,44px); line-height:1.12; }
#calculadora .calc-intro p{ margin:0; font-size:16px; line-height:1.7; }

#calculadora .calc-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:stretch;
}

#calculadora .calc-form{
  padding:30px; background:#fff; border:1px solid var(--line-light);
  display:flex; flex-direction:column; gap:14px;
}

#calculadora fieldset.field{ margin:0; padding:0; border:0; min-width:0; }
#calculadora fieldset.field legend{ padding:0; margin-bottom:6px; font-size:13px; color:var(--text-mid); }
#calculadora .calc-mes-ano{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:10px; }
#calculadora .field.has-error select{ border-color:#B4453C; }
#calculadora .field select{ width:100%; cursor:pointer; }
#calculadora .btn-submit:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

/* resultado */
#calculadora .calc-resultado{
  position:relative; padding:34px 32px; background:linear-gradient(180deg,var(--ink-soft) 0%,#110F0E 100%);
  color:var(--on-dark); display:flex; flex-direction:column; justify-content:center; gap:16px;
  border-top:2px solid var(--gold); outline:none;
}
#calculadora .calc-guia{ display:flex; flex-direction:column; gap:20px; }
#calculadora .calc-guia[hidden]{ display:none; }
#calculadora .calc-passos{ margin:4px 0 0; padding:0; list-style:none; counter-reset:passo; display:grid; gap:20px; }
#calculadora .calc-passos li{
  counter-increment:passo; position:relative; padding-left:56px; min-height:38px;
}
#calculadora .calc-passos li::before{
  content:counter(passo, decimal-leading-zero); position:absolute; left:0; top:-2px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(200,161,101,.45); border-radius:50%;
  font-family:var(--sans); font-size:13px; letter-spacing:.04em; color:var(--gold);
}
#calculadora .calc-passos strong{ display:block; font-family:var(--serif); font-size:21px; font-weight:500; color:var(--cream); line-height:1.25; }
#calculadora .calc-passos span{ display:block; margin-top:3px; font-size:14px; line-height:1.55; color:var(--on-dark-3); }
#calculadora .calc-base{
  margin:6px 0 0; padding-top:16px; border-top:1px solid var(--line-dark);
  font-size:12px; letter-spacing:.08em; color:var(--on-dark-3);
}
#calculadora .calc-vazio{ margin:0; font-size:15px; line-height:1.6; color:var(--on-dark-2); max-width:420px; }
#calculadora .calc-vazio.is-erro{ color:#E8A39C; }
#calculadora .calc-retry{
  align-self:flex-start; height:44px; padding:0 20px; border:1px solid var(--gold); background:transparent;
  color:var(--gold-light); font-family:var(--sans); font-size:15px; cursor:pointer;
  transition:background-color .3s var(--ease);
}
#calculadora .calc-retry:hover{ background:rgba(200,161,101,.1); }

#calculadora .calc-rotulo{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
#calculadora .calc-total{
  display:block; margin-top:6px; font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,4.4vw,52px); line-height:1.1; color:var(--cream); overflow-wrap:anywhere;
}
#calculadora .calc-detalhes{ margin:22px 0 0; display:grid; gap:0; }
#calculadora .calc-detalhes div{
  display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-top:1px solid var(--line-dark);
}
#calculadora .calc-detalhes dt{ font-size:14px; color:var(--on-dark-3); flex:none; }
#calculadora .calc-detalhes dd{ margin:0; font-size:14px; color:var(--cream); text-align:right; overflow-wrap:anywhere; }
#calculadora .calc-detalhes dd a{ color:var(--gold-light); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:860px){
  #calculadora .calc-grid{ grid-template-columns:1fr; gap:0; }
  #calculadora .calc-form{ padding:24px 20px; }
  #calculadora .calc-resultado{ padding:26px 20px; }
}

@media (max-width:420px){
  #calculadora .calc-detalhes div{ flex-direction:column; gap:2px; }
  #calculadora .calc-detalhes dd{ text-align:left; }
}