@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root{
    --violeta-claro: #AAB4DA;
    --violeta-oscuro: #8E9AD3;
    --azulcito:#30354A;
    --gris:#ADAAAA;
}

body{
    display: flex;
    font-family: Roboto;
    align-items: center;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}
html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0; /* Comienza invisible */
    }
    to {
        transform: translateY(0);
        opacity: 1; /* Termina visible */
    }
}

/* Efecto de desvanecimiento */
@keyframes fadeOut {
    from {
        opacity: 1; /* Comienza visible */
    }
    to {
        opacity: 0; /* Termina invisible */
    }
}

/* Aplicar el estilo al mensaje de error */
.error-message {
    background: rgba(242, 183, 183, 0.968);
    border-radius: 4px;
    padding: 20px;
    font-weight: 500;
    color: rgb(127, 26, 26);
    position: absolute;
    width: calc(100% - 40px);
    top: 0;
    left: 0;
    animation: slideDown 0.5s forwards; /* Aplicar la animación de deslizamiento */
}


#imagen{
    width: 70%;
    position: relative;
    height: 100%;
    background-image: url(../img/fondo1920.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: left;
}



#formulario{
    height: 100%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

#general{
    display: flex;
    width: 364px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    position: relative;
}


#titulos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
#titulos h2{
    color: var(--violeta-claro);
    text-align: center;
    font-family: "Dancing Script";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Display-Medium-Line-Height, 52px); /* 108.333% */
    letter-spacing: var(--Display-Medium-Tracking, 0px);
    margin: 0;
}

#titulos h1{
    
    text-align: center;
    color: var(--azulcito);
    margin: 0;
    font-family: var(--Display-Medium-Font, Roboto);
    font-size: var(--Display-Medium-Size, 45px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Display-Medium-Line-Height, 52px); /* 115.556% */
    letter-spacing: var(--Display-Medium-Tracking, 0px);
}



form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    position: relative;
}

form div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
    width: 100%;
}
form label{
    width: 100%;
    color:var(--azulcito);
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    padding-bottom: 5px;
    font-weight: 400;
    line-height: var(--Typescale-Body-Small-Line-Height, 16px); /* 133.333% */
    letter-spacing: var(--Typescale-Body-Small-Letter-Spacing, 0.4px);

}

#username{
    display: flex;
    padding: 5px;
    padding-left: 15px;
    align-items: flex-start;
    border-radius: 4px;
    height: 46px; 
    outline: none;
    font-size: 18px;
    color: var(--azulcito);
    width: 200px;
    width: 200px;
    border: 1px solid  var(--azulcito);
    width: calc(100% - 20px);

}
#password{
    display: flex;
    padding: 5px;
    padding-left: 15px;
    align-items: flex-start;
    outline: none;
    border-radius: 4px;
    font-size: 18px;
    height: 46px;
    color: var(--azulcito);
    width: 200px;
    border: 1px solid  var(--azulcito);
    width: calc(100% - 20px);
 
}

#submit{
    width: 100%;
    display: flex;
    font-size: 18px;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 100px;
    background: var(--violeta-oscuro);

    outline: none;
    border: none;
    color: var(--white, #FFF);
    text-align: center;

    /* Title Large */
    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--Typescale-Title-Large-Line-Height, 28px); /* 127.273% */


}







@media (min-width: 280px) and (max-width: 426px) {
    body{
        flex-direction: column;
    }
    #imagen{
        width: 100%;
        height: 40%;
        background-size: 115%;
        background-position-x: center;
        background-position-y: top;

    }

    #formulario{
        align-items: center;
        width: 100%;
        height: 60%;
        
    }

    form {
        width: 80%;
    }

    #general {
        width: 100%;
        gap: 10px;
    }
    #titulos {
        gap: 10px;
    }

    #titulos h2 {
        font-size: 32px;
        line-height: var(--Display-Medium-Line-Height, 36px);
    }
    #titulos h1 {
        font-size: var(--Display-Medium-Size, 30px);
        line-height: var(--Display-Medium-Line-Height, 34px);
    }
    #username, #password {
        height: 30px;
    }

    #submit{
        height: 50px;
    }
}




















@media (min-width: 426px) and (max-width: 768px) {
    body{
        flex-direction: column;
    }
    #imagen{
        width: 100%;
        height: 50%;
        background-size: 115%;
        background-position-x: center;
        background-position-y: top;

    }

    #formulario{
        align-items: center;
        width: 100%;
        height: 50%;
        
    }

    form {
        width: 80%;
    }

    #general {
        width: 100%;
        gap: 10px;
    }
    #titulos {
        gap: 10px;
    }

    #titulos h2 {
        font-size: 32px;
        line-height: var(--Display-Medium-Line-Height, 36px);
    }
    #titulos h1 {
        font-size: var(--Display-Medium-Size, 30px);
        line-height: var(--Display-Medium-Line-Height, 34px);
    }
    #username, #password {
        height: 30px;
    }

    #submit{
        height: 50px;
    }
}



@media (min-width: 769px) and (max-width: 1024px) {

    #imagen{
        width: 40%;
        background-size: cover;
        background-position-x: right;
        background-position-y: top;

    }

    #formulario{
        align-items: center;
        width: 60%;
        
    }
}


@media (min-width: 1025px) and (max-width: 1200px) {
    #imagen{
        width: 40%;
        background-size: cover;
        background-position-x: right;
        background-position-y: top;

    }

    #formulario{
        align-items: center;
        width: 60%;
        
    }
}

@media (min-width: 1200px) and (max-width: 1368px) {

    #imagen{
        width: 60%;
        background-size: cover;
        background-position-x: right;
        background-position-y: top;

    }

    #formulario{
        align-items: center;
        width: 40%;
        
    }
    

}