/* Componentes que as 8 páginas com login já desenhavam igual, cada uma na sua
 * cópia. Carregado DEPOIS de theme.css (que define as variáveis) e ANTES do
 * <style> da página, então qualquer regra local de mesma especificidade
 * continua vencendo: o que é deliberadamente diferente por página fica lá.
 *
 * ⚠️ O que NÃO entra aqui, de propósito: .nav, .wrap, .brand, .nav-tag, .btn
 * (base) e body. Eles divergem por decisão de layout, não por descuido —
 * .wrap é 1240px no /empresas, 960px no /inicio e 900px no /minha-empresa, e
 * .nav-in tem 52px no /empresas contra 62px no resto. Unificar mexeria em
 * pixel sem ninguém ter pedido. */

*{box-sizing:border-box;margin:0;padding:0}

/* ---- Overlay de login ------------------------------------------------------
 * Estrutura fixa nas 8 páginas: #login-overlay > .login-card > #clerk-signin,
 * onde o <SignIn> do Clerk é montado por monitore-auth.js. z-index 300 porque
 * era o maior em uso (no /entrar/) e nada mais na base compete com ele. */
#login-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(11,18,32,.92)}
#login-overlay.hidden{display:none}

/* Trava a rolagem do fundo enquanto o overlay está de pé. Era JS só no
 * /entrar/ (document.body.style.overflow nos dois sentidos); em CSS vale para
 * as 8 e some junto com a classe .hidden, sem par de chamadas pra desbalancear. */
body:has(#login-overlay:not(.hidden)){overflow:hidden}

/* ⚠️ width:auto, não uma largura fixa. O <SignIn> do Clerk v5 tem largura
 * mínima própria (~400px) e `#clerk-signin{width:100%}` não a segura: com o
 * cartão travado em 340px o componente vazava pela borda direita e, em viewport
 * estreita, saía da tela. Isso valia nas 8 páginas desde antes da consolidação.
 * Dimensionar pelo conteúdo faz o cartão acompanhar o Clerk e voltar aos 340px
 * do min-width quando ele não está montado (a tela de erro de carga). */
.login-card{width:auto;min-width:340px;max-width:calc(100vw - 40px);background:var(--card-dark);border:1px solid var(--surface-dark-soft);border-radius:var(--r-md);padding:36px 32px;box-shadow:0 30px 80px rgba(11,18,32,.55);display:flex;flex-direction:column;gap:12px;color:#fff}
.login-card .mk{width:28px;height:28px;border-radius:6px;background:url('/favicon.svg') center/contain no-repeat;margin-bottom:2px}
.login-card h2{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:#fff;letter-spacing:-.02em;margin-top:4px}
.login-card .sub{font-size:13px;color:rgba(255,255,255,.56);line-height:1.4;margin-bottom:6px}
#clerk-signin{width:100%}
#clerk-signin[hidden]{display:none}

/* Mesmo motivo do de cima: o [hidden] do agente de usuário não tem !important,
 * então o `display:inline-flex` do .btn/.btn-sair de cada página vence e o
 * `$('btn-sair').hidden = true` de montarUserButton() não escondia nada — as 7
 * páginas mostravam "Sair" ao lado do UserButton do Clerk, que existe
 * justamente para substituí-lo. */
#btn-sair[hidden]{display:none}

/* ---- Botões: modificadores e estados ---------------------------------------
 * A base .btn continua em cada página (padding e font-size mudam por tela),
 * mas paleta e estados eram byte a byte os mesmos em 5 a 7 páginas. */
.btn:focus-visible{outline:2px solid var(--peri);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-ghost{background:var(--surface-dark-soft);color:#fff;border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{background:#17233f}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover:not(:disabled){opacity:.86}
.btn-outline{background:#fff;color:var(--ink);border-color:rgba(0,0,0,.13)}
.btn-outline:hover:not(:disabled){background:#fafafa}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover:not(:disabled){opacity:.86}
.nav .btn{padding:6px 10px;font-size:10px}