/*
 * 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: 3;
	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} }

/* ═══════════════════════════════════════════════════════════════
   SKIN: BURST — Cuñas muy sutiles, como en la app móvil
   Referencia: los rayos son apenas visibles, ~8-10% más claros
   que el fondo. Se usa rgba(255,255,255,x) para que funcione con
   cualquier color de fondo configurado por el usuario.
   ═══════════════════════════════════════════════════════════════ */

.rl-skin-burst .rl-burst-bg {
	position: absolute;
	top: 50%; left: 50%;
	width:  200vmax;
	height: 200vmax;
	margin-top:  -100vmax;
	margin-left: -100vmax;
	z-index: 1;
	will-change: transform;
	animation: rl-burst-spin 28s linear infinite;

	/* 24 cuñas (12 anchas 8° + 12 angostas 4°) cada 30°.
	   Opacidad MUY baja: los rayos deben ser sutiles, no dominantes.
	   rgba(255,255,255,x) = blanco semi-transparente → funciona sobre
	   cualquier color oscuro configurado por el usuario. */
	background: conic-gradient(
		from 0deg at center,
		rgba(255,255,255,.090) 0deg   8deg,  transparent  8deg 17deg,
		rgba(255,255,255,.055) 17deg 21deg,  transparent 21deg 30deg,
		rgba(255,255,255,.090) 30deg 38deg,  transparent 38deg 47deg,
		rgba(255,255,255,.055) 47deg 51deg,  transparent 51deg 60deg,
		rgba(255,255,255,.090) 60deg 68deg,  transparent 68deg 77deg,
		rgba(255,255,255,.055) 77deg 81deg,  transparent 81deg 90deg,
		rgba(255,255,255,.090) 90deg 98deg,  transparent  98deg 107deg,
		rgba(255,255,255,.055) 107deg 111deg, transparent 111deg 120deg,
		rgba(255,255,255,.090) 120deg 128deg, transparent 128deg 137deg,
		rgba(255,255,255,.055) 137deg 141deg, transparent 141deg 150deg,
		rgba(255,255,255,.090) 150deg 158deg, transparent 158deg 167deg,
		rgba(255,255,255,.055) 167deg 171deg, transparent 171deg 180deg,
		rgba(255,255,255,.090) 180deg 188deg, transparent 188deg 197deg,
		rgba(255,255,255,.055) 197deg 201deg, transparent 201deg 210deg,
		rgba(255,255,255,.090) 210deg 218deg, transparent 218deg 227deg,
		rgba(255,255,255,.055) 227deg 231deg, transparent 231deg 240deg,
		rgba(255,255,255,.090) 240deg 248deg, transparent 248deg 257deg,
		rgba(255,255,255,.055) 257deg 261deg, transparent 261deg 270deg,
		rgba(255,255,255,.090) 270deg 278deg, transparent 278deg 287deg,
		rgba(255,255,255,.055) 287deg 291deg, transparent 291deg 300deg,
		rgba(255,255,255,.090) 300deg 308deg, transparent 308deg 317deg,
		rgba(255,255,255,.055) 317deg 321deg, transparent 321deg 330deg,
		rgba(255,255,255,.090) 330deg 338deg, transparent 338deg 347deg,
		rgba(255,255,255,.055) 347deg 351deg, transparent 351deg 360deg
	);
}

/* Círculo central ESTÁTICO — oculta la intersección agresiva
   de los rayos en el punto de convergencia.
   El gradiente va del color del fondo (sólido) hacia transparente
   con un fade suave, sin crear un "agujero" visible. */
.rl-skin-burst .rl-burst-glow {
	position: absolute;
	z-index: 2;
	top:  50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 60px: lo suficiente para cubrir el punto exacto de convergencia,
	   pero lo suficientemente pequeño para quedar 100% oculto bajo el logo */
	width:  60px;
	height: 60px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(
		circle at center,
		var(--srl-bg-color, #0d1863) 0%,
		transparent                   100%
	);
}

@keyframes rl-burst-spin {
	to { transform: rotate(360deg); }
}

/* Barra de progreso */
.rl-progress-wrap {
	width:         90px;
	height:        2px;
	background:    rgba(255,255,255,0.18);
	border-radius: 1px;
	overflow:      hidden;
	margin-top:    18px;
}
.rl-progress-fill {
	width:         0%;
	height:        100%;
	background:    var(--sc, rgba(255,255,255,0.85));
	border-radius: 1px;
	transition:    width 0.35s ease;
}