/*
Copyright (C) 2021 José Miguel Ortiz

This program is not free software: you may not redistribute and / or modify it under 
the terms of the published License,either the current version or (at your option) any 
later version.

This program gives licensed access in the hope that it will be useful, but WITHOUT
ANY WARRANTY; even without the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the License.

You should have received a copy of the Custom License along with this program. 
Otherwise refer to the LICENCIA.TXT file in the source code of this commercial project.
*/
/*======================================*/
/*          ESTILOS DEL LOGIN           */
/*======================================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
@import url("./css/all.min.css");
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.3rem;
    /*overflow: auto !important;*/
    overscroll-behavior: unset !important;
}
.movil-svg{
	width: 150px;
	display: none;
}
.wave{
    position: fixed;
    display: flex;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: -1;
    background-position: -175% 75%;
    background-size: cover;
    background-repeat: no-repeat;
}
.contenedor{
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 7rem;
    padding: 2rem;
    background: rgba(233, 233, 233, 1.0);
}
.img{
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
.img img#tablet-svg {
    display: none;
}
.img img#desktop-svg {
    display: flex;
}
.img img{
    width : 90%;
}
.contenido-login{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}
form{
    width: 400px;
    height: 85vh;
    padding: 25px;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 2px 2px 1px #c2b3b4;
}
.contenido-login img{
    height: 100px;
}
.titles h2{/*titulo*/
    margin: 15px 0;
    color: #666;
    text-transform: uppercase;/*mayusculas*/
    font-size: 1.8rem;
    text-shadow: 1px 1px #310103;
}
.titles img{
    margin: 5px 0;
    width: 215px;
    height: 50px;
}
.titles h4{ /*subtitulo*/
    margin: 27px 0 0 0;
    color: #310103;
    font-size: 1.5rem;
}
.contenido-login .input-div{
    position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 25px 0;
    padding: 5px 0;
    border-bottom: 2px solid #8a8592;
}
.contenido-login .input-div.dni{
    margin-top: 40px;
}
.i{
    color: #8a8592;
    display: flex;
    justify-content: center;
    align-items: center;
}
.i i{
    transition: .3s;
}
.input-div >div{
    position: relative;
    height: 45px;
}
.input-div > div > h5{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8592;
    font-size: 17px;
    transition: .3s;
}
.input-div.focus > div >h5{
    top: -5px;
    font-size: 15px;
}
.input-div:before, .input-div:after{
    content: '';
    position:absolute;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #666; /*color input transition*/
    transition: .4s;
}
.input-div::before{
    right: 50%;
}
.input-div:after{
    left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
    width: 50%;
}
.input-div.focus > .i >i{
    color: #666; /*color input transition*/
}
.input-div >div >input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    padding: 0.5rem 0.7rem;
    font-size: 17px;
    color: #333;
}
.input-div.pass{
    margin-bottom: 4px;
}
a{
    color: #8a8592 !important;
}
a.pie.login{
    display: flex;
    position: absolute;
    flex-direction: row;
    float: right;
    text-align: right;
    text-decoration: none;
    font-size: 1.5rem;
}
a:hover{
    color: #8a8592;
}
input.btn{
    display: block;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    outline: none;
    border: none;
    /*background: rgb(63,94,251);
    background: -moz-linear-gradient(22deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    background: -webkit-linear-gradient(22deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    background: linear-gradient(22deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f5efb",endColorstr="#fc466b",GradientType=1);*/
    background: rgb(218,120,124);
    background: -moz-linear-gradient(104deg, rgba(218,120,124,1) 0%, rgba(162,104,204,1) 57%, rgba(92,96,240,1) 100%);
    background: -webkit-linear-gradient(104deg, rgba(218,120,124,1) 0%, rgba(162,104,204,1) 57%, rgba(92,96,240,1) 100%);
    background: linear-gradient(104deg, rgba(218,120,124,1) 0%, rgba(162,104,204,1) 57%, rgba(92,96,240,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#da787c",endColorstr="#5c60f0",GradientType=1);
    background-size: 200%;
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    margin: 1rem 0;
    cursor: pointer;
    transition: .5s;
}
.btn:hover{
    background-position: right;
    font-size: 1.6rem;
    font-weight: 600;
    text-shadow: 1px 1px #78A7C5;
    color: #fff !important;
}
/*responsive para tablets y celulares*/

/*tablets*/
@media screen and (max-width: 1050px){
    .contenedor{
        grid-gap: 5rem;
        background: #fff !important;
    }
    .titles h2{
        font-size: 2.2rem;
    }
    .titles h4{
        font-size: 2.2rem;
    }
}
/*tablet*/
@media screen and (max-width: 845px){
    .img img#tablet-svg {
        display: flex;
        width: 90%;
    }
    .img img#desktop-svg {

        display: none;
    }
	.contenedor{
        grid-gap: 5rem;
        background: #fff !important;
    }
    form{
        height: 90vh;
        width: 100%;
        margin: 0;
    }
    .titles h2{
        font-size: 2.0rem;
    }
    .titles h4{
        font-size: 2.0rem;
    }
    .img img{
        width: 100%;
    }

}
/*Tablet mas pequena**/
@media screen and (max-width: 756px){
	body{
		background: #fff !important;
	}
    .contenedor{
        margin: 10px auto;
    	padding: 0px;
    	width: 100%;
        grid-template-columns: 1fr;
        background: #fff !important;

    }
    form{
    	height: 100vh;
    	width: 100%;
    	border-radius: none;
    	box-shadow: none;
        margin-bottom: 40px;
    }
    .img{
        display: none;
    }
    .wave{
        display: none;
    }
    .titles h2{
    	font-size: 1.9rem;
    }
    .titles h4{
    	font-size: 1.9rem;
    }
    .movil-svg{
    	margin: 0px auto 40px auto;
    	display: flex;
        width: 90% !important; 
    }
    .contenido-login{
    	width: 90vw;
        justify-content: center;
        margin: 0px auto;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 1px 2px 2px 1px #999;
    }
    input.btn{
        font-size: 1.4rem;
        font-weight: 400;
    }

}
@media screen and (max-width: 474px){
    .contenedor{
        margin: 10px auto;
        padding: 0px 15px;
        grid-template-columns: 1fr;
        background: #fff !important;
        justify-content: center;
    }
    .titles h2{
        font-size: 1.9rem;
        line-height: 23px;
    }
    .titles h4{
        font-size: 1.9rem;
    }
    .contenido-login{
        width: 100vw;
        justify-content: center;
        border-radius: none;
        box-shadow: none;
    }
}