/* Tela de login (components/tela-login.js).
   Fases da entrada: f1 símbolo surge · f2 nome sai do símbolo · f3 logo sobe
   e o formulário abre · f4 fim (libera o recorte do formulário). */
.login{
  /* altura do logo; o nome tem 261/53 da altura e encosta 5/53 no símbolo */
  --h:68px;
  position:fixed;inset:0;z-index:2000;overflow:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px 64px;
  background:
    radial-gradient(900px 600px at 100% -10%,rgba(46,94,255,.14),transparent 60%),
    radial-gradient(700px 520px at -10% 110%,rgba(46,94,255,.10),transparent 60%),
    var(--bone);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
body.com-login{overflow:hidden}
.login-palco{display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px;margin:auto 0}

/* ---- logo ---- */
.login-logo{display:flex;align-items:center;height:var(--h);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ll-simbolo{height:var(--h);width:var(--h);display:block;position:relative;z-index:1;opacity:0;
  transform:scale(.35) rotate(-120deg);
  transition:opacity .45s ease,transform .85s cubic-bezier(.34,1.56,.64,1)}
.ll-nome{display:block;height:var(--h);width:0;overflow:hidden;margin-left:calc(var(--h) * -5 / 53);
  transition:width 1s cubic-bezier(.65,0,.35,1)}
.ll-nome img{display:block;height:var(--h);width:calc(var(--h) * 261 / 53);max-width:none;
  opacity:0;transform:translateX(-45%);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .7s ease .1s}
.login.f1 .ll-simbolo{opacity:1;transform:none}
.login.f2 .ll-nome{width:calc(var(--h) * 261 / 53)}
.login.f2 .ll-nome img{opacity:1;transform:none}
.login.f3 .login-logo{transform:scale(.78)}

/* ---- formulário: a linha cresce e empurra o logo para cima ---- */
.login-form-wrap{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows .9s cubic-bezier(.2,.8,.2,1)}
.login.f3 .login-form-wrap{grid-template-rows:1fr}
.login-form-inner{overflow:hidden;min-height:0;padding:0 4px}
.login.f4 .login-form-inner{overflow:visible}
.login-form{display:flex;flex-direction:column;gap:14px;margin:22px 0 6px;background:var(--paper);border:2px solid var(--ink);
  border-radius:24px;padding:28px 28px 22px;box-shadow:0 24px 60px -30px rgba(0,14,59,.45)}
.login-form > *{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.3s + var(--i,0) * 70ms)}
.login.f3 .login-form > *{opacity:1;transform:none}
.login-form .demo-flag{align-self:flex-start;margin-top:0}
.login-titulo{font-family:var(--f-titulo);font-weight:800;font-size:clamp(21px,3vw,26px);letter-spacing:-.045em;line-height:1.1;margin:0}
.login-sub{font-size:13px;opacity:.65;margin-top:-6px}
.login-campo{display:flex;flex-direction:column;gap:6px}
.login-campo > span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;opacity:.55}
.login-campo input{font:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid rgba(0,14,59,.25);
  border-radius:12px;padding:12px 14px;width:100%;outline:none;transition:border-color .2s,box-shadow .2s}
.login-campo input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,94,255,.16)}
.login-senha{position:relative}
.login-senha input{padding-right:84px}
.login-ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:none;background:var(--blue-soft);color:var(--blue-deep);border-radius:8px;padding:7px 10px;cursor:pointer}
.login-ver:hover{background:var(--blue);color:var(--paper)}
.login-linha{display:flex;justify-content:flex-end;margin-top:-4px}
.login-link{background:none;border:none;color:var(--blue-deep);font-size:12px;font-weight:600;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.login-link:hover{color:var(--blue)}
.login-msg{font-size:12.5px;line-height:1.45;border-radius:11px;padding:10px 12px}
.login-msg.erro{background:var(--neg-soft);color:var(--neg)}
.login-msg.ok{background:var(--blue-soft);color:var(--blue-deep)}
.login-entrar{width:100%;padding:14px 20px;font-size:13px;margin-top:2px}
.login-entrar .seta{transition:transform .25s ease}
.login-entrar:hover .seta{transform:translateX(4px)}
.login-entrar:disabled{opacity:.8;cursor:progress}
.login.entrando .login-entrar .seta{animation:gira .8s linear infinite;display:inline-block}
.login-contas{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px dashed var(--line)}
.lc-t{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;opacity:.55}
.lc-lista{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lc-conta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);transition:all .2s ease}
.lc-conta:hover{border-color:var(--blue);background:var(--blue-soft)}
.lc-conta:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.lc-conta b{font-family:var(--f-titulo);font-weight:800;font-size:12px;letter-spacing:-.02em}
.lc-conta span{font-size:10.5px;opacity:.6;word-break:break-all}
@media(max-width:420px){.lc-lista{grid-template-columns:1fr}}
.login-priv{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.5;color:var(--blue-deep);
  background:var(--blue-soft);border-radius:12px;padding:10px 12px}
.login-priv svg{flex-shrink:0;margin-top:2px}
.login-rodape{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;opacity:0;transition:opacity .8s ease .6s}
.login.f3 .login-rodape{opacity:.45}

/* pular a animação: transições curtas, sem esperas */
.login.rapido .ll-simbolo,.login.rapido .ll-nome,.login.rapido .ll-nome img,.login.rapido .login-logo,
.login.rapido .login-form-wrap,.login.rapido .login-form > *{transition-duration:.25s;transition-delay:0s}

/* saída: a tela some suavemente e revela o painel */
.login.saindo{opacity:0;transform:scale(1.03);pointer-events:none}

@media(max-width:640px){
  .login{--h:50px;padding:24px 14px 56px}
  .login-form{padding:22px 18px 18px;border-radius:20px}
}
@media (prefers-reduced-motion: reduce){
  .login,.login *{transition:none!important}
}