/*
 * BOTONES — tres variantes: fill, outline, ghost (+ accent para bandas oscuras).
 * Área táctil mínima 44px. Solo se anima color y un desplazamiento de 1px.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-sm);
	font-weight: var(--weight-semibold);
	font-size: var(--text-base);
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.btn:active {
	transform: translateY(1px);
}

.btn--fill {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.btn--fill:hover {
	background-color: var(--color-primary-hover);
}

.btn--outline {
	border: 1.5px solid var(--color-primary);
	color: var(--color-primary);
}

.btn--outline:hover {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.btn--ghost {
	padding-inline: var(--space-2);
	color: var(--color-primary);
}

.btn--ghost:hover .icon {
	translate: 3px 0;
}

.btn--ghost .icon {
	transition: translate var(--duration-fast) var(--ease-out);
}

/* Para bandas con fondo primary-strong. */
.btn--accent {
	background-color: var(--color-accent);
	color: var(--color-on-accent);
}

.btn--accent:hover {
	background-color: var(--color-accent-hover);
}