*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
text-decoration:none;
list-style:none;
}

body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#ffffff !important;
}

/* CONTENEDOR PRINCIPAL */

.container{
position:relative;
width:586px;
height:379px;
margin:20px;
background:#fff;
border-radius:22px;
box-shadow:0 0 25px rgba(0,0,0,0.2);
overflow:hidden;
}

/* TITULOS */

.container h1{
font-size:24px;
margin-bottom:8px;
}

.container p{
font-size:12px;
margin:8px 0;
}

/* FORMULARIOS */

form{
width:100%;
}

.form-box{
position:absolute;
left:0;
width:50%;
height:100%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
color:#333;
text-align:center;
padding:20px 24px;
z-index:1;
transition:0.6s ease-in-out 1.2s, visibility 0s 1s;
}

.container.active .form-box{
left:50%;
}

.form-box.register{
visibility:hidden;
}

.container.active .form-box.register{
visibility:visible;
}

/* INPUTS */

.input-box{
position:relative;
margin:14px 0;
}

.input-box input{
width:100%;
padding:10px 45px 10px 14px;
background:#eee;
border:none;
outline:none;
border-radius:8px;
font-size:13px;
color:#333;
font-weight:500;
}

.input-box input::placeholder{
color:#888;
font-weight:400;
}

.input-icon{
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
width:17px;
height:17px;
object-fit:contain;
pointer-events:none;
opacity:0.8;
}

/* PASSWORD */

.password-box input{
padding-right:45px;
}

.show-password-btn{
position:absolute;
top:50%;
right:10px;
transform:translateY(-50%);
width:26px;
height:26px;
border:none;
background:transparent;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
}

.toggle-password-icon{
width:18px;
height:18px;
object-fit:contain;
opacity:0.85;
}

.show-password-btn:hover .toggle-password-icon{
opacity:1;
}

/* BOTONES */

.btn{
width:100%;
height:38px;
background:#3161a3;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
border:none;
cursor:pointer;
font-size:14px;
color:#fff;
font-weight:600;
transition:0.3s;
}

.btn:hover{
background:#274d82;
}

.btn:disabled{
opacity:0.6;
cursor:not-allowed;
}

/* LOGO */

.logo-wrap{
margin-top:24px;
display:flex;
justify-content:center;
align-items:center;
}

.logo-softline{
    width:50%;
    height:100px;
    object-fit:contain;
    display:block;
    transform: scale(1.6);
    transform-origin: center center;
}


/* PANEL AZUL */

.toggle-box{
position:absolute;
width:100%;
height:100%;
}

.toggle-box::before{
content:"";
position:absolute;
right:-250%;
width:300%;
height:100%;
background:#3161a3;
border-radius:150px;
z-index:2;
transition:1.8s ease-in-out;
}

.container.active .toggle-box::before{
right:50%;
}

/* PANEL CONTENIDO */

.toggle-panel{
position:absolute;
width:50%;
height:100%;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:2;
text-align:center;
padding:0 24px;
transition:0.6s ease-in-out;
}

.toggle-panel.toggle-left{
left:-50%;
transition-delay:0.6s;
}

.container.active .toggle-panel.toggle-left{
left:0;
transition-delay:1.2s;
}

.toggle-panel.toggle-right{
right:0;
transition-delay:1.2s;
}

.container.active .toggle-panel.toggle-right{
right:-50%;
transition-delay:0.6s;
}

.toggle-panel p{
margin-bottom:14px;
}

.toggle-panel .btn{
width:120px;
height:34px;
background:transparent;
border:2px solid #fff;
box-shadow:none;
font-size:13px;
}

/* RESPONSIVE */

@media screen and (max-width:650px){

.container{
height:calc(100vh - 40px);
width:95%;
}

.form-box{
bottom:0;
width:100%;
height:70%;
left:0;
padding:20px;
}

.container.active .form-box{
left:0;
bottom:30%;
}

.toggle-box::before{
right:0;
top:-270%;
width:100%;
height:300%;
border-radius:20vw;
}

.container.active .toggle-box::before{
right:0;
top:70%;
}

.toggle-panel{
width:100%;
height:30%;
padding:20px;
}

.toggle-panel.toggle-left{
left:0;
top:-30%;
}

.container.active .toggle-panel.toggle-left{
top:0;
}

.toggle-panel.toggle-right{
right:0;
top:0;
}

.container.active .toggle-panel.toggle-right{
right:0;
top:-30%;
}

.logo-wrap{
margin-top:20px;
}

}

@media screen and (max-width:400px){

.form-box{
padding:16px;
}

.toggle-panel h1{
font-size:20px;
}

.logo-wrap{
margin-top:18px;
}

}