/**
 * Loader / splash Worix — reemplaza el fondo blanco + anillos azules legacy.
 * Compatible con #loader + .fadeOut (scripts.ejs) y overlay de login.
 */

:root {
    --n4-loader-gold: #c8a646;
    --n4-loader-gold-soft: #f3dfa2;
    --n4-loader-slate: #0f172a;
}

/* —— Splash de página (post-login / home) —— */
.loader-bg,
.n4-page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200, 166, 70, 0.14), transparent 55%),
        linear-gradient(160deg, #0b1220 0%, #132033 45%, #0f172a 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    pointer-events: all;
}

.n4-page-loader--nitro4 {
    background: #000;
}

.loader-bg.fadeOut,
.n4-page-loader.fadeOut,
.n4-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.n4-page-loader__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding: 1.75rem 2rem;
    text-align: center;
}

.n4-page-loader__logo {
    display: block;
    width: auto;
    height: 36px;
    max-width: 180px;
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35));
}

.n4-page-loader__text {
    margin: 0;
    font-family: "Montserrat", "DM Sans", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(248, 250, 252, 0.72);
}

/* Anillo dorado (skill visitas-loader) */
.hspinner,
.n4-page-loader .hspinner {
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.22);
    border-top-color: var(--n4-loader-gold-soft);
    border-right-color: var(--n4-loader-gold);
    box-shadow: 0 0 0 1px rgba(243, 223, 162, 0.2);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.28));
    animation: n4-loader-spin 0.78s linear infinite;
}

/* Apaga el loader legacy de dos anillos azules */
.loader-bg > .loader {
    display: none !important;
}

@keyframes n4-loader-spin {
    to { transform: rotate(360deg); }
}

/* —— Overlay liviano sobre el login (mismo look) —— */
.n4-login-loading {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
}

.n4-login-loading.is-visible {
    display: flex;
}

.n4-login-submit.is-loading {
    pointer-events: none;
    opacity: 0.72;
}

.n4-login-submit.is-loading span {
    opacity: 0.85;
}

.n4-login-submit.is-loading i {
    animation: n4-login-arrow-pulse 0.9s ease-in-out infinite;
}

@keyframes n4-login-arrow-pulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(4px); opacity: 1; }
}