:root {
    --intranet-loader-progress: 8%;
    --intranet-loader-orange: #ff4b00;
    --intranet-loader-blue: #13254a;
    --intranet-loader-bg: #f8fafc;
    --intranet-loader-track: rgba(19, 37, 74, .14);
    --intranet-loader-logo-width: 220px;
    --intranet-loader-logo-height: 194px;
}

html.intranet-page-loading,
html.intranet-page-loading body {
    overflow: hidden !important;
}

/* Fondo de carga. Se retrasa levemente para no generar un destello en páginas muy rápidas. */
html.intranet-page-loading::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 75, 0, .055), transparent 31%),
        var(--intranet-loader-bg);
    opacity: 0;
    pointer-events: all;
    animation: intranetLoaderAppear .12s ease .08s forwards;
}

/* Logo completo tenue que actúa como guía del llenado. */
html.intranet-page-loading body::before {
    content: "";
    position: fixed;
    z-index: 2147483001;
    left: 50%;
    top: 50%;
    width: var(--intranet-loader-logo-width);
    height: var(--intranet-loader-logo-height);
    transform: translate(-50%, -62%);
    background: url('../img/color.png') center / contain no-repeat;
    opacity: 0;
    filter: grayscale(1) saturate(.35);
    pointer-events: none;
    animation:
        intranetLoaderAppear .12s ease .08s forwards,
        intranetLoaderBasePulse 1.65s ease-in-out .3s infinite;
}

/* El logo oficial se descubre verticalmente según el avance estimado. */
html.intranet-page-loading::after {
    content: "";
    position: fixed;
    z-index: 2147483002;
    left: 50%;
    top: 50%;
    width: var(--intranet-loader-logo-width);
    height: var(--intranet-loader-logo-height);
    transform: translate(-50%, -62%);
    background: url('../img/color.png') center / contain no-repeat;
    clip-path: inset(calc(100% - var(--intranet-loader-progress)) 0 0 0);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 10px 22px rgba(19, 37, 74, .10));
    transition: clip-path .18s cubic-bezier(.22, .61, .36, 1), opacity .10s ease;
    animation: intranetLoaderAppear .12s ease .08s forwards;
}

/* Leyenda y barra de progreso compacta. */
html.intranet-page-loading body::after {
    content: "CARGANDO...";
    position: fixed;
    z-index: 2147483003;
    left: 50%;
    top: calc(50% + 92px);
    width: 250px;
    height: 48px;
    transform: translateX(-50%);
    padding-top: 19px;
    box-sizing: border-box;
    color: var(--intranet-loader-blue);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            var(--intranet-loader-orange) 0,
            var(--intranet-loader-orange) var(--intranet-loader-progress),
            var(--intranet-loader-track) var(--intranet-loader-progress),
            var(--intranet-loader-track) 100%)
        center top / 100% 4px no-repeat;
    border-radius: 999px;
    transition: background .16s ease;
    animation: intranetLoaderAppear .12s ease .08s forwards;
}

html.intranet-page-loader-complete body::after {
    content: "LISTO";
    color: var(--intranet-loader-orange);
}

html[data-bs-theme="dark"].intranet-page-loading {
    --intranet-loader-bg: #0b1220;
    --intranet-loader-track: rgba(255, 255, 255, .17);
}

html[data-bs-theme="dark"].intranet-page-loading::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 75, 0, .11), transparent 30%),
        #0b1220;
}

html[data-bs-theme="dark"].intranet-page-loading body::before {
    opacity: 0;
    filter: grayscale(1) brightness(1.8) opacity(.24);
}

html[data-bs-theme="dark"].intranet-page-loading body::after {
    color: #e5e7eb;
}

html[data-bs-theme="dark"].intranet-page-loader-complete body::after {
    color: #ff6a24;
}

@keyframes intranetLoaderAppear {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes intranetLoaderBasePulse {
    0%, 100% { filter: grayscale(1) saturate(.35); }
    50% { filter: grayscale(1) saturate(.35) brightness(1.08); }
}

@media (max-width: 575.98px) {
    :root {
        --intranet-loader-logo-width: 176px;
        --intranet-loader-logo-height: 155px;
    }

    html.intranet-page-loading body::after {
        top: calc(50% + 76px);
        width: 205px;
        height: 43px;
        padding-top: 17px;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.intranet-page-loading::before,
    html.intranet-page-loading::after,
    html.intranet-page-loading body::before,
    html.intranet-page-loading body::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
    }

    html.intranet-page-loading::after {
        transition: none !important;
    }
}