* {
    outline: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-color: #F7F8FA;
    display: flex;
    justify-content: center;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    padding: 30px;
}

body.dark-body{
    background-color: #323030;
}

.w-100{
    width: 100%;
}

/* Título de la página */
.tarjeta .titulo {
    font-weight: 700;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 16px;
}
.dark-body .tarjeta .titulo {
    margin-bottom: 20px;
}

.tarjeta .texto-info {
    margin-top: 0;
    margin-bottom: 16px;
}
.dark-body .tarjeta .texto-info {
    margin-bottom: 20px;
}

/* Tarjeta, agrupa todo el contenido */
.tarjeta {
    width: 600px;
    padding: 16px;
}
.dark-body > .tarjeta{
    padding: 0;
}

.light-body > .tarjeta {
    background-color: #fff; 
    border: 1px solid #D7E1EA;
    border-radius: 8px;
}

.tarjeta > .info-centrada {
    text-align: center;
    justify-content: center;
}
.light-body > .tarjeta > .info-centrada {
    color: #01132D;
}
.dark-body > .tarjeta > .info-centrada {
    color: #fff;
}

.tarjeta > .contenedor-btn-validacion {  
    text-align: end;
}

.tarjeta > form > .contenedor-btn-validacion > button {
    background-color: #01132D;
    border-radius: 6px;
    padding: 7px 10px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.tarjeta > form > .contenedor-btn-validacion > button:hover {
    background-color: #01132dde;
    
}

.tarjeta > form > .contenedor-btn-validacion > button {
    color: white;
    text-decoration: none;
}

/* input código de seguridad */
.tarjeta #codigoNotif{
    /* border-color: #98A4BD; */
    border-radius: 4px;
    color: #01132D;
    padding: 8px 10px;
    margin-top: 2px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border: 1px solid #01132D;
}
.tarjeta input[type=text]:focus {
    border: 1px solid #98A4BD !important;
}

.tarjeta label{
    color: #737373;
    font-size: 12px;
}

.tarjeta > .info-codigo {  
    margin-top: 62px;
}

/* mensaje de error */
.tarjeta > .info-codigo > .error-msg {  
    color: #F8004A;
}


hr {
    color: #D7E1EA;
    margin-top: 16px;
    margin-bottom: 16px;

}