#pageloader-overlay {
    /* CAMBIAR A 1 para que sea visible desde el inicio */
    opacity: 1;
    top: 0px;
    left: 0px;
    position: fixed;
    /* background-color: rgba(1, 33, 105); */
    background-color: rgba(255, 255, 255, .9);
    height: 100%;
    width: 100%;
    z-index: 9998;
    /* Puedes mantener la transición para que el fadeOut de jQuery sea más suave */
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-loading-modal {
    position: relative;

}

/* Estilos para el logo "M" */
.loader-responsive {
    /* 1. Posicionamiento: Asegura que la "M" esté superpuesta */
    position: absolute;
    z-index: 10;
    /* Asegura que la "M" esté encima del GIF (que no tiene z-index alto) */

    /* 2. Centrado Universal (CLAVE) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* 3. Ajuste de Tamaño (CRÍTICO) */
    /* El tamaño aquí DEBE ser menor que el GIF para que quepa dentro del círculo */
    width: 30px;
    /* Usa un valor en píxeles (px) para un control exacto */
    /* Opcional: Altura automática para mantener proporciones */
    height: auto;
}

.loader-wrapper-outer {
    /* Solo deja los estilos de apariencia que necesites */
    background-color: transparent;
    z-index: 9999;

}