/* auth.css — shell de entrada (login/signup): card centrado, sem app-shell.
   Token-driven. NOTA: falta um token de largura de card (ex.: --auth-card-w);
   p/ nao inventar token, derivo a largura de --sidebar-w + --sidebar-collapsed-w
   (~336px) — ver Pendencias do relatorio. */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-24);
  background: var(--c-white);
}
.auth__card {
  width: 100%;
  max-width: var(--auth-card-w);
  min-height: calc(var(--sidebar-w) * 3 + var(--sp-28));   /* ~820px ≈ card alto do legado (821). Card e bloco → conteudo no topo, espaco embaixo. Falta token --auth-card-h (ver pendencias). */
  background: var(--c-white);
  border-radius: var(--r-container);
  box-shadow: var(--shadow-lg);
  padding: calc(var(--sp-32) * 2) var(--sp-24);   /* ~64px vertical (legado ~76; teto dos --sp-*) */
}

/* logo (substitui o titulo-texto) — ~144px, centrado, como o legado */
.auth__logo {
  display: block;
  width: calc(var(--sidebar-collapsed-w) * 1.5);   /* ~108px (era 144) = -25% */
  max-width: 56%;
  margin: var(--sp-24) auto;   /* 24px ACIMA e ABAIXO do logo (simetrico, real) — cria o espaco a distribuir */
}
/* ── Login/signup CONSOMEM o kit ── (atomico-fechamento-s1: skin de .btn/.field APOSENTADA)
   .btn e .field vêm INTEIROS de components.css; auth só consome. A única diferença legítima
   do mundo auth — controles altos (52 no login, 60 no signup) — é retune de TOKEN no wrapper
   (mesmo mecanismo que .auth__card:has(.signup-grid) usa p/ --control-h). O átomo .btn consome
   --btn-h; retunando o token aqui, o botão casa a altura dos campos SEM nenhuma regra tocar .btn.
   Borda (--c-border-strong, A18), foco (ring VERDE-marca --ring-color .55 + borda --c-accent, o
   mesmo de todo campo do app) e ícones (dimensão via .field__icon font-size + cor currentColor)
   vêm todos do kit — 0 override local, foco restaurado. */
/* links em navy (--c-ink), bold e menores — como o legado (#052450/700/11px) */
.auth-form__links .link { color: var(--c-ink); font-weight: var(--fw-bold); font-size: var(--fs-12); }
.auth-form__links .link:hover { color: color-mix(in srgb, var(--c-ink) 85%, black); text-decoration: underline; }

/* formulario de auth (login/signup) */
.auth-form { display: flex; flex-direction: column; gap: var(--sp-16); --btn-h: var(--control-h); }   /* --btn-h retunado: o átomo .btn casa a altura dos campos (52 login / 60 signup) sem regra tocando .btn */
.auth-form__head {
  display: flex;
  align-items: center;
  justify-content: center;
  /* cancela o gap do .auth-form (--sp-16) abaixo do head: assim o espaco ABAIXO do logo
     (logo-mb 24 + gap cancelado) == o espaco ACIMA (logo-mt 24) → medido igual, e > 0. */
  margin-bottom: calc(-1 * var(--sp-16));
}
.auth-form__alert {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-12); border-radius: var(--r-container);
  background: color-mix(in srgb, var(--c-danger) 12%, var(--c-white));
  border: var(--bw-thin) var(--bs-solid) color-mix(in srgb, var(--c-danger) 40%, var(--c-white));
  color: var(--c-danger); font-size: var(--fs-14);
}
.auth-form__links { display: flex; justify-content: space-evenly; gap: var(--sp-12); margin-top: var(--sp-8); font-size: var(--fs-14); }
/* rodape legal (politica de privacidade) — texto cinza pequeno, link navy (como o legado footer-note) */
.auth-form__legal { margin-top: var(--sp-12); text-align: center; font-size: var(--fs-12); color: var(--c-gray); line-height: var(--lh-base); }
.auth-form__legal .link { color: var(--c-ink); font-size: inherit; font-weight: inherit; }
.auth-form__legal .link:hover { color: color-mix(in srgb, var(--c-ink) 85%, black); text-decoration: underline; }

