
:root {
    --brand-green: #6aa21a;
    --overlay: #2c4b63; /* azul del velo */
    --overlay-opacity: .65; /* intensidad del velo */
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Barlow Condensed", sans-serif;
}

/* layout split */
.login-split {
    min-height: 100vh;
}

.left-pane {
    position: relative;
    min-height: 100vh;
    background: url("../res/login/fondo_login.png") center center/cover no-repeat; /* <-- tu imagen */
}

    .left-pane::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--overlay);
        opacity: var(--overlay-opacity);
    }

.right-pane {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;
}

/* logo */
.login-logo {
    max-width: 260px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

/* inputs */
.form-control {
    height: 44px;
    border-radius: 4px;
}

.input-with-eye {
    position: relative;
}

    .input-with-eye .toggle-eye {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        padding: 6px;
        line-height: 1;
        color: #6c757d;
    }

/* footer links */
.login-links {
    display: flex;
    justify-content: flex-start;
}

    .login-links a {
        font-size: .875rem;
    }

/* button */
.btn-login {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
    padding: .6rem 2rem;
    border-radius: 4px;
    box-shadow: 0 .35rem 0 rgba(0,0,0,.15);
}

    .btn-login:hover {
        filter: brightness(.95);
        color: #fff;
    }

/* responsive: oculta imagen en móviles */
@media (max-width: 991.98px) {
    .left-pane {
        display: none;
    }

    .right-pane {
        min-height: 100vh;
    }
}
