/*
 * Estilo das calculadoras — tokens replicados de
 * design_handoff_tudosobrefinancas/Tudo Sobre Financas v3.dc.html
 * (tela "FERRAMENTA"). Auto-contido: não depende do CSS do tema, porque
 * o bloco/shortcode precisa funcionar em qualquer tema ativo.
 */

.pf-calculator {
	--pf-principal: #004D40;
	--pf-destaque: #22C55E;
	--pf-destaque-claro: #4ADE80;
	--pf-destaque-mais-claro: #86EFAC;
	--pf-texto: #0F172A;
	--pf-secundario: #475569;
	--pf-metadados: #64748B;
	--pf-placeholder: #94A3B8;
	--pf-borda: #E5E7EB;
	--pf-fundo-card: #F8FAF9;
	--pf-fundo-tabela: #F1F5F4;
	--pf-aviso-texto: #92400E;
	--pf-aviso-fundo: #FFFBEB;
	font-family: "Montserrat", Helvetica, sans-serif;
	max-width: 900px;
	color: var(--pf-texto);
}

.pf-calculator__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: flex-start;
}

.pf-calculator__form {
	flex: 1 1 320px;
	border: 1px solid var(--pf-borda);
	border-radius: 12px;
	padding: 24px 22px;
	display: grid;
	gap: 18px;
	align-content: start;
}

.pf-calculator__field label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 7px;
}

.pf-calculator__input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--pf-borda);
	border-radius: 8px;
	padding: 11px 13px;
	background: #FFFFFF;
}

.pf-calculator__input-wrap:focus-within {
	border-color: var(--pf-destaque);
}

.pf-calculator__input-wrap input,
.pf-calculator__input-wrap select {
	border: none;
	outline: none;
	font-size: 15.5px;
	font-weight: 700;
	flex: 1;
	min-width: 0;
	font-family: inherit;
	background: transparent;
	color: var(--pf-texto);
}

.pf-calculator__affix {
	font-size: 13px;
	font-weight: 700;
	color: var(--pf-placeholder);
	white-space: nowrap;
}

.pf-calculator__help {
	font-size: 11px;
	color: var(--pf-metadados);
	margin: 0;
}

.pf-calculator__help--form {
	border-top: 1px solid var(--pf-borda);
	padding-top: 14px;
	line-height: 1.55;
}

.pf-calculator__result {
	flex: 1.4 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pf-calculator__hero {
	background: var(--pf-principal);
	border-radius: 12px;
	padding: 26px 24px;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pf-calculator__hero-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pf-destaque-mais-claro);
}

.pf-calculator__hero-value {
	font-size: clamp( 32px, 5vw, 46px );
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.pf-calculator__hero .pf-calculator__metrics {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba( 255, 255, 255, 0.18 );
}

.pf-calculator__hero .pf-calculator__metric-label {
	color: #9FBDB4;
}

.pf-calculator__hero .pf-calculator__metric-value {
	color: #FFFFFF;
}

.pf-calculator__hero .pf-calculator__metric-value--accent {
	color: var(--pf-destaque-claro);
}

.pf-calculator__metrics {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 16px;
}

.pf-calculator__metric {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pf-calculator__metric-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pf-metadados);
}

.pf-calculator__metric-value {
	font-size: 20px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--pf-texto);
}

.pf-calculator__metric-value--accent {
	color: #0B7A5F;
}

.pf-calculator__panel {
	border: 1px solid var(--pf-borda);
	border-radius: 12px;
	padding: 20px 22px;
}

.pf-calculator__panel-title,
.pf-calculator__table-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pf-principal);
	margin: 0 0 14px;
}

.pf-calculator__table-title {
	margin-top: 4px;
}

.pf-calculator__formula {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	color: #334155;
	background: var(--pf-fundo-card);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 14px;
	overflow-x: auto;
}

.pf-calculator__premises {
	margin: 0 0 14px;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--pf-secundario);
}

.pf-calculator__panel-links a {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pf-principal);
	border-bottom: 2px solid var(--pf-destaque);
	padding-bottom: 2px;
	text-decoration: none;
}

.pf-calculator__faq-item {
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--pf-fundo-tabela);
}

.pf-calculator__faq-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.pf-calculator__faq-question {
	font-size: 14.5px;
	font-weight: 700;
	margin-bottom: 5px;
}

.pf-calculator__faq-answer {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pf-secundario);
}

.pf-calculator__table-wrap {
	overflow-x: auto;
}

.pf-calculator__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.pf-calculator__table thead th {
	background: var(--pf-fundo-card);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pf-metadados);
	text-align: right;
	padding: 10px 12px;
}

.pf-calculator__table thead th:first-child,
.pf-calculator__table td:first-child {
	text-align: left;
}

.pf-calculator__table td {
	text-align: right;
	padding: 10px 12px;
	border-top: 1px solid var(--pf-fundo-tabela);
}

.pf-calculator__table-accent {
	color: #0B7A5F;
	font-weight: 600;
}

.pf-calculator__note {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--pf-aviso-texto);
	background: var(--pf-aviso-fundo);
	border: 1px solid #FDE68A;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 4px 0 0;
}

.pf-calculator__error {
	color: var(--pf-aviso-texto);
	font-size: 13px;
}

.pf-calculator__disclaimer {
	background: var(--pf-texto);
	color: #CBD5E1;
	border-radius: 10px;
	padding: 18px 22px;
	font-size: 12.5px;
	line-height: 1.6;
}

.pf-calculator__disclaimer strong {
	color: #FFFFFF;
}

.pf-calculator-error {
	color: var(--pf-aviso-texto);
	background: var(--pf-aviso-fundo);
	border: 1px solid #FDE68A;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
}