/* ! LOGIN =========================================== */

/* INDICE
*
*   #fondo__login
*       #contenedor__login
*           #contenedor-formulario__login
*               #contenedor-formulario__login > h4
*               #formulario__login
*                   .grupo-formulario__login
*                       .grupo-formulario__login > label
*                       .grupo-formulario__login > input
*                           #show_password
! -------------- Pseudo Clases -------------- !
*                   .grupo-formulario__login > input:focus
*                   .grupo-formulario__login > input:focus~label
*                   .grupo-formulario__login > input:valid~label
! -------------- Media Queries -------------- !
? -------------- 900px -------------- ?
*       #contenedor__login
? -------------- 676px -------------- ?
*       #contenedor__login
? -------------- 500px -------------- ?
*       #contenedor__login
*
*/

#fondo__login{
    background-image: url(../img/login-imagen.jpg);
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

    #contenedor__login{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
        "a b b c c c";
        height: auto;
        padding: 3rem;
    }

    #cuadro_simulacion{
        grid-area:c;
        margin-left: 20px;

    }

    #cuadro_interno_simulacion{
        background-color: white;
        border: 2px solid #ddd;
        border-radius: 10px;
        padding:10px;
    }

        #contenedor-formulario__login{
            width: 100%;
            max-width: 330x;
            grid-area: b;
            justify-self: end;
            background-color: white;
            border: 2px solid #ddd;
            border-radius: 10px;
        }

            #contenedor-formulario__login h4{
                text-align: center;
                margin: 1rem auto 0 auto;
            }

            #formulario__login{
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 2rem;
            }

                .grupo-formulario__login{
                    position: relative;
                    margin: 2rem;
                }

                    .grupo-formulario__login label{
                        font-size: 16px;
                        position: absolute;
                        left: 5px;
                        top: 10px;
                        transition: 0.5s ease-in-out all;
                        pointer-events: none;
                    }

                    .grupo-formulario__login input {
                        background: none;
                        color: #5e5d5d;
                        font-size: 1rem;
                        padding: 10px 10px 10px 5px;
                        display: block;
                        width: 100%;
                        border: none;
                        border-bottom: 1px solid #ddd;
                    }

                    .grupo-formulario__login input:focus {
                        outline: none;
                        color: #5e5d5d;
                    }

                    .grupo-formulario__login input:focus~label {
                        top: -14px;
                        font-size: 12px;
                        color: rgb(77, 77, 77);
                    }

                    .grupo-formulario__login input:valid~label {
                        top: -14px;
                        font-size: 12px;
                        color: rgb(77, 77, 77);
                    }

                        #show_password{
                            position: absolute;
                            right: 5px;
                            margin: 7px 0;
                        }

@media (max-width: 900px) {

    #contenedor__login{
        grid-template-areas:
        "a b b b c c";
    }

}

@media (max-width: 676px) {

    #contenedor__login{
        grid-template-areas:
        "b b b b c c";
    }
}


@media (max-width: 600px) {

        #contenedor__login{
            display: block; /* or flex/other layout */
            grid-template-areas: none;
        }
        #cuadro_simulacion{
            margin-left:0px;
            margin-bottom:30px;
        }


}


/* ! FIN LOGIN =========================================== */

#contenedor__login-backend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1rem;
    width: 100%;
    max-width: 330x;
    grid-area: b;
    justify-self: end;
    background-color: white;
    border: 2px solid #ddd;
    border-radius: 10px;
}

#contenedor__login-backend h4{
    text-align: center;
    margin: 1rem auto 0 auto;
}

#contenedor__login-backend p{
    margin: 0;
}

#contenedor__login-backend button{
    width: 50%;
}