/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        ESTILOS GENERALES        -------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
html,
body{
    
    background:                 #f5f7fb;
    color:                      #1f2937;
    font-family:                Arial, Helvetica, sans-serif;
    margin:                     0;
    min-height:                 100%;
    padding:                    0;
    
}
*{
    
    box-sizing:                 border-box;
    
}
img{
    
    display:                    block;
    height:                     auto;
    max-width:                  100%;
    position:                   relative;
    width:                      100%;
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        BODY LOGIN        -------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.body_login{
    
    min-height:                 100vh;
    padding:                    30px 15px;
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        CONTENEDOR        -------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contenedor_login{
    
    align-items:                center;
    display:                    flex;
    justify-content:            center;
    min-height:                 calc( 100vh - 90px );
    width:                      100%;
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        TARJETA        ----------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.tarjeta_login{
    
    background:                 #ffffff;
    border:                     1px solid #e5e7eb;
    border-radius:              18px;
    box-shadow:                 0 18px 45px rgba( 0 , 0 , 0 , 0.08 );
    max-width:                  430px;
    padding:                    30px;
    width:                      100%;
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        LOGOTIPO        --------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.tarjeta_login .logotipo{
    
    margin:                     0 auto 18px auto;
    max-width:                  180px;
    width:                      100%;
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        TITULOS        ---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.tarjeta_login h1{
    
    color:                      #111827;
    font-size:                  28px;
    margin:                     0 0 8px 0;
    text-align:                 center;
    
}
.tarjeta_login p{
    
    color:                      #6b7280;
    font-size:                  14px;
    margin:                     0 0 25px 0;
    text-align:                 center;
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        FORMULARIO        ------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.formulario{
    
    width:                      100%;
    
}
.campo{
    
    margin-bottom:              16px;
    
}
.campo:last-child{
    
    margin-bottom:              0;
    
}
.campo label{
    
    color:                      #374151;
    display:                    block;
    font-size:                  14px;
    font-weight:                600;
    margin-bottom:              7px;
    
}
.campo input{
    
    background:                 #ffffff;
    border:                     1px solid #d1d5db;
    border-radius:              12px;
    color:                      #111827;
    font-size:                  14px;
    height:                     46px;
    outline:                    none;
    padding:                    0 14px;
    transition:                 0.2s ease;
    width:                      100%;
    
}
.campo input:focus{
    
    border-color:               #2563eb;
    box-shadow:                 0 0 0 4px rgba( 37 , 99 , 235 , 0.10 );
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        BOTON        -------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.btn_principal{
    
    background:                 #111827;
    border:                     none;
    border-radius:              12px;
    box-shadow:                 0 10px 20px rgba( 17 , 24 , 39 , 0.18 );
    color:                      #ffffff;
    cursor:                     pointer;
    font-size:                  15px;
    font-weight:                700;
    min-height:                 48px;
    padding:                    0 22px;
    transition:                 0.2s ease;
    width:                      100%;
    
}
.btn_principal:hover{
    
    background:                 #1f2937;
    transform:                  translateY( -1px );
    
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------        RESPONSIVE        -------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and ( min-width: 768px ){
    
    .body_login{
        
        padding:                    40px 20px;
        
    }
    .tarjeta_login{
        
        padding:                    34px;
        
    }
    
}