/* =========================================
   UI BUTTONS FRAMEWORK
   ========================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px; /* Spacing between icon and text */
	background-color: var(--main-color-light);
	color: var(--color-text-on-dark);
	padding: var(--spacing-md);
	border-radius: var(--btn-radius);
	border: none;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	font-family: var(--font-ui);
	line-height: 100%;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	cursor: pointer;
	transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.btn:hover:not(:disabled) {
	color: var(--color-text-on-dark);
	background-color: var(--main-color-dark);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	transform: translateY(-1px);
}

/* Modifiers - Cores */
.btn-primary { background-color: var(--secondary-color); color: var(--color-text-on-dark); }
.btn-primary:hover:not(:disabled) { background-color: var(--secondary-color-dark); }

.btn-dark { background-color: var(--color-text-dark); color: var(--color-text-on-dark); }
.btn-dark:hover:not(:disabled) { background-color: #000; }

.btn-danger { background-color: var(--color-danger); color: var(--color-text-on-dark); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.9); }

.btn-warning { background-color: var(--color-warning); color: var(--color-text-dark); }
.btn-warning:hover:not(:disabled) { filter: brightness(0.9); }

.btn-success { background-color: var(--color-success); color: var(--color-text-on-dark); }
.btn-success:hover:not(:disabled) { filter: brightness(0.9); }

.btn-outline {
	background-color: transparent;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	padding: calc(12px - 2px) calc(16px - 2px); /* Calc to preserve visual size against standard --spacing-md */
	box-shadow: none;
}
.btn-outline:hover:not(:disabled) {
	background-color: var(--main-color);
	color: var(--color-text-on-dark);
}

/* Modifiers - Tamanho */
.btn-sm {
	padding: var(--spacing-sm);
	font-size: 0.85em;
}
.btn-sm img.icon {
	width: 14px;
	height: 14px;
}

.btn-lg {
	padding: var(--spacing-lg);
	font-size: 1.15em;
}

/* Modifier - Apenas Ícone */
.btn-icon-only {
	padding: 12px;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}

/* Integração Mágica de Ícones SVG */
.btn img.icon {
	width: 16px;
	height: 16px;
	/* Transformação de preto para branco no SVG para contrastar com background escuro */
	filter: invert(1) brightness(2); 
}
.btn-outline img.icon {
	/* Corresponda à cor do outline. Essa aproximação via filter mantém o botão laranja na versão light */
	filter: invert(37%) sepia(85%) saturate(2321%) hue-rotate(345deg) brightness(97%) contrast(92%);
}
.btn-outline:hover:not(:disabled) img.icon {
	filter: invert(1) brightness(2);
}
.btn-warning img.icon {
	filter: none; /* Mantém preto para botões amarelos avisos */
}

/* Estados */
.btn:disabled, .btn.is-disabled {
	background-color: var(--color-disabled) !important;
	color: #999 !important;
	border-color: var(--color-disabled) !important;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}
.btn:disabled img.icon {
	filter: invert(0.6); /* Deixa o ícone cinza */
}

/* Evitar margem dupla nos botoes proximos */
.btn + .btn {
	margin-left: 6px;
}

@media (max-width: 1600px) {}
@media (max-width: 1200px) {}
@media (max-width: 1024px) {}
@media (max-width: 840px) {}
@media (max-width: 720px) {
	.btn {
		gap: 6px;
		padding: 8px 12px;
		font-size: 0.9em;
	}

	.btn-outline {
		padding: 6px 10px;
	}

	.btn-sm {
		padding: 6px 10px;
		font-size: 0.8em;
	}

	.btn-lg {
		padding: 10px 14px;
		font-size: 1em;
	}

	.btn-icon-only {
		padding: 10px;
	}

	.btn img.icon {
		width: 14px;
		height: 14px;
	}

	.btn-sm img.icon {
		width: 12px;
		height: 12px;
	}
}
@media (max-width: 600px) {}
@media (max-width: 480px) {}
@media (max-width: 320px) {}