/* ============================================================================
   Telas de entrada (login, cadastro, confirmação de e-mail, conta inativa).
   ============================================================================
   Por que existe: a entrada era a única tela do sistema que não carregava o
   design system — tinha ~35 linhas de <style> inline com um laranja (#fd7e14)
   que nem é o âmbar da marca, sem tema escuro, sem Inter e sem os tokens.
   Aqui mora SÓ o que é específico da entrada (o shell dividido, o painel de
   marca, os agrupamentos de campo). Tudo que já existe no design system —
   .ds-field, .ds-btn, .ds-form-grid, .ds-wizard-* — é usado como está.

   Regras do arquivo:
     - ZERO !important. ZERO hex de status. ZERO #fd7e14.
     - Âmbar é ACENTO: botão primário, foco, filete, sublinhado de link.
       Nunca faixa de fundo. Texto sobre âmbar é --ds-on-brand (escuro).
     - Prefixo `auth-` no que nasce aqui; `ds-` só para o que já é do sistema.
     - Carrega DEPOIS de compat.css (é a última folha da entrada): é o que
       permite desfazer o `body { height:100vh; overflow:hidden }` do app sem
       precisar de !important.
   ========================================================================== */


/* ── o corpo da página ────────────────────────────────────────────────────
   style.css:73 trava o body em `height:100vh; overflow:hidden` porque no app
   quem rola é o .main. Na entrada não existe .main: o conteúdo cresce (o
   cadastro tem três passos) e precisa rolar na própria página — sem isto o
   final do formulário fica inalcançável no notebook.
   ========================================================================== */
.auth-body {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ── shell: marca à esquerda, formulário à direita ───────────────────────── */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-5);
  padding: var(--ds-6);
  background: var(--ds-surface-2);
  border-right: 1px solid var(--ds-border);
}
.auth-brand-inner { margin: auto 0; max-width: 30rem; }
.auth-brand-logo { display: block; width: min(280px, 78%); height: auto; }
/* O único âmbar sólido do painel: um filete de acento. Uma FAIXA de fundo
   âmbar é o que o design system proíbe — 3px de régua, não. */
.auth-brand-rule {
  width: 44px; height: 3px; margin: var(--ds-5) 0 var(--ds-4);
  background: var(--ds-brand); border-radius: 2px;
}
.auth-brand-line {
  margin: 0;
  max-width: 30ch;
  font-size: var(--ds-fs-5);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ds-text-dim);
}
.auth-brand-foot {
  margin: 0;
  font-size: var(--ds-fs-2);
  /* --ds-text-dim, não --ds-text-faint: o faint foi medido sobre --ds-surface
     (4.59:1) e aqui o fundo é --ds-surface-2, onde ele cai para ~4.05:1 —
     abaixo de AA para texto pequeno. O dim dá ~5.2:1 no mesmo fundo. */
  color: var(--ds-text-dim);
}

.auth-main {
  display: flex;
  flex-direction: column;
  padding: var(--ds-5) var(--ds-5) var(--ds-6);
  background: var(--ds-surface);
}
.auth-topbar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--ds-2); flex: none;
}
.auth-panel {
  width: 100%;
  max-width: 400px;
  margin: auto;                 /* centra nos dois eixos dentro do .auth-main */
  padding: var(--ds-5) 0;
}
/* Cadastro: formulário de duas colunas precisa de mais largura que o login. */
.auth-panel-wide { max-width: 660px; }


/* ── alternador de tema ───────────────────────────────────────────────────
   Mesmo contrato do app (localStorage 'theme' + [data-theme] no <html>): quem
   usa escuro fazia logout e caía numa tela branca.
   ========================================================================== */
.auth-theme-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  color: var(--ds-text-dim);
  background: transparent;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
}
.auth-theme-btn:hover { color: var(--ds-text); border-color: var(--ds-border-strong); }
.auth-theme-btn:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 2px; }


/* ── texto ───────────────────────────────────────────────────────────────── */
.auth-title {
  margin: 0;
  font-size: var(--ds-fs-7);
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--ds-text);
}
.auth-subtitle {
  margin: 0;
  font-size: var(--ds-fs-5);
  font-weight: 700;
  color: var(--ds-text);
}
/* O :where() zera a especificidade do seletor interno: o parágrafo solto que
   o allauth emite ganha o estilo base, e QUALQUER classe declarada depois
   (.auth-muted, .auth-step-desc) continua vencendo sem precisar escalar. */
