/* ==========================================================================
   Calculadoras financeiras
   Herda os tokens de theme.css (--ink, --red, --f-head, --f-body…).
   ========================================================================== */

.fdb-calc{
  background:var(--surface-white);
  border:1px solid var(--outline-variant);
  padding:clamp(22px,2.4vw,34px);
  margin-block:40px;
}
.fdb-calc__topo{ margin-bottom:26px; }
.fdb-calc__titulo{ font-family:var(--f-head); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(21px,2vw,30px); line-height:1.2; margin-bottom:8px; }
.fdb-calc__resumo{ font-family:var(--f-body); font-size:15px; line-height:1.55;
  color:var(--ink-soft); max-width:70ch; }

/* ------------------------------- campos ---------------------------------- */
.fdb-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.fdb-campo label{ display:block; font-family:var(--f-label); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--outline); margin-bottom:7px; }
.fdb-input{ display:flex; align-items:stretch; border:1px solid var(--outline-variant); background:#fff; }
.fdb-input:focus-within{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.fdb-input input{ flex:1; min-width:0; border:0; outline:0; background:none; padding:12px 13px;
  font-family:var(--f-body); font-size:16px; font-variant-numeric:tabular-nums; color:var(--ink); }
.fdb-afixo{ display:flex; align-items:center; padding:0 12px; background:var(--surface-low);
  font-family:var(--f-label); font-size:13px; font-weight:600; color:var(--outline);
  border-inline-start:1px solid var(--outline-variant); }
.fdb-input.tem-prefixo .fdb-afixo:first-child{ border:0; border-inline-end:1px solid var(--outline-variant); }
.fdb-campo select{ width:100%; padding:12px 13px; border:1px solid var(--outline-variant);
  background:#fff; font-family:var(--f-body); font-size:15px; outline:0; }
.fdb-campo select:focus{ border-color:var(--ink); }
.fdb-radios{ display:flex; gap:0; border:1px solid var(--outline-variant); }
.fdb-radio{ flex:1; position:relative; }
.fdb-radio input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.fdb-radio span{ display:block; text-align:center; padding:12px 8px; cursor:pointer;
  font-family:var(--f-body); font-size:14.5px; transition:background .2s,color .2s; }
.fdb-radio input:checked + span{ background:var(--ink); color:#fff; font-weight:600; }
.fdb-radio input:focus-visible + span{ outline:3px solid var(--red); outline-offset:-3px; }

.fdb-fonte{ margin-top:6px; font-family:var(--f-body); font-size:12px; line-height:1.4; }
.fdb-fonte.is-oficial{ color:var(--outline); }
.fdb-fonte.is-oficial b{ color:var(--ink); }
.fdb-fonte.is-manual{ color:var(--red); }

/* ------------------------------ resultados ------------------------------- */
.fdb-calc__saida{ margin-top:30px; padding-top:28px; border-top:2px solid var(--ink); }
.fdb-destaques{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:2px;
  background:var(--outline-variant); border:1px solid var(--outline-variant); margin-bottom:28px; }
.fdb-destaque{ background:var(--surface-white); padding:18px 20px; }
.fdb-destaque.is-forte{ background:var(--ink); }
.fdb-destaque__rot{ display:block; font-family:var(--f-label); font-size:10.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--outline); margin-bottom:8px; }
.fdb-destaque.is-forte .fdb-destaque__rot{ color:rgba(255,255,255,.62); }
.fdb-destaque__val{ display:block; font-family:var(--f-head); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,1.9vw,27px); line-height:1.1; font-variant-numeric:tabular-nums; }
.fdb-destaque.is-forte .fdb-destaque__val{ color:#fff; }
.fdb-destaque__nota{ display:block; margin-top:7px; font-family:var(--f-body); font-size:12.5px;
  line-height:1.4; color:var(--outline); }
.fdb-destaque.is-forte .fdb-destaque__nota{ color:rgba(255,255,255,.7); }

/* -------------------------------- gráfico -------------------------------- */
.fdb-grafico{ margin-bottom:24px; }
.fdb-graf-wrap{ position:relative; }
.fdb-graf{ width:100%; height:auto; display:block; touch-action:pan-y; }
.fdb-grade{ stroke:var(--outline-variant); stroke-width:1; opacity:.55; }
.fdb-eixo{ font-family:var(--f-body); font-size:11px; fill:var(--outline); }
.fdb-area-total{ fill:var(--red); opacity:.16; }
.fdb-area-aporte{ fill:var(--ink); opacity:.10; }
.fdb-linha-total{ stroke:var(--red); stroke-width:2.5; }
.fdb-linha-aporte{ stroke:var(--ink); stroke-width:2; stroke-dasharray:5 4; }
.fdb-foco-linha{ stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; opacity:.5; }
.fdb-foco-p1{ fill:var(--red); stroke:#fff; stroke-width:2; }
.fdb-foco-p2{ fill:var(--ink); stroke:#fff; stroke-width:2; }
.fdb-dica{ position:absolute; top:8px; pointer-events:none; background:var(--ink); color:#fff;
  padding:10px 13px; min-width:180px; font-family:var(--f-body); font-size:12.5px; line-height:1.5; z-index:3; }
.fdb-dica b{ display:block; font-family:var(--f-head); font-size:13px; margin-bottom:5px; }
.fdb-dica span{ display:flex; align-items:center; gap:7px; }
.fdb-dica i,.fdb-legenda i{ width:10px; height:10px; flex:none; display:inline-block; }
.fdb-p-total{ background:var(--red); }
.fdb-p-aporte{ background:var(--ink); }
.fdb-p-juros{ background:var(--red); opacity:.45; }
.fdb-legenda{ display:flex; flex-wrap:wrap; gap:20px; margin-top:12px;
  font-family:var(--f-body); font-size:13px; color:var(--ink-soft); }
.fdb-legenda span{ display:inline-flex; align-items:center; gap:8px; }
.fdb-legenda .fdb-p-aporte{ background:var(--ink); opacity:.35; }
.fdb-vazio{ padding:36px; text-align:center; color:var(--outline); font-size:14px;
  background:var(--surface-low); }
.fdb-fx-area.sobe{ fill:#1a7f37; opacity:.12; }
.fdb-fx-area.cai{ fill:var(--red); opacity:.12; }
.fdb-fx-linha{ stroke-width:2.5; }
.fdb-fx-linha.sobe{ stroke:#1a7f37; }
.fdb-fx-linha.cai{ stroke:var(--red); }

/* -------------------------------- barras --------------------------------- */
.fdb-barras{ display:flex; flex-direction:column; gap:14px; }
.fdb-barras li{ display:grid; grid-template-columns:minmax(120px,1.1fr) 3fr minmax(90px,auto);
  align-items:center; gap:14px; list-style:none; }
.fdb-barras__rot{ font-family:var(--f-body); font-size:14px; }
.fdb-barras__rot b{ font-family:var(--f-label); font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; background:var(--red); color:#fff; padding:2px 6px; margin-left:6px; }
.fdb-barras__trilho{ height:26px; background:var(--surface-variant); display:block; }
.fdb-barras__trilho i{ display:block; height:100%; background:var(--ink); transition:width .5s cubic-bezier(.22,.61,.36,1); }
.fdb-barras .is-melhor .fdb-barras__trilho i{ background:var(--red); }
.fdb-barras__val{ font-family:var(--f-head); font-weight:600; font-size:15px; text-align:right;
  font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .fdb-barras li{ grid-template-columns:1fr auto; }
  .fdb-barras__trilho{ grid-column:1 / -1; }
}

/* -------------------------------- tabela --------------------------------- */
.fdb-tabela-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fdb-tabela{ width:100%; border-collapse:collapse; font-family:var(--f-body); font-size:14px; }
.fdb-tabela th,.fdb-tabela td{ padding:11px 14px; text-align:right; border-bottom:1px solid var(--outline-variant);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.fdb-tabela th:first-child,.fdb-tabela td:first-child{ text-align:left; }
.fdb-tabela thead th{ font-family:var(--f-label); font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--outline); border-bottom:2px solid var(--ink); }
.fdb-tabela tbody tr:nth-child(even){ background:var(--surface-low); }
.fdb-calc__nota{ margin-top:20px; font-family:var(--f-body); font-size:13px; line-height:1.6;
  color:var(--outline); border-left:3px solid var(--outline-variant); padding-left:14px; }
.fdb-aviso{ padding:20px; background:var(--surface-low); border-left:3px solid var(--red);
  font-family:var(--f-body); font-size:14.5px; color:var(--ink-soft); }

/* ------------------------------- conversor ------------------------------- */
.fdb-conv__linha{ display:grid; grid-template-columns:1fr 1.2fr auto 1.2fr; gap:14px; align-items:end; }
.fdb-moeda-sel{ position:relative; display:flex; align-items:center; border:1px solid var(--outline-variant); background:#fff; }
.fdb-moeda-sel:focus-within{ border-color:var(--ink); }
.fdb-bandeira{ width:28px; height:28px; border-radius:50%; margin-left:10px; flex:none;
  background:var(--surface-variant) center/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  display:grid; place-items:center; font-family:var(--f-head); font-weight:700; font-size:13px; }
.fdb-bandeira.is-cripto{ background:var(--ink); color:#fff; }
.fdb-moeda-sel select{ border:0; flex:1; min-width:0; }
.fdb-conv__troca{ width:46px; height:46px; flex:none; border:1px solid var(--outline-variant);
  background:#fff; cursor:pointer; display:grid; place-items:center; transition:background .2s,color .2s; }
.fdb-conv__troca:hover{ background:var(--ink); color:#fff; }
.fdb-conv__troca svg{ width:19px; height:19px; }
.fdb-conv__res-val{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.fdb-conv__res-val span{ font-family:var(--f-body); font-size:17px; color:var(--outline); }
.fdb-conv__res-val b{ font-family:var(--f-head); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(28px,3.4vw,46px); line-height:1.05; }
.fdb-conv__taxa{ margin-top:10px; font-family:var(--f-body); font-size:15px; color:var(--ink-soft); }
.fdb-conv__taxa .sobe{ color:#1a7f37; font-weight:600; }
.fdb-conv__taxa .cai{ color:var(--red); font-weight:600; }
.fdb-conv__fonte,.fdb-conv__hist{ margin-top:8px; font-family:var(--f-body); font-size:12.5px; color:var(--outline); }
.fdb-conv__hist b.sobe{ color:#1a7f37; }
.fdb-conv__hist b.cai{ color:var(--red); }
@media (max-width:820px){
  .fdb-conv__linha{ grid-template-columns:1fr 1fr; }
  .fdb-conv__troca{ grid-column:1 / -1; width:100%; }
}

/* --------------------------- lista de calculadoras ------------------------ */
.fdb-calc-hub{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px;
  background:var(--outline-variant); border:1px solid var(--outline-variant); }
.fdb-calc-card{ background:var(--surface-white); padding:24px; display:flex; flex-direction:column; gap:10px;
  transition:background .2s; }
.fdb-calc-card:hover{ background:var(--surface-low); }
.fdb-calc-card h3{ font-family:var(--f-head); font-weight:600; font-size:18px; line-height:1.3; }
.fdb-calc-card p{ font-family:var(--f-body); font-size:14px; line-height:1.55; color:var(--ink-soft); }
.fdb-calc-card__ir{ margin-top:auto; font-family:var(--f-label); font-size:11px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--red); }

/* ------------------------------- painel de taxas -------------------------- */
.fdb-taxas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px;
  background:var(--outline-variant); border:1px solid var(--outline-variant); margin-block:28px; }
.fdb-taxa{ background:var(--surface-white); padding:16px 18px; }
.fdb-taxa__rot{ display:block; font-family:var(--f-label); font-size:10px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--outline); margin-bottom:6px; }
.fdb-taxa__val{ font-family:var(--f-head); font-weight:700; font-size:23px; font-variant-numeric:tabular-nums; }
.fdb-taxa__data{ display:block; margin-top:4px; font-family:var(--f-body); font-size:11.5px; color:var(--outline); }