/**
 * Bloco de comparação com a tabela FIPE.
 *
 * As cores vêm de variáveis com valor de reserva, para o bloco se acomodar ao
 * tema sem depender dele.
 */
.autorepasse-fipe-grafico {
	--arfipe-borda: var( --wpcd-border-color, #e2e5e1 );
	--arfipe-texto: var( --wpcd-body-color, #23282d );
	--arfipe-suave: #6b7178;
	--arfipe-abaixo: #2c6350;
	--arfipe-acima: #a3302a;

	border: 1px solid var( --arfipe-borda );
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	color: var( --arfipe-texto );
}

.autorepasse-fipe-grafico__titulo {
	margin: 0 0 1rem;
	font-size: 1.05rem;
}

.autorepasse-fipe-grafico__valores {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin-bottom: 0.75rem;
}

.autorepasse-fipe-grafico__rotulo {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --arfipe-suave );
}

.autorepasse-fipe-grafico__numero {
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
}

.autorepasse-fipe-grafico__diferenca {
	margin: 0 0 0.75rem;
	font-weight: 600;
}

.autorepasse-fipe-grafico__diferenca.is-abaixo {
	color: var( --arfipe-abaixo );
}

.autorepasse-fipe-grafico__diferenca.is-acima {
	color: var( --arfipe-acima );
}

.autorepasse-fipe-grafico__referencia,
.autorepasse-fipe-grafico__legenda {
	margin: 0;
	font-size: 0.85rem;
	color: var( --arfipe-suave );
}

.autorepasse-fipe-grafico__tela {
	position: relative;
	height: 220px;
	margin: 1rem 0 0.5rem;
}