/* Componentes das páginas de calculadora (fundação, 08/11/2026).
   Carregar depois de tokens.css e site.css. Prefixo nf-. Visual de referência: docs/pacote-3-funcionalidades/features/*/mockup/. */

/* ---- Faixa de indicadores (cabeçalho) ---- */
.nf-indicators{background:var(--graphite-900);border-top:1px solid var(--graphite-800)}
.nf-indicators__inner{max-width:var(--container);margin:0 auto;padding:8px var(--gutter);display:flex;flex-wrap:wrap;gap:6px 28px;font-size:12px;line-height:16px;color:var(--ink-inverse-muted);font-variant-numeric:tabular-nums}
.nf-indicators strong{color:var(--ink-inverse);font-weight:600}
.nf-indicators__source{margin-left:auto}
@media (max-width:767px){.nf-indicators__inner{gap:4px 16px}.nf-indicators__source{margin-left:0;flex-basis:100%}}

/* ---- Cabeçalho da página ---- */
.nf-page{max-width:var(--container);margin:0 auto;padding:32px var(--gutter) 0;box-sizing:border-box;width:100%}
.nf-crumbs{font-size:12px;line-height:16px;color:var(--ink-muted);margin:0 0 16px}
.nf-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.nf-crumbs li+li::before{content:'›';margin-right:4px}
.nf-crumbs a{color:var(--ink-muted);text-decoration:none}.nf-crumbs a:hover{color:var(--ink);text-decoration:underline}
.nf-crumbs [aria-current]{color:var(--ink-secondary)}
.nf-title{margin:0;font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.nf-subtitle{margin:8px 0 32px;font-size:16px;line-height:24px;color:var(--ink-secondary);max-width:720px}
@media (max-width:767px){.nf-page{padding-top:20px}.nf-title{font-size:28px;line-height:34px}}

/* ---- Grade formulário + resultado ---- */
.nf-layout{display:grid;grid-template-columns:minmax(0,var(--form-column)) minmax(0,1fr);gap:24px;align-items:start}
.nf-results{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:959px){.nf-layout{grid-template-columns:minmax(0,1fr)}}

/* ---- Cartão de formulário e campos ---- */
.nf-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:20px}
.nf-form h2,.nf-form__title{margin:0;font-size:17px;line-height:24px;font-weight:600}
.nf-field{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0}
.nf-field>label,.nf-field>legend,.nf-field__label{font-size:13px;line-height:18px;font-weight:500;color:var(--ink-secondary);padding:0}
.nf-field__control{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 14px;min-height:48px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.nf-field__control:hover{border-color:var(--graphite-300)}
.nf-field__control:focus-within{border-color:var(--graphite-950);box-shadow:var(--shadow-focus)}
.nf-field__control input{border:0;outline:0;flex:1;min-width:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;padding:10px 0}
.nf-field__unit{font-size:13px;color:var(--ink-muted);white-space:nowrap}
.nf-field__hint{margin:0;font-size:12px;line-height:16px;color:var(--ink-muted)}
.nf-field__error{margin:0;font-size:12px;line-height:16px;color:var(--status-failed)}
.nf-field__error:empty{display:none}
.nf-field:has([aria-invalid=true]) .nf-field__control{border-color:var(--status-failed);background:var(--status-failed-bg)}
.nf-check{display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;color:var(--ink-secondary);cursor:pointer}
.nf-check input{width:20px;height:20px;margin:0;accent-color:var(--orange-600)}
.nf-check:has(input:disabled){color:var(--ink-muted);cursor:not-allowed}
.nf-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- Controle segmentado ---- */
.nf-segmented{display:flex;gap:4px;padding:4px;background:var(--surface-sunken);border-radius:var(--radius-md)}
.nf-segmented button{flex:1;min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--ink-secondary);font:inherit;font-size:13px;line-height:16px;font-weight:500;padding:4px 8px;cursor:pointer}
.nf-segmented button:hover{background:var(--surface);color:var(--ink)}
.nf-segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--graphite-200)}
.nf-segmented button:focus-visible{outline:0;box-shadow:var(--shadow-focus)}

