.header {
    min-height: 100vh;
    background: var(--color-bg-secondary) url('/src/imagenes/previsualizacionPagina/carretera.jpg') no-repeat bottom/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(20rem, 100vw, 30rem);
    border-radius: var(--space-md);
    border: .1rem solid var(--color-text);
    background: transparent;
    backdrop-filter: blur(.5rem);/*este es para que se vea difuminado o borroso la parte de fondo*/
    padding: 4rem;
    box-shadow: 0 0 1rem 0 var(--color-text);
}

.login-group {
    width: 100%;
}

.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
}

.form_title {
    text-align: center;
    font-size: clamp(2rem, 2vw, 3rem);
    margin-bottom: var(--space-lg);
    font-family: var(--font-login);
}

.form__input-name, .form__input-password {
    margin-bottom: var(--space-md);
    outline: none;
    border: none;
}

.form__label-name, .form__label-password {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-family: var(--font-login);
}

.form__button {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-customer {
    padding: var(--space-md);
    border-radius: var(--space-sm);
}

.form__button-login {
    width: 15rem;
    padding: var(--space-md);
    border-radius: var(--space-sm);
    border: .15rem solid var(--color-text);
    padding: .7rem;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: .3rem;
    background-color: transparent;
    box-shadow: 0 0 5rem var(--color-text);
    transition: border-radius .7s, border-color .2s, background .2s;
}

.form__button-login:hover {
    border-radius: var(--space-lg);
}
.form__button-login:active {
    border-color: var(--color-bg-primary);
    background: #000;
}

.iconConteinerRegreso {
    position: absolute;
    bottom: 2rem;
    left: 85%;
}

.imgRegreso {
    width: 2rem;
    height: 2rem;
}

@media screen and (max-width: 25rem), screen and (max-width: 40rem) {
    .login {
        padding: 3.5rem;
    }
}
@media screen and (max-width: 45rem) {
    .iconConteinerRegreso {
        left: 85%;
        bottom: 1rem;
    }
}