.auth-panel :where(p) {
  margin: var(--ds-2) 0 0;
  font-size: var(--ds-fs-3);
  line-height: 1.5;
  color: var(--ds-text-dim);
}
.auth-panel > :first-child { margin-top: 0; }
.auth-lead { margin-bottom: var(--ds-5); }
/* Link: âmbar puro como TEXTO reprova contraste (1.9:1 no claro). O acento da
   marca entra no sublinhado; a cor do texto continua legível.
   O :not(.ds-btn) existe porque link-botão (o "Voltar para o login") é botão,
   não link: sublinhar e engrossar dentro da pílula fica errado. */
.auth-panel a:not(.ds-btn) {
  color: var(--ds-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ds-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.auth-panel a:not(.ds-btn):hover { text-decoration-color: var(--ds-brand-ink); }
.auth-panel a:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 2px; border-radius: 2px; }
.auth-muted { font-size: var(--ds-fs-2); color: var(--ds-text-faint); }
.auth-foot {
  margin-top: var(--ds-5);
  padding-top: var(--ds-4);
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-fs-2);
  color: var(--ds-text-dim);
  text-align: center;
}
.auth-foot p { font-size: var(--ds-fs-2); }


/* ── formulário ───────────────────────────────────────────────────────────
   Os campos são .ds-field do design system; aqui só o ritmo entre eles e as
   composições que o DS não tem (grupo de input, checkbox em linha).
   ========================================================================== */
.auth-form { margin-top: var(--ds-5); }
.auth-form-body { display: flex; flex-direction: column; gap: var(--ds-4); }
.auth-form-actions {
  display: flex; flex-direction: column; gap: var(--ds-2);
  margin-top: var(--ds-5);
}
.auth-btn-block {
  width: 100%;
  justify-content: center;
  padding: 9px 14px;
  font-size: var(--ds-fs-4);
}
.auth-actions-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-3); flex-wrap: wrap;
  margin-top: var(--ds-5);
}

/* checkbox/radio em linha — o .ds-field é coluna, aqui o rótulo fica ao lado */
.auth-check { display: flex; align-items: center; gap: var(--ds-2); }
.auth-check input { width: 15px; height: 15px; flex: none; margin: 0; }
.auth-check label {
  font-size: var(--ds-fs-3); font-weight: 500;
  color: var(--ds-text); cursor: pointer;
}
.auth-check-help { margin-left: 23px; }

/* grupo de input (documento + tipo, senha + olho, cupom + aplicar).
   O seletor do <select> leva :not([multiple]) porque tokens.css o estiliza com
   `select:not([multiple]):not(.select2-hidden-accessible)` — (0,2,1). Um
   `.auth-inputgroup > select` (0,1,1) perderia o border-radius para ele. */
.auth-inputgroup { display: flex; align-items: stretch; min-width: 0; }
.auth-inputgroup > * { border-radius: 0; }
.auth-inputgroup > :first-child { border-radius: var(--ds-radius) 0 0 var(--ds-radius); }
.auth-inputgroup > :last-child { border-radius: 0 var(--ds-radius) var(--ds-radius) 0; }
.auth-inputgroup > select:not([multiple]) {
  flex: none; max-width: 108px;
  border-radius: var(--ds-radius) 0 0 var(--ds-radius);
}
.auth-inputgroup > input { flex: 1 1 auto; min-width: 0; }
/* A borda encostada some para não virar linha dupla entre os dois controles. */
.auth-inputgroup > :not(:last-child) { border-right-width: 0; }

.auth-ig-btn {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; padding: 0 var(--ds-3); cursor: pointer;
  font-size: var(--ds-fs-2); font-weight: 600;
  color: var(--ds-text-dim);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border-field);
}
.auth-ig-btn:hover { color: var(--ds-text); }
.auth-ig-btn:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: -2px; }
.auth-ig-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Estado da consulta de CNPJ (spinner / confirmação) dentro do próprio campo:
   como sufixo do grupo ele deixaria uma caixa cinza vazia enquanto não há
   estado nenhum, e o campo mudaria de largura a cada consulta. */
