/* Tela Entrar.
 *
 * Uma tela de uma coisa só: o botão de conta Google. Sem campo, sem senha,
 * sem link de cadastro — quem cadastra é o pai.
 *
 * Sem @media de largura: o cartão ocupa a largura disponível até um teto de
 * 420px — mais que isso e uma tela de um botão só vira uma faixa esticada. A
 * centralização vertical usa `place-items` com `min-height`, que degrada para
 * o topo quando o conteúdo cresce (zoom de 200%) em vez de cortar. */

.entrar {
  display: grid;
  place-items: center;
  min-height: 100svh;
  gap: var(--esp-5);
  align-content: center;
  /* `safe` para o caso do zoom de 200%: quando o cartão fica mais alto que a
   * janela, a centralização vertical empurraria o topo para fora do alcance da
   * rolagem. Com `safe` o conteúdo encosta no início e nada se perde. Navegador
   * que não entende a palavra ignora esta linha e fica com a de cima. */
  align-content: safe center;
}

/* A borda e a sombra vêm da classe `elevacao-repouso` do base.css, aplicada no
 * HTML: o nível de elevação é definido num lugar só. */
.entrar-cartao {
  width: min(420px, 100%);
  display: grid;
  gap: var(--esp-5);
  padding: clamp(var(--esp-5), 5vw, var(--esp-7));
  background: var(--painel);
  border-radius: var(--raio-lg);
  text-align: center;
}

.entrar-marca {
  display: grid;
  gap: var(--esp-2);
  justify-items: center;
}

/* Marca do produto: a inicial em --realce sobre --realce-suave (6,04:1 no
 * claro, 5,46:1 no escuro). Não é emoji de propósito — os 24 emojis do DESIGN
 * são o alfabeto fechado dos ÍCONES DE TAREFA, e reusar um deles aqui faria o
 * mesmo glifo significar duas coisas no mesmo sistema. */
.entrar-simbolo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--raio-xl);
  background: var(--realce-suave);
  color: var(--realce);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.entrar-nome {
  color: var(--texto);
}

.entrar-convite {
  color: var(--suave);
}

/* Botão de conta Google. Primário do sistema: --realce com branco, raio sm,
 * 44px de altura mínima. */
.botao-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--esp-3) var(--esp-4);
  background: var(--realce);
  /* --sobre-realce, e não branco fixo: no escuro o --realce clareia e o branco
   * cairia para 2,77:1. O token acompanha o tema (7,06:1 claro, 6,23:1 escuro). */
  color: var(--sobre-realce);
  border: 1px solid var(--realce);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

/* Hover e foco compartilham o mesmo tratamento: nenhuma afordância existe só
 * no hover. A borda e o rótulo já dizem que é um botão sem ele. */
.botao-google:hover,
.botao-google:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.08);
}

.botao-google:active {
  filter: brightness(0.94);
}

/* O logo é multicolor e não sobrevive sobre o índigo: fica numa pastilha
 * branca, que é também como o Google pede que ele seja apresentado. */
.marca-google {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--raio-sm);
  background: #FFFFFF;
}

.marca-google svg {
  width: 18px;
  height: 18px;
}

/* A regra de `[hidden]` **saiu daqui** e mora em `base.css`, a partir da 1.5: a
 * tela de contas precisa dela igual, e duas cópias da mesma regra são duas
 * regras que um dia divergem. O que ela faz, e por que precisa do `!important`,
 * está escrito lá. */

/* Botão fallback desabilitado — o estado em que ele nasce e o único em que ele
 * fica visível quando não há client id. Sem realce, porque não há ação: o
 * índigo prometeria um clique que não acontece. O par --suave sobre
 * --painel-fundo mede 5,04:1 no claro e 7,38:1 no escuro. */
.botao-google:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  /* Nada de `cursor: not-allowed`: o cursor de proibido lê como "você errou",
   * e quem chega aqui não errou nada — falta configuração do servidor. */
  cursor: default;
}

/* O hover não pode insinuar que o botão desabilitado responde. As duas
 * propriedades são neutralizadas explicitamente porque a regra de hover acima
 * casa com o elemento desabilitado do mesmo jeito. */
.botao-google:disabled:hover,
.botao-google:disabled:focus-visible {
  box-shadow: none;
  filter: none;
}

