/*
 * Start Re-Loader — Front-end Styles v1.0.0
 * Las animaciones se aplican por JS (inline styles), no dependen del CSS del tema.
 * El ancho del logo se inyecta como @media queries desde PHP (inline_styles).
 */

/* ═══ Wrapper ════════════════════════════════════════════════ */
#rl-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: transparent !important;
}

/* ═══ Paneles de fondo ═══════════════════════════════════════ */
.rl-bg-panel, .rl-bg-left, .rl-bg-right {
	position: absolute;
	top: 0;
	height: 100%;
	will-change: transform, opacity;
}
.rl-bg-panel { left: 0; width: 100%; }
.rl-bg-left  { left: 0; width: 50%; }
.rl-bg-right { right: 0; width: 50%; }

/* ═══ Contenido ══════════════════════════════════════════════ */
.rl-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

/* El ancho del logo se controla con @media desde inline_styles() en PHP */
.rl-logo {
	width: 100%;
	height: auto;
	display: block;
	max-width: 120px; /* fallback por si inline_styles no carga */
}

/* ═══ Spinners ═══════════════════════════════════════════════ */
.rl-spinner { --sc: #222; }

.rl-spinner.spin {
	width: 34px; height: 34px; border-radius: 50%;
	border: 3px solid rgba(0,0,0,.1);
	border-top-color: var(--sc); border-right-color: var(--sc);
	animation: rl-spin 0.7s linear infinite;
}
.rl-spinner.dots { display: flex; align-items: center; gap: 7px; }
.rl-spinner.dots span {
	display: inline-block; width: 10px; height: 10px;
	border-radius: 50%; background-color: var(--sc);
	animation: rl-bounce 1.1s ease-in-out infinite;
}
.rl-spinner.dots span:nth-child(1) { animation-delay: 0s;    }
.rl-spinner.dots span:nth-child(2) { animation-delay: 0.16s; }
.rl-spinner.dots span:nth-child(3) { animation-delay: 0.32s; }
.rl-spinner.pulse {
	width: 38px; height: 38px; border-radius: 50%;
	background-color: var(--sc);
	animation: rl-pulse 1.2s ease-in-out infinite;
}

@keyframes rl-spin   { to { transform: rotate(360deg); } }
@keyframes rl-bounce { 0%,80%,100%{transform:scale(0);opacity:.3} 40%{transform:scale(1);opacity:1} }
@keyframes rl-pulse  { 0%,100%{transform:scale(0.5);opacity:.4} 50%{transform:scale(1);opacity:1} }