/* MOBILE: card vira tela cheia (sem sombra/raio/max-width), como o legado.
   @media nao aceita var(); 640px = valor do token --bp-sm (px literal necessario aqui). */
@media (max-width: 640px) {
  .auth { padding: var(--sp-0); place-items: stretch; }
  .auth__card {
    max-width: 100%;
    min-height: 100vh;
    border-radius: var(--sp-0);
    box-shadow: none;
    padding: var(--sp-24);
  }
}

/* viewport baixo: o card alto nao cabe centralizado → alinha ao topo (como o legado @max-height:700) */
@media (max-height: 700px) {
  .auth { align-items: start; }
}

/* ── MINIMO p/ conteudo novo das telas de auth (titulo/mensagem/honeypot/planos/doc) ──
   Adicionado na propagacao (signup, telas-resultado, privacidade). Token-driven. */
.auth-form__title { text-align: center; }   /* tipografia: role title-section (20/bold/ink) em components.css — carrega antes de auth.css */
.auth-form__message { text-align: center; font-size: var(--fs-14); color: var(--c-gray); line-height: var(--lh-base); }
.auth-form__message strong { color: var(--c-ink); }
/* honeypot (signup): presente no DOM, invisivel ao humano (bot preenche) */
.auth-hp { position: absolute; width: var(--bw-thin); height: var(--bw-thin); overflow: hidden; clip-path: inset(50%); }
/* ── Privacidade: layout DOC LARGO (legado: card ~900px, 7 secoes empilhadas em cards) ── */
.auth__card:has(.privacy-doc) { max-width: var(--auth-card-w-wide); }
.privacy-doc { display: flex; flex-direction: column; text-align: left; }
.privacy-doc__brand { display: flex; align-items: center; gap: var(--sp-12); }
.privacy-doc__logo { width: calc(var(--btn-h) + var(--sp-4)); height: calc(var(--btn-h) + var(--sp-4)); border-radius: var(--r-container); object-fit: contain; }
.privacy-doc__mark { font-weight: var(--fw-extrabold); letter-spacing: var(--ls-wide); color: var(--c-ink); }
.privacy-doc__kicker { font-size: var(--fs-12); color: var(--c-gray); }
.privacy-doc__intro { margin-top: var(--sp-12); font-size: var(--fs-14); color: var(--c-gray); }
.privacy-doc__grid { display: grid; gap: var(--sp-12); margin-top: var(--sp-16); }   /* 1 coluna (legado) */
/* tipografia das seções (a superfície vem do componente global .card.card--subtle) */
.privacy-doc__grid h3 { margin-bottom: var(--sp-6); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-ink); }
.privacy-doc__grid p { font-size: var(--fs-14); color: var(--c-gray); line-height: var(--lh-relaxed); }
.privacy-doc__actions { display: flex; flex-wrap: wrap; gap: var(--sp-10); margin-top: var(--sp-16); }

/* ════════════════════════════════════════════════════════════════════════
   SIGNUP — card largo 2-colunas + componente plan-card (fiel ao legado)
   .signup-grid = planos (esq) | cadastro (dir). O card alarga via :has()
   quando contem .signup-grid — sem tocar base_auth/_auth_base (so o slot).
   ════════════════════════════════════════════════════════════════════════ */
/* card do signup: largo + campos/botao a 60px (legado data-flow=signup); :root/login segue 52 */
.auth__card:has(.signup-grid) { max-width: var(--auth-card-w-wide); --control-h: var(--control-h-lg); }

