/* Modo cliente (acesso-cliente.js) e ativação da chave de acesso no painel de login. Mesmo visual do login.css. */
.cliente [data-so-dono] { display: none !important; }

/* .lgbox é grid no login.css: o atributo hidden precisa vencer */
#login .lgbox[hidden], #login .ckpasso[hidden] { display: none; }
#login .ckpasso { display: grid; gap: 16px; }
#login .ckchave { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace !important; font-size: 15px !important; letter-spacing: .06em !important; text-transform: uppercase; }
#login .ckchave::placeholder { color: #B4B4BC; letter-spacing: .06em; }
#login .ckdica { font: 400 12.5px/1.4 var(--lg-font); color: var(--lg-mute); }

/* "Tenho uma chave de acesso" / "Voltar para o login": link discreto que fica vermelho no foco e no hover */
#login .lglink { justify-self: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: 600 14px var(--lg-font); color: var(--lg-mute); text-decoration: underline; text-decoration-color: var(--lg-line); text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease, background .2s ease; }
#login .lglink:hover { color: var(--lg-red-d); text-decoration-color: currentColor; }
#login .lglink:focus-visible { outline: 3px solid rgba(220, 38, 38, .35); outline-offset: 2px; color: var(--lg-red-d); }
#login .lglink:active { background: #F0F0F3; }