/* NICHO Finanças · todos os kits: 50/30/20 budget. Quase tudo vem de ferramentas-base.css; aqui só o próprio dela. */

.nx-ft-orc .nx-orc-total {
	font-size: 44px;
}

/* Cores das 3 partes: necessidades (escuro), desejos (cor do site) e poupança (cinza). */
.nx-ft-orc .nx-orc-cor-0 { background: var(--nx-ink, #1B1B1B); }
.nx-ft-orc .nx-orc-cor-1 { background: var(--nx-accent, #39B510); }
.nx-ft-orc .nx-orc-cor-2 { background: #999999; }

/* Barra dividida nas 3 partes. */
.nx-ft-orc .nx-orc-barra {
	display: flex;
	height: 20px;
	border-radius: 10px;
	overflow: hidden;
}

.nx-ft-orc .nx-orc-barra span {
	width: 33.33%;
	transition: width .2s;
}

.nx-ft-orc .nx-orc-partes {
	display: flex;
	flex-direction: column;
}

.nx-ft-orc .nx-orc-parte {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) 64px 180px;
	gap: 16px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--nx-line, #F0F0F0);
}

.nx-ft-orc .nx-orc-ponto {
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.nx-ft-orc .nx-orc-parte__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nx-ft-orc .nx-orc-parte__text strong {
	font-size: 18px;
}

.nx-ft-orc .nx-orc-parte__text span {
	font-size: 14px;
	line-height: 1.5;
	color: var(--nx-muted, #444444);
}

.nx-ft-orc .nx-orc-parte__pct {
	font-size: 18px;
	font-weight: 700;
	color: var(--nx-muted, #444444);
}

.nx-ft-orc .nx-orc-parte__valor {
	font-size: 24px;
	font-weight: 800;
	text-align: right;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

@media (max-width: 560px) {
	.nx-ft-orc .nx-orc-total {
		font-size: 34px;
	}

	/* Valor vai para a linha de baixo, embaixo do texto. */
	.nx-ft-orc .nx-orc-parte {
		grid-template-columns: 16px minmax(0, 1fr) auto;
		gap: 8px 12px;
		padding: 16px 0;
	}

	.nx-ft-orc .nx-orc-parte__valor {
		grid-column: 2 / -1;
		font-size: 20px;
		text-align: left;
	}
}