/* Tokens compartilhados com o painel. Fonte única: se uma cor mudar, muda
   lá, e as duas aplicações acompanham. */
@import '../../compartilhado/tokens.css';

/* Reset mínimo, igual ao dos mockups. Nada além disto: componente é da
   sessão 3, não desta. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
}

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   PORTA — login, cadastro e onboarding.
   Único CSS de tela que existe hoje. A área de verdade vem na sessão 3,
   portada do mockup aprovado.
   --------------------------------------------------------------------- */
.porta {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad-mob);
}

.cartao {
  width: 100%;
  max-width: 420px;
  background: var(--elev);
  border: 1px solid var(--bd);
  border-radius: var(--r-gg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.cartao h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.cartao h1 span { color: var(--acc); }

.cartao h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.cartao h2 em { font-style: italic; color: var(--acc); }

.rotulo {
  font-family: var(--mono);
  font-size: var(--rotulo-tam);
  letter-spacing: var(--rotulo-track);
  text-transform: uppercase;
  color: var(--dim);
}

.ajuda {
  color: var(--mid);
  font-size: var(--txt);
  line-height: 1.55;
}

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span {
  font-family: var(--mono);
  font-size: var(--rotulo-tam);
  letter-spacing: var(--rotulo-track);
  text-transform: uppercase;
  color: var(--dim);
}
.campo small { color: var(--dim); font-size: 12px; }

.campo input,
.campo select {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-p);
  padding: 12px 14px;
  color: var(--ink);
  font: inherit;
  font-size: var(--txt);
  width: 100%;
}
.campo input:focus,
.campo select:focus { outline: none; border-color: var(--bd2); }

.dupla { display: flex; gap: 8px; }
.dupla select { flex: none; width: 110px; }
.dupla input { flex: 1; min-width: 0; }

/* A bandeira do lado do WhatsApp. Tem a altura e o traje do campo, mas NÃO
   é um campo: desde 16/09/2026 o cadastro é só Brasil, e um seletor com uma
   opção só é um convite a procurar a segunda. Por isso não recebe foco e
   não entra na ordem de tabulação. */
.dupla .bandeira {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--elev);
  color: var(--mid);
  font-size: var(--txt-p);
  white-space: nowrap;
}

.marca {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--mid);
  font-size: var(--txt-p);
  line-height: 1.5;
}
.marca input { margin-top: 2px; flex: none; accent-color: var(--acc); }
.marca a { color: var(--acc); border-bottom: 1px solid rgba(217, 255, 63, 0.3); }

.btn {
  padding: 13px 24px;
  border-radius: var(--r-tudo);
  font-weight: 600;
  font-size: var(--txt-p);
  text-align: center;
  transition: background 0.2s, opacity 0.2s;
}
.btn.pri { background: var(--acc); color: #000; }
.btn.pri:hover:not(:disabled) { background: #c8ed35; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Entrar com o Google.
   Branco com texto escuro, e não uma variação nossa em cima do fundo
   preto: a marca do Google tem regra de uso, e botão "no estilo do site"
   é o que ela proíbe. A hierarquia — este é o caminho secundário — fica
   por conta da posição e do separador, não da cor. */
.btn.google {
  background: #fff;
  color: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn.google:hover:not(:disabled) { background: #eaeaea; }
.btn.google svg { width: 18px; height: 18px; flex: none; }

/* O "ou" entre os dois caminhos, com um fio de cada lado. */
.ou {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ou::before,
.ou::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

.linhas {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.elo {
  color: var(--mid);
  font-size: var(--txt-p);
  border-bottom: 1px solid transparent;
}
.elo:hover:not(:disabled) { color: var(--ink); border-bottom-color: var(--bd2); }
.elo:disabled { opacity: 0.5; cursor: not-allowed; }

.erro {
  color: var(--hot);
  font-size: var(--txt-p);
  line-height: 1.5;
}

/* Só aparece em modo simulado, enquanto o app da Meta não existe. */
.aviso {
  background: rgba(255, 169, 61, 0.08);
  border-left: 2px solid var(--warm);
  border-radius: 0 var(--r-p) var(--r-p) 0;
  padding: 12px 14px;
  color: var(--mid);
  font-size: var(--txt-p);
  line-height: 1.6;
}
.aviso b { color: var(--warm); }
.aviso code {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.12em;
}

/* Identidade compartilhada: apresentação, sem regras de acesso. */
[data-categoria="gratis"] { --categoria-cor: var(--categoria-gratis) }
[data-categoria="aluno"] { --categoria-cor: var(--categoria-aluno) }
[data-categoria="mentorado"] { --categoria-cor: var(--categoria-mentorado) }
[data-categoria="clubista"] { --categoria-cor: var(--club-a) }
.categoria-selo[data-categoria], .categoria-texto[data-categoria] { color: var(--categoria-cor) }
.categoria-selo[data-categoria="clubista"] {
  background: var(--categoria-club); background-clip: text;
  -webkit-background-clip: text; color: transparent;
  border: 0; border-radius: 0; padding: 0;
  display: inline-block; width: fit-content;
}

.progresso-botao { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; margin-right:8px; animation:inicio-girar .8s linear infinite; }

fieldset[disabled] .btn.pri::before { content: ""; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; margin-right: 8px; animation: inicio-girar .8s linear infinite; }

.acesso-indisponivel .tx { min-width: 0; width: 100%; }
.acesso-indisponivel .email-sessao { overflow-wrap: anywhere; }
.acoes-acesso { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.acoes-acesso .btn { white-space: normal; text-align: center; }
@media (max-width: 600px) { .acoes-acesso { flex-direction: column; } .acoes-acesso .btn { width: 100%; } }