/* Login screen, account and user management (uses the tokens from styles.css) */
body.locked > header, body.locked > main { display: none; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 360px; display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 24px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.login-card img { height: 56px; justify-self: center; }
.login-card h1 { margin: -6px 0 6px; text-align: center; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.login-card label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.login-card input { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); }
.login-card .btn { justify-content: center; padding: 10px; }
.login-card .err { margin: 0; min-height: 1em; }
.login .logo-dark { display: none; }
:root[data-theme="dark"] .login .logo-light { display: none; }
:root[data-theme="dark"] .login .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login .logo-light { display: none; }
  :root:not([data-theme="light"]) .login .logo-dark { display: block; }
}

.user-btn { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .user-btn { max-width: 90px; } }

dialog.narrow { max-width: min(480px, 94vw); }
#dlg-users h4, #dlg-account h4 { margin: 18px 0 8px; font-size: 14px; }
.users-table td { vertical-align: middle; }
.users-table td.r { white-space: nowrap; }
.chip.rol-admin { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--ink); }
input[readonly] { opacity: .7; }