/* Onde o Google desenha o botão dele. O conteúdo é um iframe deles: aqui não se
 * estiliza nada por dentro.
 *
 * O `min-height` **não** reserva lugar antes de o script responder, ao contrário
 * do que este comentário afirmava até a revisão de 2026-08-12: o elemento nasce
 * `hidden`, e a regra de `[hidden]` lá em cima o tira do fluxo com
 * `display: none`. Enquanto ele está escondido não ocupa altura nenhuma, e o
 * `min-height` só passa a valer no instante em que `entrar.js` faz
 * `caixaGoogle.hidden = false` — que é exatamente o instante do pulo.
 *
 * O que o `min-height` de fato faz é garantir que o contêiner não colapse depois
 * de visível, se o iframe demorar a pintar ou vier menor. É útil, e é outra
 * coisa. Reservar o lugar de verdade exigiria manter o elemento no fluxo com
 * `visibility: hidden` em vez de `hidden`, o que trocaria o pulo por um espaço
 * vazio permanente quando o botão nunca aparece — e o cartão tem o fallback
 * ocupando esse lugar justamente nesse caso. */
.entrar-caixa-google {
  display: grid;
  justify-items: center;
  min-height: 44px;
}

/* Painel provisório de dentro (história 1.4). Ocupa o lugar do bloco de acesso
 * dentro do mesmo cartão — não é o shell autenticado, que é do Épico 2. */
.entrar-dentro {
  display: grid;
  gap: var(--esp-4);
  justify-items: center;
}

.entrar-dentro-linha {
  color: var(--texto);
}

/* As duas portas do painel de dentro: o hub de cadastros, visível só para o pai,
 * e Meu dia, visível só para o aluno. É a ação principal do painel — o Sair é
 * secundário —, então ela leva o preenchido de --realce e o Sair fica no
 * contorno.
 *
 * Era `.botao-contas` até a 2.1, com um segundo tratamento ao lado para o link
 * de parâmetros. A 2.2 juntou os dois caminhos num hub, e o painel voltou a ter
 * dois botões — que é o que o comentário do `index.html` prometia ao Épico 2. A
 * 2.3 acrescentou a porta do aluno, e ela entra **nesta mesma regra** em vez de
 * ganhar uma cópia: as duas são a mesma coisa em papéis diferentes — a ação
 * principal do painel para quem está olhando —, e nunca aparecem juntas na tela,
 * então não há hierarquia a distinguir entre elas. Uma segunda regra idêntica
 * seria a cópia que diverge na primeira mudança, que é a razão pela qual o
 * `[hidden]` de `base.css` mora onde mora.
 *
 * `inline-flex` com `min-height`: um `a` não recebe os 44px da regra de
 * `button` de `base.css`, e alvo de clique tem piso de 44px seja qual for a
 * marcação. */
.botao-cadastros,
.botao-meu-dia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--esp-3) var(--esp-5);
  background: var(--realce);
  /* --sobre-realce, e não branco fixo: no escuro o --realce clareia e o branco
   * cairia para 2,77:1. */
  color: var(--sobre-realce);
  border: 1px solid var(--realce);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

.botao-cadastros:hover,
.botao-cadastros:focus-visible,
.botao-meu-dia:hover,
.botao-meu-dia:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.08);
  text-decoration: underline;
}

/* O tratamento secundário do painel de dentro: contorno, e não o preenchido de
 * --realce, que fica reservado para a ação principal de cada tela. Nunca há mais
 * de uma ação preenchida **na tela**: as duas classes que a levam são as portas
 * de papel — Cadastros para o pai, Meu dia para o aluno —, e `entrar.js` esconde
 * sempre uma delas. Dois botões índigo lado a lado seriam duas ações principais,
 * isto é, nenhuma, e é essa a regra que a folha guarda.
 *
 * A 2.1 pôs o link de parâmetros nesta mesma lista para não copiar a regra; a
 * 2.2 desfez o link ao criar o hub; a 2.3 acrescentou a porta do aluno, que
 * entrou na regra do preenchido e não nesta. O que não mudou em nenhuma das três
 * é o que este bloco existe para dizer: o Sair é o secundário deste painel. */
.botao-sair {
  min-height: 44px;
  padding: var(--esp-3) var(--esp-5);
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

/* Hover e foco compartilham o tratamento: nenhuma afordância existe só no hover. */
.botao-sair:hover,
.botao-sair:focus-visible {
  box-shadow: var(--elevacao-interativo);
  border-color: var(--realce);
}

/* Bloco de acesso: o contêiner do botão do Google e o fallback empilhados. */
.entrar-acesso {
  display: grid;
  gap: var(--esp-3);
}

/* Região dos recados de conta. Fica vazia até as histórias 1.4 e 1.6
 * escreverem nela. Vazia, ela some visualmente mas CONTINUA renderizada: uma
 * região viva que nasce com `display: none` não é observada pelo leitor de
 * tela, e o recado que aparecesse depois passaria em silêncio. */
.entrar-recado:empty {
  padding: 0;
  background: none;
}

.entrar-recado {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-sm);
  background: var(--painel-fundo);
  color: var(--texto);
  text-align: start;
}