/* ============================================================
   Inicio de sesión. Tarjeta centrada sobre el fondo de la
   aplicación, con los mismos controles y tokens que el resto
   del CRM.
   ============================================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--bg);
}

.login-card {
    width: min(390px, 100%);
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.invitation-card { width: min(720px, 100%); }
.invitation-card form > * + * { margin-top: 16px; }
.login-card > * + * { margin-top: 18px; }

.login-logo { text-align: center; }
.login-logo .mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
}
.login-logo .marca {
    display: block;
    font-family: var(--titulo);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .07em;
}
.login-logo .sub {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
}

#login-form > * + * { margin-top: 14px; }
#login-form button[type="submit"] { width: 100%; height: 38px; }

.login-card > small {
    display: block;
    color: var(--text-muted);
    text-align: center;
}