/* OROCHI — portão da equipe (login). Só tokens de tokens.css e componentes de base.css (.btn, .input, .field).
   Mobile primeiro (Modo Vendedor); no desktop o cartão fica centralizado. A faixa azul repete a barra do painel. */
/* A raiz do portão é .lg-raiz (div.lg continua valendo para o aviso "Este painel é do gestor" do admin). Nada aqui
   usa .lg sozinho: o Modo Vendedor tem <span class="av lg"> (avatar grande) e o portão não pode alcançá-lo. */
html:not(.lg-pronto) body>:not(.lg-raiz):not(div.lg):not(script){visibility:hidden}
:is(.lg-raiz,div.lg){position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));overflow-y:auto;background:var(--bg);background-image:var(--hero-glow);color:var(--fg);font-family:var(--font-body);transition:opacity .25s var(--ease)}
:is(.lg-raiz,div.lg).saindo{opacity:0;pointer-events:none}
.lg-cartao{width:100%;max-width:400px;margin-top:clamp(0px,6vh,48px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-2);overflow:hidden}
.lg-topo{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--topbar-bg);color:var(--topbar-fg);border-bottom:1px solid var(--topbar-line)}
.lg-topo img{width:40px;height:40px;border-radius:50%;flex:none;background:var(--brand-ink)}
.lg-topo div{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.lg-wordmark{font:700 1rem/1.1 var(--font-display);letter-spacing:.01em;white-space:nowrap}
.lg-wordmark>span{font-weight:500;opacity:.8}
.lg-topo small{font-size:.75rem;opacity:.8;font-weight:500}
.lg-corpo{display:flex;flex-direction:column;gap:14px;padding:22px 20px 24px}
.lg-corpo h1{font-size:1.4rem;outline:none}
.lg-corpo p{margin:0}
.lg-form{display:flex;flex-direction:column;gap:14px}
.lg-form .field label{font-size:.85rem}
.lg-form .input{min-height:48px}
.lg-form .input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
:is(.lg-raiz,div.lg) .btn-lg{width:100%;min-height:50px}
.lg-senha{position:relative}
.lg-senha .input{padding-right:92px}
.lg-ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;padding:6px 12px;border-radius:var(--radius-s);font-size:.82rem;font-weight:600;color:var(--accent)}
.lg-ver:hover{background:var(--accent-soft)}
.lg-msg{border-radius:var(--radius-m);padding:10px 12px;font-size:.875rem;font-weight:500;line-height:1.4}
.lg-msg.lg-erro{background:var(--danger-soft);color:var(--danger)}
.lg-msg.lg-ok{background:var(--ok-soft);color:var(--ok)}
.lg-msg.lg-info{background:var(--info-soft);color:var(--info)}
.lg-link{align-self:center;min-height:40px;padding:8px 12px;color:var(--accent);font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lg-rotulo{font:600 .72rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px!important}
.lg-lista{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--fg-2);font-size:.9rem}
.lg-lista code{font-size:.82rem;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:0 4px;word-break:break-word}
.lg-carregando{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 0}
.lg-sub{font-size:1rem!important;font-weight:600;color:var(--fg-2)}
.lg-spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:lg-gira .8s linear infinite}
@keyframes lg-gira{to{transform:rotate(360deg)}}
.lg-rodape{margin:0;font-size:.75rem;color:var(--fg-3);text-align:center}
@media (min-width:560px){:is(.lg-raiz,div.lg){justify-content:center}.lg-cartao{margin-top:0}.lg-corpo{padding:26px 26px 28px}}
@media (prefers-reduced-motion:reduce){:is(.lg-raiz,div.lg){transition:none}.lg-spin{animation-duration:2.4s}}