/* ---------- Entrar do painel = Entrar do app BPlayer (Beto 04/11) ----------
   Mesma composição do app (logo em cima, arte do "b" com brilho, título, campos de LINHA com rótulo que sobe e linha laranja no
   foco, botão em pílula que acende ao preencher). Tudo cabe na tela, sem rolagem: a coluna ocupa a altura inteira e a arte
   encolhe junto com a altura. Deitado/PC/tablet deitado: arte à esquerda, formulário à direita (igual ao app). Claro e escuro
   usam as cores do tema (--texto, --suave, --borda-forte, --ativo). Só o #login: o convite (#convite) segue como estava. */
#login{flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;padding:calc(env(safe-area-inset-top) + .9rem) 1.25rem calc(env(safe-area-inset-bottom) + .8rem);display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#login .login-marca{display:flex;align-items:center;flex:none;margin:0}
#login .login-marca .login-logo{width:auto;height:2.1rem;margin:0;max-width:none}
#login .login-marca .rotulo-painel{height:26px;margin-left:12px;padding:0 9px;font-size:14px}
#login .login-corpo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;max-width:30rem;margin:0 auto;padding:0 .4rem}
#login .login-arte{display:block;flex:none;width:auto;max-width:100%;height:min(24rem,30vh);aspect-ratio:1;margin:0 auto .2rem;--arte-b:var(--creme)}
:root[data-tema=claro] #login .login-arte{--arte-b:var(--claro-texto)}
#login .arte-b{fill:var(--arte-b)}
#login .brilho-a,#login .brilho-b,#login .brilho-c{stop-color:var(--laranja)}
#login .brilho-a{stop-opacity:.34}#login .brilho-b{stop-opacity:.12}#login .brilho-c{stop-opacity:0}
:root[data-tema=claro] #login .brilho-a{stop-opacity:.22}:root[data-tema=claro] #login .brilho-b{stop-opacity:.08}
#login .login-principal{display:flex;flex-direction:column;align-items:stretch;width:100%}
#login h1{margin:0 0 .5rem;font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.22;font-weight:800;letter-spacing:-.01em;color:var(--texto)}
#login .login-principal>p{margin:0 0 1rem;color:var(--suave);font-size:1rem;line-height:1.5}
#login .login-campos{padding:0;background:none;border:0;text-align:left}
#login .login-campos>button{margin:0}
/* campo de linha com rótulo que sobe */
#login .lc{position:relative;display:block;margin:0 0 .9rem;padding-top:1.05rem}
#login .lc input{display:block;width:100%;height:2.6rem;min-height:0;padding:0;border:0;border-bottom:1px solid var(--borda-forte);border-radius:0;background:transparent;box-shadow:none;color:var(--texto);font:400 max(16px,1rem)/1 Sora,system-ui,sans-serif;outline:none;transition:border-color 180ms var(--entrada),box-shadow 180ms var(--entrada)}
#login .lc-botao input{padding-right:4.6rem}
#login .lc-rot{position:absolute;left:0;top:1.05rem;height:2.6rem;display:flex;align-items:center;color:var(--suave);font-size:1rem;pointer-events:none;transform-origin:0 0;transition:transform 180ms var(--entrada),color 180ms var(--entrada)}
#login .lc input:focus+.lc-rot,#login .lc input:not(:placeholder-shown)+.lc-rot{transform:translateY(-1.45rem) scale(.75)}
#login .lc input:focus+.lc-rot{color:var(--texto)}
#login .lc input:focus{border-bottom-color:var(--ativo);box-shadow:0 1px 0 var(--ativo)}
#login .lc input::placeholder{color:transparent}
#login #mostrar-login{position:absolute;right:0;bottom:.35rem;z-index:4;width:auto;min-height:2rem;margin:0;padding:0 .3rem;border:2px solid transparent;background:transparent;box-shadow:none;color:var(--texto);font:700 .7rem/1 Sora,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
#login #mostrar-login:hover{border-color:transparent}
#login #mostrar-login:focus-visible{outline:2px solid var(--ativo);outline-offset:0}
/* botão principal: apagado até preencher; aceso = laranja cheio */
#login button.principal{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:.5rem 0 0;padding:0 1.4rem;border:1px solid var(--borda-forte);border-radius:999px;background:transparent;color:var(--suave);font:700 .85rem/1.2 Sora,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;box-shadow:none;transition:background-color 180ms var(--entrada),color 180ms var(--entrada),border-color 180ms var(--entrada),transform 120ms var(--entrada)}
#login:valid button.principal{background:var(--laranja);border-color:var(--laranja);color:var(--sobre-laranja)}
#login button.principal:focus-visible{outline:2px solid var(--ativo);outline-offset:2px}
#login .login-pe{flex:none;margin:.6rem 0 0;text-align:left}
#login .login-pe small{color:var(--suave);font-size:.78rem}
/* deitado, PC e tablet deitado: arte à esquerda, formulário à direita (igual ao app) */
@media (min-width:700px) and (orientation:landscape),(min-width:900px) and (min-height:500px){
 #login .login-corpo{display:grid;grid-template-columns:auto minmax(0,27rem);align-content:center;justify-content:center;align-items:center;column-gap:clamp(2rem,7vw,5.5rem);max-width:none;text-align:left}
 #login .login-arte{width:min(44vh,19rem);height:auto;max-width:none;margin:0 auto}
 #login h1{font-size:clamp(1.6rem,2.5vw,2.2rem)}
}
@media (min-width:900px){#login{padding-left:3.4rem;padding-right:3.4rem}}
/* tela baixa (celular deitado, teclado): campos e títulos um pouco mais juntos para caber sem rolar */
@media (max-height:460px){
 #login{padding-top:calc(env(safe-area-inset-top) + .5rem);padding-bottom:calc(env(safe-area-inset-bottom) + .4rem)}
 #login .login-marca .login-logo{height:1.8rem}
 #login .login-arte{width:min(44vh,12rem);height:auto}
 #login h1{margin-bottom:.2rem;font-size:1.4rem}
 #login .login-principal>p{margin-bottom:.4rem;font-size:.9rem}
 #login .lc{margin-bottom:.4rem}
 #login .lc input{height:2.3rem}
 #login .lc-rot{height:2.3rem}
 #login button.principal{min-height:44px;margin-top:.3rem}
 #login .login-pe{margin-top:.2rem}
}
@media (prefers-reduced-motion:reduce){#login .lc input,#login .lc-rot,#login button.principal{transition:none}}