* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #06111d;
    font-family: Arial, Helvetica, sans-serif;
}

.login-stage {
    position: relative;
    width: min(100vw, calc(100vh * 1.98148));
    aspect-ratio: 1712 / 864;
}

.login-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.login-form {
    position: absolute;
    inset: 0;
}

.login-input {
    position: absolute;
    left: 37.03%;
    width: 25.88%;
    height: 5.9%;
    padding: 0 3.1%;

    border: 1px solid rgba(58, 91, 120, .85);
    border-radius: 8px;
    outline: none;

    background: #091827;
    color: #c7ddf3;
    font-size: clamp(13px, 1.05vw, 19px);
}

.username-input {
    top: 45.95%;
}

.password-input {
    top: 57.75%;
}

.login-input:focus {
    border-color: #2b8fdf;
    box-shadow: 0 0 0 2px rgba(36, 140, 225, .16);
}

.login-submit {
    position: absolute;
    left: 37.03%;
    top: 66.67%;
    width: 25.88%;
    height: 6.37%;

    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.register-link {
    position: absolute;
    left: 45.3%;
    top: 80.3%;
    width: 9.5%;
    height: 3.2%;
    cursor: pointer;
}

.error {
    position: absolute;
    left: 37.03%;
    top: 84%;
    width: 25.88%;
    padding: 7px 10px;

    border-radius: 7px;
    background: rgba(93, 18, 25, .94);
    color: #ffb8bd;

    text-align: center;
    font-size: 13px;
}

@media (max-width: 800px) {
    .login-stage {
        width: 100vw;
    }
}

/* Conservar intacto el diseño aprobado dentro de los campos */
.login-input {
    background: transparent;
    border-color: transparent;
}

.login-input:focus {
    background: rgba(5, 18, 31, 0.18);
    border-color: rgba(43, 143, 223, 0.55);
}