/* ========================================
   COMPONENTE DE LOADING REUTILIZÁVEL
   Cores do style.css do projeto
   ======================================== */

/* Overlay de fundo do loading */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(241, 245, 253, 0.95); /* --color-bg com transparência */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
	opacity: 0;
	pointer-events: none;
}

/* Container do loading */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

/* Spinner animado */
.loading-spinner {
	width: 60px;
	height: 60px;
	border: 4px solid #e2e8f0;
	border-top: 4px solid #0b64f4; /* --color-primary */
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

/* Animação de rotação */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Texto do loading */
.loading-text {
	font-family: "Poppins", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #151d30; /* --color-text-primary */
	text-align: center;
}

/* Pontos animados */
.loading-dots {
	display: inline-block;
}

.loading-dots::after {
	content: '';
	animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
	0%, 20% { content: ''; }
	40% { content: '.'; }
	60% { content: '..'; }
	80%, 100% { content: '...'; }
}

/* ========================================
   VARIAÇÃO: Loading com pulso
   ======================================== */
.loading-pulse {
	display: flex;
	gap: 0.5rem;
}

.loading-pulse-dot {
	width: 12px;
	height: 12px;
	background-color: #0b64f4; /* --color-primary */
	border-radius: 50%;
	animation: pulse 1.4s ease-in-out infinite;
}

.loading-pulse-dot:nth-child(2) {
	animation-delay: 0.2s;
}

.loading-pulse-dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes pulse {
	0%, 80%, 100% {
		transform: scale(0.6);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* ========================================
   VARIAÇÃO: Loading com anel duplo
   ======================================== */
.loading-ring {
	position: relative;
	width: 60px;
	height: 60px;
}

.loading-ring-inner,
.loading-ring-outer {
	position: absolute;
	border: 3px solid transparent;
	border-radius: 50%;
}

.loading-ring-outer {
	width: 60px;
	height: 60px;
	border-top-color: #0b64f4; /* --color-primary */
	animation: spin 1.2s linear infinite;
}

.loading-ring-inner {
	width: 40px;
	height: 40px;
	top: 10px;
	left: 10px;
	border-top-color: #072ac8; /* --color-primary-hover */
	animation: spin 0.8s linear infinite reverse;
}