.auth-ig-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.auth-ig-field > input { flex: 1; min-width: 0; padding-right: 32px; border-radius: 0 var(--ds-radius) var(--ds-radius) 0; }
.auth-ig-adorn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; line-height: 1;
  pointer-events: none;
}
.auth-ig-adorn .auth-spinner { color: var(--ds-text-faint); }
.auth-ig-adorn .bi-check-circle-fill { color: var(--ds-ok); }

/* o cupom é sempre em caixa alta (o JS já normaliza o valor enviado) */
.auth-upper { text-transform: uppercase; }

.auth-recaptcha { margin-top: var(--ds-5); }
.auth-recaptcha .g-recaptcha { display: inline-block; max-width: 100%; }


/* ── aviso (element alert + erros de formulário) ──────────────────────────
   Cor + ícone, nunca cor sozinha. Os tints saem de color-mix sobre os tokens
   semânticos, então trocar o tema muda um lugar só.
   ========================================================================== */
.auth-alert {
  display: flex; align-items: flex-start; gap: var(--ds-2);
  margin-bottom: var(--ds-4);
  padding: var(--ds-3);
  font-size: var(--ds-fs-3); font-weight: 600; line-height: 1.45;
  border: 1px solid; border-radius: var(--ds-radius);
  white-space: pre-line;   /* o cadastro junta erros de campo com \n */
}
.auth-alert[hidden] { display: none; }
.auth-alert i { flex: none; font-size: 15px; line-height: 1.35; }
.auth-alert-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.auth-alert-bad {
  color: var(--ds-bad);
  border-color: color-mix(in srgb, var(--ds-bad) 42%, transparent);
  background: color-mix(in srgb, var(--ds-bad) 8%, transparent);
}
.auth-alert-warn {
  color: var(--ds-warn);
  border-color: color-mix(in srgb, var(--ds-warn) 42%, transparent);
  background: color-mix(in srgb, var(--ds-warn) 10%, transparent);
}
.auth-alert-ok {
  color: var(--ds-ok);
  border-color: color-mix(in srgb, var(--ds-ok) 42%, transparent);
  background: color-mix(in srgb, var(--ds-ok) 8%, transparent);
}
.auth-alert-info {
  color: var(--ds-text);
  border-color: var(--ds-border);
  background: var(--ds-surface-2);
}
.auth-alert-info i { color: var(--ds-text-dim); }

/* retorno textual de validação (cupom, CNPJ) — mesma gramática dos campos */
.auth-feedback { display: flex; align-items: flex-start; gap: 5px; font-size: var(--ds-fs-2); }
.auth-feedback-ok { color: var(--ds-ok); font-weight: 600; }
.auth-feedback-bad { color: var(--ds-bad); font-weight: 600; }


/* ── estado ilustrado (e-mail enviado, conta inativa) ─────────────────────
   O sistema não usa emoji como ícone: era um 📧 a font-size:3rem.
   ========================================================================== */
.auth-state { text-align: center; }
.auth-state-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto var(--ds-4);
  font-size: 24px;
  color: var(--ds-text-dim);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-border);
  border-radius: 50%;
}
.auth-state-ico-ok { color: var(--ds-ok); border-color: color-mix(in srgb, var(--ds-ok) 40%, transparent); }
.auth-state-ico-warn { color: var(--ds-warn); border-color: color-mix(in srgb, var(--ds-warn) 40%, transparent); }
.auth-state .auth-title { font-size: var(--ds-fs-6); }
.auth-state-actions {
  display: flex; justify-content: center; gap: var(--ds-2);
  margin-top: var(--ds-5); flex-wrap: wrap;
}


/* ── cadastro: cabeçalho do passo e barra de navegação ────────────────────
   Os passos em si são .ds-wizard-* (design system). Aqui só o que sobra.
   ========================================================================== */
/* Os passos são um <ol> — é uma lista ordenada de verdade, e o leitor de tela
   anuncia "1 de 3". O marcador do navegador é que não entra. */
