/* BG lado izq */
.loginpage {
    background: url('/assets/images/login.jpg') center/cover no-repeat !important;
    grid-area: auth-aside;
    position: relative;
}

.loginpage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(25, 29, 29, .65), rgba(0, 22, 21, .25));
}

@media (min-width: 1400px) {
    body.auth main {
        grid-template-areas:
            "auth-aside auth-header"
            "auth-aside auth-body"
            "auth-aside auth-footer";
        grid-template-rows: 100px auto 50px;
        grid-template-columns: 1fr 600px;
    }
}

/* Wrapper con el mismo ancho que la card */
.auth-wrap {
    max-width: 460px;
    margin: 0 auto;
}

/*
          CAMBIO PEDIDO:
          - más separado de arriba -> aumenta padding-top
          - más pegado al card -> reduce padding-bottom
        */
.auth-header {
    padding-top: 6.5rem;
    /* más separado arriba (ajusta a gusto) */
    padding-bottom: .5rem;
    /* más pegado al card */
}

.auth-logo {
    width: 200px;
    display: block;
}

/* Card */
.auth-card {
    max-width: 460px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .96);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .10);
    border: 1px solid rgba(0, 0, 0, .06);
    backdrop-filter: blur(8px);
}

.auth-card .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .2rem rgba(0, 72, 70, .15);
}

.auth-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 12px;
}

.auth-link:hover {
    text-decoration: underline;
}

.cursor-pointer {
    cursor: pointer;
}

.btn-loading {
    pointer-events: none;
    opacity: .9;
}

.btn-loading .spinner-border {
    vertical-align: -2px;
}

/* Mobile: logo más pequeño y centrado al medio */
@media (max-width: 991.98px) {
    .auth-header {
        min-height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .auth-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .auth-logo {
        width: 140px;
        margin: 0;
    }
}