/* ---- Botões ---- */
.nf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:20px;font-weight:500;text-decoration:none;cursor:pointer}
.nf-btn:hover{background:var(--surface-subtle);color:var(--ink)}
.nf-btn:focus-visible{outline:0;box-shadow:var(--shadow-focus)}
.nf-btn--primary{min-height:48px;background:var(--orange-500);border-color:var(--orange-500);color:var(--graphite-950);font-weight:600;font-size:15px}
.nf-btn--primary:hover{background:var(--orange-600);border-color:var(--orange-600);color:var(--graphite-950)}
.nf-btn--block{width:100%}
.nf-btn--link{border:0;background:none;padding:0;min-height:0;color:var(--orange-700);text-decoration:underline;text-underline-offset:4px;font-size:13px}
.nf-btn--link:hover{background:none;color:var(--orange-800)}

/* ---- Bloco de resposta (grafite) ---- */
.nf-answer{background:var(--graphite-950);color:var(--ink-inverse);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:12px}
.nf-answer__overline{margin:0;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-400)}
.nf-answer__badge{align-self:flex-start;background:var(--orange-500);color:var(--graphite-950);border-radius:var(--radius-pill);padding:3px 12px;font-size:12px;line-height:18px;font-weight:600}
.nf-answer__badge[hidden]{display:none}
.nf-answer__sentence{margin:0;font-size:17px;line-height:26px;font-weight:500;color:var(--ink-inverse)}
.nf-answer__value{margin:0;font-size:44px;line-height:48px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nf-answer__sub{margin:0;font-size:14px;line-height:20px;color:var(--ink-inverse-muted);font-variant-numeric:tabular-nums}
.nf-answer a{color:var(--orange-400)}
.nf-answer :focus-visible{outline:2px solid var(--orange-400);outline-offset:2px}
@media (max-width:767px){.nf-answer{padding:24px}.nf-answer__value{font-size:36px;line-height:42px}}

/* ---- Cartões de números ---- */
.nf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.nf-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:4px;min-width:0}
.nf-stat__label{margin:0;font-size:13px;line-height:18px;font-weight:500;color:var(--ink-secondary)}
.nf-stat__value{margin:0;font-size:22px;line-height:28px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nf-stat__sub{margin:0;font-size:12px;line-height:16px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.nf-stat--highlight .nf-stat__value{color:var(--orange-700)}
@media (max-width:767px){.nf-stats{grid-template-columns:minmax(0,1fr)}}

/* ---- Cartão de seção ---- */
.nf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.nf-card>h2,.nf-card__title{margin:0;font-size:17px;line-height:24px;font-weight:600}
.nf-card__sub{margin:4px 0 0;font-size:13px;line-height:18px;color:var(--ink-muted)}
.nf-card__note{margin:16px 0 0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.nf-card+.nf-card{margin-top:0}

/* ---- Barras horizontais ---- */
.nf-bars{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.nf-bar{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr) auto;align-items:center;gap:16px}
.nf-bar__label{font-size:13px;line-height:18px;color:var(--ink-secondary)}
.nf-bar__track{height:20px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.nf-bar__fill{display:block;height:100%;width:var(--nf-bar,0%);min-width:4px;border-radius:var(--radius-pill);background:var(--bar-default)}
.nf-bar__value{text-align:right;font-size:14px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nf-bar__value small{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-muted)}
.nf-bar--winner .nf-bar__fill{background:var(--bar-winner)}
.nf-bar--winner .nf-bar__label{color:var(--ink);font-weight:600}
.nf-bar--reference .nf-bar__fill{background:transparent;border:2px dashed var(--graphite-300);box-sizing:border-box}
/* Celular: rótulo e valor em cima, barra embaixo ocupando a largura toda. */
@media (max-width:599px){
 .nf-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'label value' 'track track';row-gap:6px;column-gap:12px}
 .nf-bar__label{grid-area:label}.nf-bar__value{grid-area:value}.nf-bar__track{grid-area:track;height:14px}
}

/* ---- Colunas empilhadas ---- */
.nf-columns{display:flex;align-items:flex-end;gap:12px;height:240px;margin:24px 0 0;padding:0;list-style:none}
.nf-column{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;min-width:0}
.nf-column__stack{flex:1;width:min(56px,100%);display:flex;flex-direction:column;justify-content:flex-end}
.nf-column__part{display:block;width:100%}
.nf-column__part--interest{background:var(--orange-500);border-radius:4px 4px 0 0}
.nf-column__part--invested{background:var(--graphite-300)}
.nf-column__part--invested:first-child{border-radius:4px 4px 0 0}
.nf-column__label{font-size:12px;line-height:16px;color:var(--ink-muted);white-space:nowrap}
.nf-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0;list-style:none;font-size:12px;line-height:16px;color:var(--ink-secondary)}
.nf-legend li{display:flex;align-items:center;gap:6px}
.nf-legend i{width:10px;height:10px;border-radius:2px;background:var(--graphite-300)}
.nf-legend i.is-accent{background:var(--orange-500)}
@media (max-width:599px){.nf-columns{height:180px;gap:6px}.nf-column__label{font-size:11px}}

/* ---- Tabela ---- */
.nf-table-wrap{overflow-x:auto;margin-top:16px;-webkit-overflow-scrolling:touch}
.nf-table-wrap:focus-visible{outline:0;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.nf-table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.nf-table caption{text-align:left;font-size:13px;color:var(--ink-muted);padding-bottom:8px}
.nf-table th,.nf-table td{padding:12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.nf-table th:first-child,.nf-table td:first-child{text-align:left}
.nf-table thead th{font-size:13px;font-weight:500;color:var(--ink-secondary)}
.nf-table tbody th{font-weight:600}
.nf-table tbody tr:last-child>*{border-bottom:0}

/* ---- Avisos ---- */
.nf-alert{border-radius:var(--radius-md);padding:12px 16px;font-size:14px;line-height:20px;border:1px solid var(--line-strong);background:var(--surface-subtle);color:var(--ink)}
.nf-alert--info{background:var(--orange-50);border-color:var(--orange-100)}
.nf-alert--warning{background:var(--status-historical-bg);border-color:#ead9a6;color:var(--status-historical)}
.nf-alert--error{background:var(--status-failed-bg);border-color:#f3c0c0;color:var(--status-failed)}
.nf-alert[hidden]{display:none}

/* ---- Painel recolhido (taxas usadas) ---- */
.nf-disclosure{border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface)}
.nf-disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14px;line-height:20px;font-weight:600}
.nf-disclosure>summary::-webkit-details-marker{display:none}
.nf-disclosure>summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:rotate(45deg);transition:transform .2s}
.nf-disclosure[open]>summary::after{transform:rotate(225deg)}
.nf-disclosure>summary small{display:block;font-weight:400;font-size:12px;color:var(--ink-muted)}
.nf-disclosure__body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:16px}
.nf-disclosure>summary:focus-visible{outline:0;box-shadow:var(--shadow-focus);border-radius:var(--radius-md)}
.nf-rate-origin{font-size:12px;line-height:16px;color:var(--ink-muted)}
.nf-rate-origin[data-status=official]{color:var(--status-official)}
.nf-rate-origin[data-status=manual]{color:var(--status-manual)}
.nf-rate-origin[data-status=unavailable]{color:var(--status-failed)}

/* ---- Entenda a calculadora + FAQ ---- */
.nf-explain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;margin-top:40px}
.nf-explain h2{margin:0 0 12px;font-size:22px;line-height:28px;font-weight:600}
.nf-explain h3{margin:24px 0 8px;font-size:17px;line-height:24px;font-weight:600}
.nf-explain p,.nf-explain li{font-size:15px;line-height:24px;color:var(--ink-secondary)}
.nf-formula{background:var(--surface-subtle);border-radius:var(--radius-md);padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:20px;white-space:pre-wrap;color:var(--ink);overflow-x:auto}
@media (max-width:959px){.nf-explain{grid-template-columns:minmax(0,1fr);padding:24px}}
.nf-faq{margin:0}
.nf-faq h2{font-size:17px;line-height:24px}
.nf-faq details{border-top:1px solid var(--line)}
.nf-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:15px;line-height:22px;font-weight:500;color:var(--ink)}
.nf-faq summary::-webkit-details-marker{display:none}
.nf-faq summary::after{content:'';flex-shrink:0;width:7px;height:7px;border-right:1.5px solid var(--ink-muted);border-bottom:1.5px solid var(--ink-muted);transform:rotate(45deg);margin-right:4px;transition:transform .2s}
.nf-faq details[open] summary::after{transform:rotate(225deg)}
.nf-faq summary:focus-visible{outline:0;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.nf-faq details p{margin:0 0 16px;font-size:14px;line-height:22px;color:var(--ink-secondary)}

/* ---- Relacionadas e compartilhar ---- */
.nf-related{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:32px 0 56px}
.nf-related>span,.nf-related>h2{margin:0;font-size:13px;line-height:18px;font-weight:400;color:var(--ink-secondary)}
.nf-related ul{display:contents;list-style:none}
.nf-related a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-size:13px;text-decoration:none}
.nf-related a:hover{border-color:var(--graphite-950)}
.nf-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nf-share__status{font-size:13px;color:var(--ink-muted);margin:0}
.nf-share__status[data-state=error]{color:var(--status-failed)}

