/* A tela de escolha de acesso: os cinco cartões e o fundo.

   Carregada depois de tokens.css e base.css, e só por esta tela. O que
   vale para mais de um painel não entra aqui: vai para o base.css, que
   é o lugar onde as telas se parecem. */

body { display: grid; place-items: center; padding: 48px 24px; }
.caixa { width: 100%; max-width: 940px; }

.cabecalho { text-align: center; margin-bottom: 40px; }
.cabecalho .marca-icone { width: 54px; height: 54px; margin: 0 auto 16px; }
.cabecalho .marca-icone svg { width: 28px; height: 28px; }
.cabecalho h1 { font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.cabecalho h1 span { color: var(--roxo); }
.cabecalho p { color: var(--cinza); margin-top: 6px; font-size: 14px; }

.titulo-grupo {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinza-fraco); margin: 0 2px 14px;
}
.titulo-grupo::after { content: ""; flex: 1; height: 1px; background: var(--borda-forte); }

.grupo + .grupo { margin-top: 34px; }

.acessos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.acesso {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 18px;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.acesso::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor); }
.acesso:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cor) 40%, var(--borda)); box-shadow: var(--sombra-alta, 0 12px 32px -14px rgb(30 27 46 / .22)); }

.acesso-icone {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cor) 12%, transparent);
  color: var(--cor);
}
.acesso-icone svg { width: 20px; height: 20px; }

.acesso b { font-size: 15px; font-weight: 600; display: block; }
.acesso .papel { font-size: 12px; color: var(--cinza); margin-top: 2px; display: block; }
.acesso .desc { font-size: 12px; color: var(--cinza-fraco); line-height: 1.55; margin-top: 8px; }

.acesso .entrar {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--cor);
}
.acesso .entrar svg { width: 14px; height: 14px; }

.nota { text-align: center; font-size: 12px; color: var(--cinza-fraco); margin-top: 34px; }

/* A entrada por e-mail e senha. Fica antes dos cartões porque é o caminho que
   vai sobrar quando houver servidor — os cartões é que são o provisório. */
.entrada { display: grid; gap: 12px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; }
.entrada .linha-campo { display: grid; gap: 5px; }
.entrada .linha-campo > span { font-size: 12.5px; font-weight: 500; color: var(--tinta); }
.entrada input {
  width: 100%; font: inherit; font-size: 14px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 10px; padding: 10px 12px;
}
.entrada input:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }

/* O aviso sobre a senha do e-mail não é rodapé: é a informação mais importante
   da tela para quem vai digitar, e por isso tem cor e borda. */
.aviso-senha {
  font-size: 12px; line-height: 1.55; color: var(--tinta);
  background: color-mix(in srgb, #B45309 8%, transparent);
  border-left: 3px solid #B45309; border-radius: 8px; padding: 10px 12px;
}
.aviso-senha b { display: block; margin-bottom: 2px; }

/* A tela de entrar: o formulário e o que ele diz quando não dá para entrar. */
.cartao-entrada {
  display: grid; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); padding: 18px 20px;
}
.cartao-entrada b { font-size: 15px; font-weight: 600; }
.cartao-entrada .linha-campo { display: grid; gap: 6px; }
.cartao-entrada .linha-campo span { font-size: 12.5px; color: var(--cinza); }
.cartao-entrada input {
  font: inherit; font-size: 14px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 11px 13px; width: 100%;
}
.cartao-entrada input:focus { outline: 2px solid var(--roxo); outline-offset: -1px; border-color: var(--roxo); }
.cartao-entrada .comando {
  font: inherit; font-size: 12.5px; line-height: 1.7; white-space: pre;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 9px;
  padding: 11px 13px; margin: 0; overflow-x: auto;
}
.cartao-entrada.entrou { border-color: color-mix(in srgb, #16A34A 45%, var(--borda)); }
.acoes-entrada { display: flex; gap: 9px; flex-wrap: wrap; }
.acoes-entrada .btn-primario { text-decoration: none; display: inline-flex; align-items: center; }

/* O cartão virou botão: ele não abre o painel, preenche o e-mail. */
button.acesso { width: 100%; text-align: left; font: inherit; cursor: pointer; }

/* O cartão de perfil, no segundo passo: quem você escolheu ser. */
.quem-entra {
  display: flex; align-items: center; gap: 12px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px 13px;
}
.quem-entra b { font-size: 14px; font-weight: 600; display: block; }
.quem-entra .desc { font-size: 12px; color: var(--cinza); line-height: 1.45; margin-top: 2px; }
.cartao-entrada.aviso { background: var(--fundo); border-style: dashed; }

/* Na versão em JavaScript o cartão de acesso era um <button>, porque ele não
   navegava: preenchia o e-mail na mesma tela. Aqui ele leva para a página de
   entrar daquele perfil, e link que navega é <a> — inclusive para abrir em
   outra aba, que com botão não dá. */
a.acesso { text-decoration: none; color: inherit; }

/* "Escolher outro acesso": no sistema pronto é um <button>, que no grid do
   cartão ocupa a linha inteira com o texto no meio e sem sublinhado. Aqui é
   um link, porque volta para outra página — então ele imita o botão. */
.cartao-entrada > a.link-discreto { display: block; text-align: center; text-decoration: none; }
.cartao-entrada > a.link-discreto:hover { text-decoration: underline; }

/* ---------- A porta de entrada da assinatura ---------- */

/* Os três perfis que a porta vende. Rádio e não <select>: são três, cabem na
   tela, e escolher num toque vale mais que a lista fechada — esta tela é o
   último passo antes de a pessoa pagar. */
.escolha-perfil { border: 0; padding: 0; margin: 0; display: grid; gap: 7px; }
.escolha-perfil legend { font-size: 12.5px; color: var(--cinza); padding: 0; margin-bottom: 2px; }
.opcao-perfil {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 10px; padding: 10px 12px;
}
.opcao-perfil:has(input:checked) {
  border-color: var(--roxo);
  background: color-mix(in srgb, var(--roxo) 6%, transparent);
}
.opcao-perfil:has(input:focus-visible) { outline: 2px solid var(--roxo); outline-offset: 1px; }
.opcao-perfil input { width: auto; accent-color: var(--roxo); margin: 0; }
.opcao-perfil > span { display: flex; align-items: baseline; gap: 8px; flex: 1; }
.opcao-perfil b { font-size: 14px; font-weight: 600; }
.opcao-perfil i { font-style: normal; font-size: 12.5px; color: var(--cinza); margin-left: auto; }

/* O aceite. A caixa não estica junto com o texto de três linhas ao lado, e o
   alinhamento é pelo topo — com `center` a marca fica no meio do parágrafo. */
.linha-aceite { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.linha-aceite input { width: auto; margin: 2px 0 0; accent-color: var(--roxo); flex-shrink: 0; }
.linha-aceite span { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.linha-aceite b { font-size: inherit; color: var(--tinta); }

/* A tela de status: os quatro blocos ocupam o mesmo lugar, e só um aparece. */
.cartao-entrada .desc { font-size: 12.5px; color: var(--cinza); line-height: 1.55; margin-top: 6px; }
.cartao-entrada [hidden] { display: none; }