/* =====================================================
   GLOBAL LOADER
   Profesional + Responsive + Minimalista
===================================================== */

.global-loader {

    position: fixed;
    inset: 0;

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

    padding: 20px;

    background: rgba(255, 255, 255, 0.72);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

/* =====================================================
   ACTIVO
===================================================== */

.global-loader.active {

    opacity: 1;
    visibility: visible;
}

/* =====================================================
   BOX
===================================================== */

.loader-box {

    width: 100%;
    max-width: 320px;

    padding: 32px 26px;

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.96);

    border: 1.5px solid rgba(16, 44, 84, 0.12);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.16),
        0 2px 8px rgba(15, 23, 42, 0.08);

    text-align: center;

    animation: loaderFadeIn 0.22s ease;
}

/* =====================================================
   SPINNER
===================================================== */

.loader-spinner {

    width: 58px;
    height: 58px;

    margin: 0 auto 20px;

    border-radius: 50%;

    border: 4px solid #dbe3ef;
    border-top-color: #102c54;

    animation: loaderSpin 0.75s linear infinite;
}

/* =====================================================
   TITULO
===================================================== */

.loader-box h3 {

    margin: 0;

    color: #102c54;

    font-size: clamp(17px, 2vw, 20px);
    font-weight: 700;

    letter-spacing: 0.2px;
}

/* =====================================================
   TEXTO
===================================================== */

.loader-box p {

    margin: 10px 0 0;

    color: #64748b;

    font-size: clamp(13px, 1.8vw, 14px);
    line-height: 1.45;
}

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

@keyframes loaderSpin {

    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderFadeIn {

    from {

        opacity: 0;

        transform:
            translateY(6px)
            scale(0.98);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }
}

/* =====================================================
   TABLETS
===================================================== */

@media (max-width: 768px) {

    .global-loader {

        padding: 18px;
    }

    .loader-box {

        max-width: 300px;

        padding: 28px 22px;

        border-radius: 20px;
    }

    .loader-spinner {

        width: 54px;
        height: 54px;

        margin-bottom: 18px;
    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 480px) {

    .global-loader {

        padding: 16px;
    }

    .loader-box {

        max-width: 100%;

        padding: 24px 20px;

        border-radius: 18px;
    }

    .loader-spinner {

        width: 50px;
        height: 50px;

        border-width: 3.5px;
    }

    .loader-box h3 {

        font-size: 17px;
    }

    .loader-box p {

        font-size: 13px;
    }

}

/* =====================================================
   MOBILE PEQUEÑOS
===================================================== */

@media (max-width: 340px) {

    .loader-box {

        padding: 22px 16px;
    }

    .loader-spinner {

        width: 46px;
        height: 46px;
    }

    .loader-box h3 {

        font-size: 16px;
    }

    .loader-box p {

        font-size: 12px;
    }

}