/* Tela de login do Flix Pulse. Tokens e tema vêm de faturamento.css. */
.pagina-login{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;overflow-x:hidden;position:relative}
.pagina-login .theme-toggle{position:fixed;top:16px;right:16px;z-index:2}
.login{position:relative;z-index:1;width:min(340px,100%);display:grid;justify-items:center;text-align:center;padding:0;max-width:none;margin:0}
.login-marca{position:relative;display:inline-block;line-height:0;margin-bottom:22px}
.login-logo{width:auto;height:64px}
/* O brilho do logo (.logo-brilho, .logo-fluxo) mora em faturamento.css: é o mesmo do topo das páginas. */
.login .so-escuro{display:none}:root[data-theme=dark] .login .so-escuro{display:block}:root[data-theme=dark] .login .so-claro{display:none}
.login h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.login-sub{margin:8px 0 24px;color:var(--muted);font-size:14px}
.login form{width:100%;display:grid;gap:14px}.login form[hidden]{display:none}

/* Dois campos num bloco só, com rótulo em cima do valor */
.login-campos{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s ease,box-shadow .2s ease}
.login-campos:focus-within{border-color:color-mix(in srgb,var(--red) 55%,var(--line));box-shadow:0 0 0 4px rgba(var(--red-rgb),.12)}
.login-campo{position:relative;display:block;text-align:left;cursor:text}
.login-campo+.login-campo{border-top:1px solid var(--line)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.login-campo input{width:100%;height:56px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:18px 16px 0}
/* Rótulo flutuante: no meio do campo; ao focar (ou com valor) sobe pequeno e o exemplo aparece */
.login-campo .rotulo{position:absolute;left:16px;top:50%;transform:translateY(-50%);transform-origin:left center;color:var(--muted);font-size:16px;pointer-events:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),color .2s ease}
.login-campo input:focus+.rotulo,.login-campo input:not(:placeholder-shown)+.rotulo{transform:translateY(-118%) scale(.78)}
.login-campo input:focus+.rotulo{color:var(--red)}
/* Preenchimento automático do navegador: o valor fica escondido da página até interagir, então
   ":placeholder-shown" não percebe. Regras separadas (seletor desconhecido invalidaria a lista). */
.login-campo input:-webkit-autofill+.rotulo{transform:translateY(-118%) scale(.78)}
.login-campo input:autofill+.rotulo{transform:translateY(-118%) scale(.78)}
.login-campo input.preenchido+.rotulo{transform:translateY(-118%) scale(.78)}
.login-campo input:-webkit-autofill{animation:sinal-autofill .01s}
@keyframes sinal-autofill{from{opacity:1}to{opacity:1}}
.login-campo input::placeholder{color:transparent;font-size:15px;transition:color .2s ease}
.login-campo input:focus::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.login-campo input#senha{padding-right:84px}
.login-campo input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--card) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.login-mostrar{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--red);font:inherit;font-size:14px;font-weight:500;padding:8px;border-radius:8px;cursor:pointer}
.login-mostrar:hover{background:var(--hover)}
.login-mostrar:focus-visible,.login-esqueci:focus-visible,.login-entrar:focus-visible{outline:3px solid rgba(var(--red-rgb),.35);outline-offset:2px}

.login-erro{min-height:0;margin:0;color:var(--red);font-size:13.5px;font-weight:500;text-align:left}
.login-erro:empty{display:none}
.login-entrar{height:46px;border:0;border-radius:12px;background:var(--red);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease}
.login-entrar:hover{box-shadow:0 6px 20px rgba(var(--red-rgb),.35)}
.login-entrar:active{transform:scale(.98)}
.login-entrar:disabled{opacity:.6;cursor:progress}
.login-esqueci{margin-top:20px;border:0;background:transparent;color:var(--red);font:inherit;font-size:14px;padding:6px 10px;border-radius:8px;cursor:pointer}
.login-esqueci:hover{background:var(--hover)}
.login-esqueci-texto{margin:6px 0 0;max-width:340px;color:var(--muted);font-size:13px;line-height:1.5}

.login-campos.tremer{animation:tremer .35s ease}
@keyframes tremer{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.login-campos.invalido{border-color:var(--red)}.login-campos.invalido .login-campo:first-child .rotulo{color:var(--red)}
.login-aviso{width:100%;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:rgba(30,142,62,.12);color:var(--green);font-size:13.5px;font-weight:500;text-align:left}
.login-aviso[hidden]{display:none}
.login-pronto{display:grid;justify-items:center;gap:8px;padding:22px 20px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
.login-pronto[hidden]{display:none}
.login-pronto-icone{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(30,142,62,.13);color:var(--green)}
.login-pronto-icone svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.login-pronto h2{margin:4px 0 0;font-size:18px}
.login-pronto p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.login-erro-caixa{width:100%;padding:12px 14px;border-radius:12px;background:rgba(var(--red-rgb),.1);line-height:1.5}
.login-erro-caixa[hidden]{display:none}
a.login-esqueci{text-decoration:none;display:inline-block}