/* Estilos por defecto (para laptops, tablets y desktop) */
.bodyLogin {
    background-image: url('/zimg/mapa/mapa7.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

/* Estilos específicos para pantallas pequeñas (ej. 768px o menos) */
@media only screen and (max-width: 768px) {
    .bodyLogin {
        /* Carga una versión más pequeña de la imagen (¡Recomendado para móviles!)
            background-image: url("/zimg/mapa/mapa7-mobile.png");
        */
        /* Opcional: Usar 'contain' para asegurar que la imagen completa sea visible,
           aunque esto puede dejar barras de espacio vacío */
         /*background-size: contain;*/
    }
}

.LoginOpaco {
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    /*background-color: rgba(255,255,255,.7);*/
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border-color: rgba(255, 255, 255, 0.8);
    border-style: solid;
    border-width: 1px;
}

.LoginOpaco2 {
    -webkit-backdrop-filter: blur(24px) saturate(2);
    backdrop-filter: blur(24px) saturate(2);
    background-color: rgba(50, 50, 50, 0.5);
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border-color: rgba(255, 255, 255, 0.15);
    border-style: solid;
    border-width: 1px;
    border-radius: 1.5rem;
}