/* ============================================================
   AUTH.CSS — Login, registro y autenticación
   APTonerVS · Requiere variables.css
   ============================================================ */


/* ── LOGIN & REGISTER ─────────────────────────────────────── */
.container-login {
    min-height: calc(100vh - 100px);
    background: var(--light-gray);
    padding: 2rem;
}

.login-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 2rem 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-light);
}

    .login-card .title-login {
        font-family: 'Rubik', sans-serif;
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-color);
    }

.position-relative .input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    font-size: 1rem;
    pointer-events: none;
}

.form-control:focus + label + .input-icon {
    color: var(--accent-color);
}

/* ================================================
   PERFIL
   ================================================ */
#profile-form .btn-success {
    font-weight: 600;
    text-transform: uppercase;
}


/* ── Login / Register ────────────────────────────────────────── */

.btn-toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-gray, #6c757d);
    cursor: pointer;
    z-index: 10;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.btn-toggle-password:hover {
    color: var(--primary-color, #000);
}

#passwordField {
    padding-right: 45px !important;
}