*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.BodyLogin{
    background: url('../imagenes/admin/login/fondo-5.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100dvb;
}

.container{
    max-width: 1850px;
    margin: 0 auto;
}

.LoginForm{
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
    
    & .Login-bloques{
        width: 60%;
        height: 60%;
        display: grid;
        place-items: center;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        grid-template-areas: 'Login-Form Login-Img';
        background: rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);

        & .Login-Img{
            grid-area: Login-Img;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            & picture{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 2rem;
                & img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 20px;
                    box-shadow: 0px 0px 1px 6px #ffffff88;
                }
            }
        }

        & .Login-Form{
            grid-area: Login-Form;
            display: grid;
            place-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: #ffffff55;
            border-radius: 20px;
            & .Login-Form-Logo{
                width: 75%;
                margin: 2rem auto;
            }

            & .Login-Form-cajon{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                position: relative;
                margin-bottom: 1rem;
                
                & label{
                    width: 100%;
                    height: 40%;
                    position: absolute;
                    top: 50%;
                    left: 20%;
                    transform: translate(-15%, -50%);
                    z-index: 1;
                    opacity: 0;
                }
                
                &:focus-within label,
                & input:not(:placeholder-shown) + label {
                    font-size: clamp(1rem, 2vw, 0.8rem);
                    top: -5%;
                    left: 20%;
                    color: bisque;
                    opacity: 1;
                }

                & input{
                    width: 100%;
                    height: 100%;
                    border: none;
                    border-radius: 10px;
                    padding: 0.5rem 2.25rem;
                    margin: 0.5rem 0;
                    font-size: clamp(1rem, 2vw, 1.8rem);
                    color: #fff;
                    background: rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(10px);
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);

                    &::placeholder {
                        opacity: 1; 
                    }


                }
            }
            
        }
    }
}