.ds-wizard-steps { list-style: none; margin-top: 0; padding-left: 0; }
.auth-step-head { margin-bottom: var(--ds-5); }
.auth-step-title {
  margin: 0;
  font-size: var(--ds-fs-5); font-weight: 700; color: var(--ds-text);
}
.auth-step-desc {
  margin: 2px 0 0;
  font-size: var(--ds-fs-2); color: var(--ds-text-dim);
}
.auth-step-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-3); margin-top: var(--ds-5);
}
.auth-step-nav .ds-btn { min-width: 120px; justify-content: center; }
.auth-step-nav-end { margin-left: auto; }
/* O rótulo de cada passo só cabe no desktop; abaixo disso ficam os números,
   que com aria-current continuam dizendo onde a pessoa está. O seletor mira a
   classe, não `span`: o número TAMBÉM é um span. */
@media (max-width: 599px) {
  .auth-step-label { display: none; }
}

/* spinner do botão enquanto o formulário submete (o do Bootstrap herda a cor
   do texto, que sobre âmbar é --ds-on-brand) */
.auth-spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .auth-spinner { animation-duration: 2s; }
}


/* ── elementos secundários do allauth ─────────────────────────────────────
   Aparecem nas telas de gestão de e-mail/senha do pacote.
   ========================================================================== */
.auth-panel-card { padding: var(--ds-4); margin-bottom: var(--ds-4); }
.auth-panel-card > .auth-subtitle { margin-bottom: var(--ds-3); }
.auth-img { text-align: center; }
.auth-img img { max-width: 100%; height: auto; }


/* ── esconder é esconder ──────────────────────────────────────────────────
   O atributo `hidden` só vale display:none pela folha do navegador, e
   qualquer `display` declarado aqui (flex, inline-grid) o atropela — foi o
   que fez o markup antigo depender do .d-none do Bootstrap. Fica no fim para
   vencer por ordem, sem !important.
   ========================================================================== */
[hidden] { display: none; }


/* ── responsivo ───────────────────────────────────────────────────────────
   ≥1024 split 42/58 · 768–1023 painel de marca estreito · <768 coluna única
   com a marca virando uma faixa com o logo no topo.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .auth-shell { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .auth-brand { padding: var(--ds-5); }
  .auth-brand-line { font-size: var(--ds-fs-3); }
  .auth-brand-logo { width: 100%; }
}

@media (max-width: 767px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    flex-direction: row; align-items: center; justify-content: center;
    gap: 0; padding: var(--ds-4);
    border-right: 0; border-bottom: 1px solid var(--ds-border);
  }
  .auth-brand-inner { margin: 0; }
  .auth-brand-logo { width: 156px; }
  .auth-brand-rule, .auth-brand-line, .auth-brand-foot { display: none; }
  .auth-main { padding: var(--ds-3) var(--ds-4) var(--ds-6); }
  .auth-panel { padding: var(--ds-4) 0; }
  .auth-title { font-size: var(--ds-fs-6); }
  .auth-step-nav .ds-btn { min-width: 0; flex: 1; }

  /* Alvo de toque. "Entrar" é a ação de uma tela inteira e tinha ~38px; o
     botão de tema, o "olho" da senha e o "aplicar cupom" ficam em 34px. Numa
     tela que a pessoa usa uma vez por dia com o polegar, é o mínimo. */
  .auth-btn-block { min-height: 48px; }
  .auth-theme-btn { width: 44px; height: 44px; }
  .auth-ig-btn { min-width: 44px; }
  .auth-step-nav .ds-btn { min-height: 44px; }
  /* O rótulo do "Lembrar de mim" é o alvo real (o quadrado tem 15px). */
  .auth-check { min-height: 44px; display: flex; align-items: center; }
}

/* Aqui havia `max-width: 1680px; margin-inline: auto` no shell, para evitar
   que em telas grandes o painel de marca esticasse e o formulário se perdesse
   numa coluna larga.

   O teto resolvia isso criando problema maior: a tela dividida é de sangria
   completa, e travada ela vira um cartão flutuante com faixa de fundo dos dois
   lados — 120px em 1920px, 440px em 2560px. Lido como defeito, não como
   respiro, e foi exatamente assim que apareceu no uso real.

   O conteúdo já está contido onde importa: .auth-brand-inner tem 30rem e
   .auth-panel tem 400px com `margin: auto`, ou seja, o formulário fica
   centrado na coluna por maior que ela seja. Conter a COLUNA, não o shell. */
@media (min-width: 1920px) {
  /* mais peso para o formulário e menos para a marca, sem quebrar a sangria */
  .auth-shell { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
}
