/* Tela de login: cópia do layout padrão. Escura fixa, não lê o tema do app. */

#loginScreen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);color:var(--ink);overflow-y:auto}
html.logado #loginScreen{display:none}
.login-card{width:100%;max-width:380px;background:var(--elev);border:1px solid var(--line);border-radius:18px;padding:34px 30px 28px;box-shadow:var(--shadow-lg);animation:login-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes login-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* marca do painel: o logo do cliente (ou as iniciais) e o nome dele */
.avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--fill-on);color:var(--ink);border:1px solid var(--line);font-weight:800;letter-spacing:-.02em;line-height:1;user-select:none}
img.avatar{display:block;width:auto;object-fit:contain;background:#fff;border-color:transparent}
.login-logo{display:flex;justify-content:center;margin-bottom:12px}
.login-logo .avatar{height:56px;border-radius:14px;font-size:20px}
.login-logo span.avatar{width:56px}
.login-logo img.avatar{max-width:200px;padding:6px}
.login-cliente{text-align:center;font-weight:700;font-size:15px;color:var(--ink);margin:0 0 26px}
.login-title{font-weight:800;font-size:21px;letter-spacing:-.02em;margin:0 0 6px}
.login-sub{font-size:12.5px;color:var(--mute);line-height:1.5;margin:0 0 22px}
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.login-field label{font-weight:600;font-size:12.5px;color:var(--mute)}
.login-field input{font-family:inherit;font-size:14px;color:var(--ink);background:var(--campo);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .15s}
.login-field input::placeholder{color:var(--mute2)}
.login-field input:focus{border-color:var(--sinal)}
/* Preenchimento automático do navegador pinta o campo de azul claro e o texto de preto, e o olho
   (cor --mute, clara no escuro) some em cima. Fixa fundo e texto nas cores do tema. */
.login-field input:-webkit-autofill,.login-field input:-webkit-autofill:hover,.login-field input:-webkit-autofill:focus,.login-field input:autofill{-webkit-box-shadow:0 0 0 100px var(--campo) inset;box-shadow:0 0 0 100px var(--campo) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 9999s ease-out 0s}
.login-pwd-wrap{position:relative;display:flex}
.login-pwd-wrap input{flex:1;padding-right:40px}
.login-pwd-toggle{position:absolute;right:4px;top:4px;bottom:4px;width:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:7px;color:var(--mute);cursor:pointer}
.login-pwd-toggle:hover{color:var(--ink);background:var(--fill-on)}
.login-pwd-toggle svg{width:17px;height:17px}
.login-pwd-toggle .ico-off{display:none}
.login-pwd-toggle.on .ico-on{display:none}
.login-pwd-toggle.on .ico-off{display:block}
.login-err{min-height:16px;font-size:12.5px;color:var(--estado-atraso);font-weight:600;margin:2px 0 4px}

/* botão primário do login (também usado no modal de acesso interno) */
.btn{width:100%;border:0;background:var(--sinal-solido);color:var(--sinal-ink);font-weight:700;font-size:14px;cursor:pointer;padding:11px 16px;border-radius:10px;transition:transform .15s,filter .15s;box-shadow:0 2px 4px color-mix(in srgb,var(--sinal-solido) 26%,transparent)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:disabled{opacity:.55;cursor:default;transform:none;filter:none}