/* Loader global — overlay escuro com spinner exibido durante requisições AJAX.
   Controlado por js/components/loader.js (window.fluirLoader.show()/.hide()) e
   acionado automaticamente pelo wrapper ajax() em js/ajax.js. O markup é
   injetado pelo próprio JS — não é preciso colocar nada no HTML da página.

   Uso manual (fluxos com fetch()):
     window.fluirLoader.show();  // ... await fetch ...  window.fluirLoader.hide(); */

.loader-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 10050; /* acima de modais (50), drawers (50), datepicker (1000) e demo-banner (10000) */
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 14px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease, visibility 220ms ease;
}
.loader-overlay.is-visible { opacity: 1; visibility: visible; }

.loader-spinner {
	position: relative;
	width: 52px; height: 52px;
}
/* Pulso: dois círculos que expandem e somem, defasados (efeito radar/ping). */
.loader-spinner span {
	position: absolute; inset: 0;
	border-radius: 50%;
	background: #fff;
	opacity: .6;
	animation: loader-pulse 1400ms ease-out infinite;
}
.loader-spinner span:nth-child(2) { animation-delay: 700ms }

.loader-label {
	color: #fff;
	font-size: 13px; font-weight: 600;
	letter-spacing: .3px;
}

@keyframes loader-pulse {
	0%   { transform: scale(.3); opacity: .7 }
	100% { transform: scale(1);  opacity: 0  }
}

@media (prefers-reduced-motion: reduce) {
	.loader-spinner span { animation-duration: 2400ms }
	.loader-overlay { transition: none }
}