/* Botones y "badges" de estado. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--fs-sm);
	transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
	white-space: nowrap;
}

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

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

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

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

.btn--ghost-light {
	border: 1px solid rgba(247, 245, 240, 0.6);
	color: var(--color-on-primary);
}

.btn--ghost-light:hover {
	background: rgba(247, 245, 240, 0.15);
}

.btn--block {
	width: 100%;
}

.btn:active {
	transform: scale(0.98);
}