.app-loading{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;background:#f4f8fdf2;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;text-align:center}
.app-loading.is-visible{opacity:1;visibility:visible}
.app-loading-body{padding:32px 24px;max-width:350px}
.app-loading-spinner{width:46px;height:46px;border-radius:50%;border:3px solid #d2e3f5;border-top-color:#258752;animation:app-loading-spin .8s linear infinite;margin:0 auto 20px}
.app-loading-body strong{display:block;font-size:17px;color:#102b48}
.app-loading-body p{margin:9px 0 0;color:#6c7c8d;font-size:13px}
@keyframes app-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.app-loading{transition:none}.app-loading-spinner{animation-duration:1.7s}}

/* Modo navegación: transición ligera de tres puntos, sin rueda ni texto. */
.app-loading[data-mode="navigation"]{background:#f4f8fdf0;transition:opacity .23s ease,visibility .23s ease}
.app-loading[data-mode="navigation"] .app-loading-spinner,
.app-loading[data-mode="navigation"] .app-loading-body strong,
.app-loading[data-mode="navigation"] .app-loading-body p{display:none}
.app-loading-dots{display:none;align-items:center;justify-content:center;gap:9px}
.app-loading[data-mode="navigation"] .app-loading-dots{display:flex}
.app-loading-dots span{width:11px;height:11px;border-radius:50%;background:#258752;animation:app-dot-pulse .85s ease-in-out infinite}
.app-loading-dots span:nth-child(2){animation-delay:.14s}
.app-loading-dots span:nth-child(3){animation-delay:.28s}
@keyframes app-dot-pulse{0%,65%,100%{opacity:.3;transform:translateY(0) scale(.8)}35%{opacity:1;transform:translateY(-6px) scale(1)}}
@media(prefers-reduced-motion:reduce){.app-loading-dots span{animation:none;opacity:1}}

/* El loading inicial (rueda) tiene prioridad sobre el de navegación (tres puntos). */
.app-loading{z-index:20000}
.app-loading[data-mode="navigation"]{z-index:19000}

/* Modo preparación: destello radial suave, sin rueda, puntos ni barra. */
.app-loading[data-mode="preparation"]{background:#f4f8fdf2}
.app-loading[data-mode="preparation"] .app-loading-spinner{width:62px;height:62px;border:0;border-radius:50%;margin:0 auto 22px;background:repeating-conic-gradient(from 0deg,#287ca8 0deg 11deg,transparent 11deg 30deg);-webkit-mask:radial-gradient(farthest-side,transparent 57%,#000 60%);mask:radial-gradient(farthest-side,transparent 57%,#000 60%);animation:app-loading-sun 1.7s ease-in-out infinite}
.app-loading[data-mode="preparation"] .app-loading-dots{display:none}
@keyframes app-loading-sun{0%{transform:rotate(0deg);opacity:.35}50%{opacity:1}100%{transform:rotate(360deg);opacity:.35}}
@media(prefers-reduced-motion:reduce){.app-loading[data-mode="preparation"] .app-loading-spinner{animation:none;opacity:1}}

/* Loading global por encima de mensajes, toasts, barra lateral y vistas modales. */
.app-loading{z-index:19000}

/* Modo data: procesamiento de consultas y datos; bloqueo de toda la interfaz. */
.app-loading[data-mode="data"] .app-loading-spinner{display:none}
.app-loading[data-mode="data"] .app-loading-dots{display:flex;margin:0 auto 22px}
.app-loading[data-mode="data"] .app-loading-body strong,.app-loading[data-mode="data"] .app-loading-body p{display:block}
.app-loading[data-mode="data"]{z-index:21000;pointer-events:auto}