/* ==========================================
   LOGIN T4 MÉXICO
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background-color:#f7f2ed;
    background-image:url("../img/pattern.svg");
    background-size:170px;
    background-repeat:repeat;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.login-container{

    width:450px;

    background:#f4ece6;

    border:1px solid #d8cdc4;

    border-radius:18px;

    padding:28px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

}

/*=========================
        LOGO
=========================*/

.logo{

    display:flex;

    justify-content:center;

    margin-bottom:25px;

}

.logo img{

    width:125px;

}

/*=========================
      TABS
=========================*/

.login-tabs{

    display:flex;

    background:#e8dfd8;

    border-radius:12px;

    padding:4px;

    margin-bottom:25px;

}

.tab{

    flex:1;

    border:none;

    background:transparent;

    padding:12px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    color:#3e4b4b;

    transition:.25s;

}

.tab i{

    margin-right:8px;

}

.tab.active{

    background:white;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    font-weight:600;

}

/*=========================
       INPUTS
=========================*/

.input-group{

    margin-bottom:20px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:500;

    color:#2f3b3b;

}

.input-box{

    display:flex;

    align-items:center;

    background:white;

    border:1px solid #d9cdc3;

    border-radius:12px;

    transition:.25s;

}

.input-box:focus-within{

    border-color:#3b4b4b;

    box-shadow:0 0 0 4px rgba(59,75,75,.10);

}

.input-box i{

    width:50px;

    text-align:center;

    color:#606060;

}

.input-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    height:52px;

    font-size:15px;

    font-family:'Poppins',sans-serif;

}

.toggle-password{

    border:none;

    background:none;

    width:50px;

    cursor:pointer;

    color:#606060;

    font-size:17px;

}

/*=========================
        BOTÓN
=========================*/

.btn-login{

    width:100%;

    height:52px;

    border:none;

    border-radius:12px;

    margin-top:10px;

    cursor:pointer;

    background:#3d4b4b;

    color:white;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.btn-login:hover{

    background:#2d3939;

    transform:translateY(-2px);

}

/*=========================
        LINKS
=========================*/

.links{

    margin-top:28px;

    text-align:center;

}

.links a{

    display:block;

    margin:10px 0;

    color:#4c5b5b;

    text-decoration:none;

    font-size:15px;

}

.links a:hover{

    text-decoration:underline;

}

/*=========================
      RESPONSIVE
=========================*/

@media(max-width:520px){

.login-container{

    width:92%;

    padding:22px;

}

.logo img{

    width:110px;

}

}

/* Cambio de pestañas */

.tab.active{

    animation:tabSeleccionada .25s ease;

}

@keyframes tabSeleccionada{

    0%{

        transform:scale(.95);

    }

    100%{

        transform:scale(1);

    }

}

/* Cursor */

button{

    font-family:'Poppins',sans-serif;

}