/* =============================================================
   Botões e links de ação
   ============================================================= */

.botao {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-3) var(--e-5);
	border: 1px solid transparent;
	border-radius: var(--raio);
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.botao--primario {
	background: var(--c-acao);
	color: var(--c-texto-inverso);
}

.botao--primario:hover {
	background: var(--c-acao-hover);
	color: var(--c-texto-inverso);
}

.botao--contorno {
	border-color: var(--c-borda-forte);
	color: var(--c-texto-forte);
	background: transparent;
}

.botao--contorno:hover {
	border-color: var(--c-acao);
	color: var(--c-acao);
}

.botao--claro {
	background: var(--c-texto-inverso);
	color: var(--c-texto-forte);
}

.botao--claro:hover {
	background: var(--c-acao);
	color: var(--c-texto-inverso);
}

/* Link com seta, usado em cards e listagens. */
.link-seta {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	color: var(--c-acao);
	text-decoration: none;
}

.link-seta::after {
	content: "\2192";
	transition: transform var(--transicao);
}

.link-seta:hover::after {
	transform: translateX(3px);
}

/* Link para documento externo. */
.link-externo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	color: var(--c-apoio);
}

.link-externo::after {
	content: "\2197";
	font-size: 0.9em;
}