.signup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-18);
  align-items: stretch;          /* colunas com a mesma altura (legado) */
  text-align: left;
  margin-top: var(--sp-12);       /* respiro acima do bloco (legado) */
}
.signup-col { display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; }
.signup-col__title { margin: 0; text-align: center; font-size: var(--fs-16); font-weight: var(--fw-extrabold); color: var(--c-ink); }
.signup-col__sub { margin: 0; text-align: center; font-size: var(--fs-12); color: var(--c-gray); }
.signup-plans { display: flex; flex-direction: column; gap: var(--sp-10); }
.signup-fields { display: flex; flex-direction: column; gap: var(--sp-24); }   /* respiro ~24px (legado ~23) */
.signup-submit { max-width: var(--auth-card-w); margin: var(--sp-18) auto 0; }   /* wrapper estreito centrado (max ~440); o botão .btn--block preenche — 0 regra tocando .btn */

/* plan-card: o radio fica escondido; o .plan-card__inner e o cartao clicavel (label) */
.plan-card { position: relative; display: block; cursor: pointer; }
.plan-card__input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card__inner {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
  min-height: var(--plan-card-h);   /* 124px — Bronze/Prata/Ouro todos iguais (legado) */
  padding: var(--sp-12);
  background: var(--c-white);
  border: var(--bw-thin) var(--bs-solid) var(--c-gray);
  border-radius: var(--r-container);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-base),
              background var(--dur-fast) var(--ease-base),
              box-shadow var(--dur-fast) var(--ease-base);
}
.plan-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.plan-card__name { font-weight: var(--fw-bold); color: var(--c-ink); }
.plan-card__soon { font-weight: var(--fw-regular); font-size: var(--fs-12); color: var(--c-gray); }
.plan-card__check {
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--sp-20); height: var(--sp-20);
  border-radius: var(--r-circle);
  border: var(--bw-thin) var(--bs-solid) var(--c-gray);
  color: var(--c-gray); font-size: var(--fs-12);
}
.plan-card__price { font-size: var(--fs-16); font-weight: var(--fw-extrabold); color: var(--c-ink); }
.plan-card__price-muted { font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--c-gray); }
.plan-card__feats { margin: 0; padding-left: var(--sp-18); font-size: var(--fs-12); color: var(--c-gray); }

/* selecionado (Bronze) — verde */
.plan-card__input:checked + .plan-card__inner {
  border-color: var(--c-cta);
  background: color-mix(in srgb, var(--c-cta) 6%, var(--c-white));
  box-shadow: 0 0 0 var(--bw-thin) var(--c-cta), var(--shadow-md);
}
.plan-card__input:checked + .plan-card__inner .plan-card__check {
  border-color: var(--c-cta);
  color: var(--c-cta);
  background: color-mix(in srgb, var(--c-cta) 10%, var(--c-white));   /* S4/A7: familia CTA do auth, nao estado */
}
.plan-card__input:focus-visible + .plan-card__inner {
  outline: var(--ring-w) var(--bs-solid) var(--ring-color);
  outline-offset: var(--ring-offset);
}

/* disabled (Prata/Ouro — em breve): nao selecionavel */
.plan-card--disabled { cursor: not-allowed; }
.plan-card--disabled .plan-card__inner {
  opacity: var(--op-disabled);
  background: var(--c-surface-sunken);   /* S4/A17: token de borda nao e superficie */
  box-shadow: none;
}

/* responsivo: <=860px empilha (planos em cima, form embaixo) e o card volta a
   largura estreita; <=640px o card e fullscreen (640 vem depois -> vence).
   @media nao aceita var(); 860px = breakpoint do empilhamento (legado). */
@media (max-width: 860px) {
  .signup-grid { grid-template-columns: 1fr; }
  .auth__card:has(.signup-grid) { max-width: var(--auth-card-w); }
}
@media (max-width: 640px) {
  .auth__card:has(.signup-grid) { max-width: 100%; }
  .auth__card:has(.privacy-doc) { max-width: 100%; }
}