body {
    /* Color de respaldo: un color similar al de la imagen para que no se vea blanco mientras carga */
    background-color: #1a1a1a; 
    
    /* Intenta cargar AVIF, si no puede WebP, y si no el PNG original */
    background-image: -webkit-image-set(
        url("../../../statics_generals/coverlogin_n.avif") type("image/avif"),
        url("../../../statics_generals/coverlogin_n.webp") type("image/webp"),
        url("../../../statics_generals/coverlogin_n.png") type("image/png")
    );
    background-image: image-set(
        url("../../../statics_generals/coverlogin_n.avif") type("image/avif"),
        url("../../../statics_generals/coverlogin_n.webp") type("image/webp"),
        url("../../../statics_generals/coverlogin_n.png") type("image/png")
    );

    background-repeat: no-repeat;
    background-size: cover;
    background-position:bottom;

    
}


.div-login {
    /* Fondo con transparencia (blanco al 15% o 20% suele ser ideal) */
    background: rgba(255, 255, 255, 0.15);
    
    /* EL TRUCO: Desenfoque del fondo para el efecto vidrio */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Compatibilidad con Safari */
    
    /* Borde sutil para definir la forma del cristal */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Sombra suave para dar profundidad */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Estética general */
    border-radius: 15px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    /* color: #ffffff; */
    color: black;
}
label{
      color: black  !important;
}

h3{
    color: rgb(1, 0, 56) !important; 
}


small, a{
    color: rgb(3, 0, 168) !important; 
}

@media (max-width: 880px){
    body{
         background-position: bottom left ;

    }
}