/**
 * Overlay de navegación — colores app COEDPI (ivory / olive / gold).
 * Solo front (no admin).
 */
.coedpi-nav-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(251, 250, 247, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.coedpi-nav-loader.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

/* Mientras dura la importación el overlay no puede quedar a medias (sin .is-visible). */
html.coedpi-nav-loading #coedpi-nav-loader {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

html.coedpi-nav-loading,
html.coedpi-nav-loading body {
	cursor: progress;
	overflow: hidden;
}

.coedpi-nav-loader__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	min-width: min(280px, 92vw);
	max-width: 360px;
	padding: 28px 26px 24px;
	border-radius: 18px;
	background: #fffef9;
	border: 1px solid rgba(61, 74, 31, 0.12);
	box-shadow: 0 18px 48px rgba(61, 74, 31, 0.14);
	text-align: center;
}

.coedpi-nav-loader__logo-wrap {
	position: relative;
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
}

.coedpi-nav-loader__logo {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}

.coedpi-nav-loader__logo-fallback {
	position: relative;
	z-index: 1;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--olive, #3d4a1f);
}

.coedpi-nav-loader__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid rgba(230, 195, 92, 0.28);
	border-top-color: var(--gold, #e6c35c);
	border-right-color: var(--olive, #3d4a1f);
	animation: coedpi-nav-spin 0.85s linear infinite;
}

.coedpi-nav-loader__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--olive, #3d4a1f);
	letter-spacing: 0.01em;
}

.coedpi-nav-loader__dest {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted, #7a7364);
	font-weight: 600;
	max-width: 28ch;
}

@keyframes coedpi-nav-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.coedpi-nav-loader__ring {
		animation-duration: 1.6s;
	}
	.coedpi-nav-loader {
		transition: none;
	}
}