/* ---- Barra fixa no celular ---- */
.nf-sticky-result{display:none}
@media (max-width:767px){
 .nf-sticky-result:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--graphite-950);color:var(--ink-inverse);box-shadow:var(--shadow-sticky)}
 .nf-sticky-result p{margin:0;font-size:14px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums}
 .nf-sticky-result a{flex-shrink:0;color:var(--orange-400);font-size:13px;font-weight:600}
 body.has-sticky-result .site-footer{padding-bottom:64px}
}

/* ---- Utilitários ---- */
.nf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nf-muted{color:var(--ink-muted)}
.nf-num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.nf-disclosure>summary::after,.nf-faq summary::after,.nf-field__control{transition:none}}

/* ---- Promovidos na integração (10/11/2026), a partir dos pedidos das três páginas ---- */
/* [hidden] vale em qualquer componente nf-* (antes .nf-stats/.nf-card/.nf-share com display próprio ignoravam). */
[class^="nf-"][hidden],[class*=" nf-"][hidden]{display:none}
/* Bloco de resposta focável pelo botão "Calcular": foco visível só pelo teclado. */
.nf-answer:focus{outline:0}
.nf-answer:focus-visible{outline:2px solid var(--orange-400);outline-offset:3px}
/* Isola .nf-table das regras globais de tabela da renda fixa em site.css (min-width 900px, thead fixo e cinza, última linha em negrito). */
.nf-table{min-width:0;border-collapse:collapse;border-spacing:0;font-size:14px;line-height:20px}
.nf-table caption{padding:0 0 8px;font-size:13px}
.nf-table thead th{background:transparent;position:static;min-width:0;box-shadow:none;border-bottom:1px solid var(--line);vertical-align:bottom}
.nf-table tbody tr:last-child td{font-weight:inherit;color:inherit}
.nf-table tbody tr:last-child th{font-weight:600;color:var(--ink)}
.nf-table tbody th{font-weight:600;color:var(--ink)}
/* Prefixo "R$" dentro do campo de moeda (as três páginas tinham uma cópia: .re-prefix, .bf-prefix, .pm-prefix). */
.nf-field__prefix{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:-4px}