/* =========================================================
   MULTISERVICIOS PLAGA FIN
   LOADER SIMPLE CON LOGO + BARRA
========================================================= */

/* Evita scroll mientras carga */
body.is-loading {
    overflow: hidden;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.loader {
    position: fixed;
    z-index: 9999999;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f7f9fc 68%,
            #eef2f7 100%
        );

    opacity: 1;
    visibility: visible;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}


/* Estado al terminar de cargar */
.loader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   CONTENIDO CENTRAL
========================================================= */

.loader-inner {
    width: min(390px, calc(100% - 48px));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 25px;

    text-align: center;

    animation:
        loaderContentIn .55s ease both;
}


/* =========================================================
   LOGO
========================================================= */

.loader-inner img {
    display: block;

    width: min(330px, 78vw);
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 20px rgba(0, 27, 61, .08)
        );
}


/* =========================================================
   BARRA DE CARGA
========================================================= */

.loader-bar {
    position: relative;

    width: min(280px, 70vw);
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #e1e6ed;
}


/* Barra animada */
.loader-bar span {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 38%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #001b3d 0%,
            #0e58d6 55%,
            #ed2024 100%
        );

    animation:
        loaderProgress 1.15s ease-in-out infinite;
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes loaderContentIn {

    from {
        opacity: 0;
        transform:
            translateY(10px)
            scale(.97);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes loaderProgress {

    0% {
        left: -42%;
        width: 32%;
    }

    50% {
        width: 48%;
    }

    100% {
        left: 110%;
        width: 32%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .loader-inner {
        width: min(350px, calc(100% - 40px));
        gap: 22px;
    }

    .loader-inner img {
        width: min(290px, 72vw);
    }

    .loader-bar {
        width: min(245px, 65vw);
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .loader-inner {
        width: calc(100% - 34px);
        gap: 19px;
    }

    .loader-inner img {
        width: min(245px, 68vw);
    }

    .loader-bar {
        width: min(215px, 60vw);
        height: 4px;
    }

}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    .loader-inner img {
        width: min(215px, 66vw);
    }

    .loader-bar {
        width: min(190px, 58vw);
    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .loader,
    .loader-inner,
    .loader-bar span {
        animation: none !important;
        transition: none !important;
    }

}