/*
 * Botones — componente global (ARQUITECTURA_WEB.md Cap. 9,
 * ROADMAP_IMPLEMENTACION.md Sprint 3). Construido con el Design System
 * v1.0 (DESIGN_TOKENS.md). Usado por el Hero desde el Sprint 4 y
 * reutilizable, sin cambios, por cualquier Sprint posterior.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.5;
	padding: 14px 28px;
	border-radius: var(--radius-md);
	border: var(--border-md) solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}
}

.btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Primario — único CTA principal del sitio (ARQUITECTURA_WEB.md Cap. 9) */
.btn--primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #FFFFFF;
}
.btn--primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}
.btn--primary:active {
	background: var(--color-accent-active);
	border-color: var(--color-accent-active);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
	background: var(--color-surface-border);
	border-color: var(--color-surface-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Secundario — contorno neutro, nunca compite con el primario */
.btn--secondary {
	background: transparent;
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}
.btn--secondary:hover {
	background: var(--color-surface-muted);
}
.btn--secondary:active {
	background: var(--color-surface-border);
}
.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] {
	border-color: var(--color-surface-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Ghost — sin contorno, uso mínimo (enlaces de apoyo, "Leer más") */
.btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--color-primary);
	padding-left: var(--space-2);
	padding-right: var(--space-2);
}
.btn--ghost:hover {
	background: var(--color-surface-muted);
}
.btn--ghost:active {
	background: var(--color-surface-border);
}
.btn--ghost:disabled,
.btn--ghost[aria-disabled="true"] {
	color: var(--color-text-muted);
	cursor: not-allowed;
}