/* Telas de entrada: /entrar e /entrar/codigo (templates/acesso/).

   Duas metades. À esquerda, o palco escuro (mesmo no tema claro, como a faixa "Tudo conta" da
   LP), com o painel eletrônico do plenário; à direita, o cartão com o que fazer.
   No tablet e no celular, o palco vira uma faixa curta em cima e o cartão ganha a tela. */

.corpo-acesso .topo {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* No computador, a marca do topo fica sobre o palco escuro: nome em off-white. */
@media (min-width: 901px) {
  .corpo-acesso .topo .marca__nome {
    color: var(--cor-inverso-texto);
  }
}

.conteudo--acesso {
  display: flex;
}

.acesso {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ================================================================ palco */
.acesso__palco {
  /* O hemiciclo usa as cores do tema; aqui, as do fundo invertido. */
  --cor-texto: var(--cor-inverso-texto);
  --cor-voto-ausente: rgb(255 255 255 / 0.12);
  --cor-borda-forte: rgb(255 255 255 / 0.2);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-5);
  padding: calc(var(--altura-topo) + var(--espaco-7)) clamp(var(--espaco-5), 4vw, var(--espaco-8)) var(--espaco-6);
  overflow: hidden;
  color: var(--cor-inverso-texto);
  background: var(--cor-inverso-fundo);
}

/* Papel milimetrado claro sobre o escuro, com o brilho verde que "respira" atrás do plenário. */
.acesso__grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 78%, color-mix(in srgb, var(--cor-inverso-marca) 20%, transparent), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  background-position: center, -1px -1px, -1px -1px;
  animation: acesso-respirar 9s var(--curva-padrao) infinite alternate;
}

@keyframes acesso-respirar {
  to {
    background-position: center 12px, -1px -1px, -1px -1px;
    opacity: 0.82;
  }
}

.acesso__rodape-do-palco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
}

.acesso__chamada {
  display: grid;
  gap: var(--espaco-4);
  max-width: 560px;
}

.acesso__lema {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(2.25rem, 1rem + 3.6vw, 4.25rem);
  font-weight: 720;
  line-height: 1;
  letter-spacing: var(--tracado-titulo);
  color: var(--cor-inverso-texto);
}

.acesso__lema em {
  font-style: normal;
  color: var(--cor-inverso-marca);
}

.acesso__sublema {
  margin: 0;
  max-width: 420px;
  font-size: var(--texto-lg);
  color: var(--cor-inverso-suave);
}

/* O painel eletrônico: o hemiciclo e o placar da votação ao lado. */
.acesso__painel {
  display: grid;
  gap: var(--espaco-4);
  padding: var(--espaco-5);
  background: color-mix(in srgb, var(--cor-inverso-superficie) 80%, transparent);
  border: 1px solid var(--cor-inverso-borda);
  border-radius: var(--raio-4);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.acesso__hemiciclo {
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
}

.acesso__placar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-4);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cor-inverso-borda);
}

.acesso__proposicao {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
}

.acesso__proposicao .mono {
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  color: var(--cor-inverso-marca);
}

.acesso__ementa {
  font-weight: 600;
  color: var(--cor-inverso-texto);
  transition: opacity var(--duracao-3);
}

.acesso__votos {
  display: flex;
  gap: var(--espaco-5);
  margin: 0;
}

.acesso__voto {
  display: grid;
  gap: 2px;
  text-align: right;
}

.acesso__voto dt {
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  letter-spacing: var(--tracado-rotulo);
  text-transform: uppercase;
  color: var(--cor-inverso-suave);
}

.acesso__voto dd {
  margin: 0;
  font-size: var(--texto-xl);
  font-weight: 600;
}

.acesso__voto--sim dd { color: var(--cor-inverso-sim); }
.acesso__voto--nao dd { color: var(--cor-inverso-nao); }
.acesso__voto--abstencao dd { color: var(--cor-inverso-alerta); }

.acesso__rodape-do-palco {
  font-size: var(--texto-xs);
  color: var(--cor-inverso-suave);
}

.acesso__rodape-do-palco .mono {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
}

.acesso__rodape-do-palco b {
  font-weight: 600;
  color: var(--cor-inverso-texto);
}

.acesso__rodape-do-palco .contagem {
  --contagem-cor: var(--cor-inverso-texto);
  --contagem-rotulo: var(--cor-inverso-suave);
}

.acesso__rodape-do-palco > .mono {
  white-space: nowrap;
}

/* A data do lançamento em destaque no cartão da lista de espera. */
.acesso__lancamento {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-ouro-suave);
  border: 1px solid color-mix(in srgb, var(--cor-ouro) 30%, transparent);
  border-radius: var(--raio-3);
}

.acesso__lancamento > .icone {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--cor-ouro);
}

.acesso__lancamento div {
  display: grid;
  gap: 2px;
}

.acesso__lancamento b {
  font-size: var(--texto-sm);
  font-weight: 620;
}

.acesso__lancamento .contagem {
  --contagem-cor: var(--cor-texto);
  font-weight: 600;
}

.acesso__lancamento small {
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

/* Quem chegou pelo link de indicação vê de quem é (docs/15, "Indicação de amigos"). */
.acesso__indicacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
  background: var(--cor-marca-suave);
  border: 1px solid color-mix(in srgb, var(--cor-marca) 25%, transparent);
  border-radius: var(--raio-3);
}

.acesso__indicacao > .icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cor-marca);
}

.acesso__indicacao b {
  color: var(--cor-texto);
  font-weight: 620;
}

/* No formulário, a indicação é uma caixa de marcar dentro do mesmo quadro: quem desmarca entra sem ela. */
.acesso__indicacao--escolha {
  display: block;
  padding: var(--espaco-3);
}

/* ================================================================ cartão */
.acesso__lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-5);
  padding: calc(var(--altura-topo) + var(--espaco-6)) var(--margem-lateral) var(--espaco-7);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--cor-marca-suave), transparent 70%),
    var(--cor-fundo);
}

.acesso__cartao {
  display: grid;
  gap: var(--espaco-4);
  width: 100%;
  max-width: 420px;
}

.acesso__rotulo {
  color: var(--cor-marca);
}

.acesso__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--titulo-sm);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracado-titulo);
}

.acesso__texto {
  margin: 0 0 var(--espaco-2);
  color: var(--cor-texto-secundario);
}

.acesso__texto b {
  font-weight: 500;
  color: var(--cor-texto);
}

.acesso__voltar {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  margin-bottom: var(--espaco-2);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--cor-texto-secundario);
  text-decoration: none;
}

.acesso__voltar:hover {
  color: var(--cor-texto);
}

.acesso__voltar .icone {
  width: 16px;
  height: 16px;
}

.acesso__alerta {
  display: flex;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  font-size: var(--texto-sm);
  color: var(--cor-texto-secundario);
  background: var(--cor-info-suave);
  border: 1px solid color-mix(in srgb, var(--cor-info) 30%, transparent);
  border-radius: var(--raio-3);
  animation: surgir-de-baixo var(--duracao-4) var(--curva-saida);
}

.acesso__alerta > .icone {
  flex: none;
  color: var(--cor-info);
}

.acesso__alerta p {
  margin: 0;
}

.acesso__alerta--erro {
  background: var(--cor-erro-suave);
  border-color: color-mix(in srgb, var(--cor-erro) 30%, transparent);
}

.acesso__alerta--erro > .icone {
  color: var(--cor-erro);
}

.acesso__alerta--marca {
  background: var(--cor-marca-suave);
  border-color: color-mix(in srgb, var(--cor-marca) 30%, transparent);
}

.acesso__alerta--marca > .icone {
  color: var(--cor-marca);
}

.acesso__alerta a {
  font-weight: 600;
}

/* Os três passos do cadastro, numerados como protocolo. */
.acesso__passos {
  display: grid;
  gap: var(--espaco-3);
  margin: 0 0 var(--espaco-2);
  padding: 0;
  list-style: none;
}

.acesso__passos li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
}

.acesso__passos div {
  display: grid;
  gap: 2px;
}

.acesso__passos b {
  font-size: var(--texto-sm);
  font-weight: 620;
}

.acesso__passos small {
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.acesso__passo {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--cor-marca);
  background: var(--cor-marca-suave);
  border-radius: 50%;
}

/* A confirmação do responsável: só para quem tem 16 ou 17 anos (acesso.js esconde para os outros). */
.acesso__responsavel {
  animation: surgir-de-baixo var(--duracao-4) var(--curva-saida);
}

.acesso__responsavel[hidden] {
  display: none;
}

/* Como trocar o e-mail: uma linha menor, logo abaixo do e-mail. */
.acesso__troca-de-email {
  margin: calc(-1 * var(--espaco-3)) 0 var(--espaco-2);
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.acesso__alerta-titulo {
  font-weight: 600;
  color: var(--cor-texto);
}

.acesso__divisor {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-block: var(--espaco-2);
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  letter-spacing: var(--tracado-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.acesso__divisor::before,
.acesso__divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cor-borda);
}

.acesso__formulario {
  display: grid;
  gap: var(--espaco-4);
}

.acesso__nota,
.acesso__convite {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.acesso__nota--centro {
  text-align: center;
}

.acesso__convite {
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--cor-borda);
}

.acesso__convite a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.acesso__convite .icone {
  width: 15px;
  height: 15px;
}

.acesso__seguranca {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  max-width: 420px;
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.acesso__seguranca .icone {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--cor-marca);
}

/* O código: um campo só (acessível e colável), desenhado como seis casas de painel. */
/* O código de 6 dígitos, uma casa para cada. As casas e a borda ficam na caixa de fora (campo__controle),
   do tamanho exato de 6 casas; o campo de dentro é mais largo, sem borda nem fundo. O espaçamento entre
   as letras também entra depois do último dígito: num campo de 6 casas, o sexto empurraria o texto, e o
   navegador rolaria tudo para a esquerda. Com a sobra, nada rola, e a caixa corta o que passa dela: com
   "clip", e não "hidden", que o navegador ainda rola para mostrar o cursor depois do sexto dígito.
   Em "em" da caixa: cada dígito do IBM Plex Mono mede 0,6em, e cada casa, 1,9em. */
.acesso__codigo .campo__controle {
  --casa: 1.9em;

  width: calc(6 * var(--casa));
  max-width: 100%;
  overflow: clip;
  font-size: 1.75rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--casa) - 1px), var(--cor-borda) calc(var(--casa) - 1px) var(--casa)),
    var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-2);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.03);
  transition:
    border-color var(--duracao-2) var(--curva-padrao),
    box-shadow var(--duracao-2) var(--curva-padrao);
}

.acesso__codigo .campo__controle:hover {
  border-color: var(--cor-texto-suave);
}

.acesso__codigo .campo__controle:focus-within {
  border-color: var(--cor-marca);
  box-shadow: var(--anel-foco);
}

.acesso__codigo .campo--com-erro .campo__controle {
  border-color: var(--cor-erro);
}

.acesso__codigo .campo--com-erro .campo__controle:focus-within {
  box-shadow: 0 0 0 3px var(--cor-erro-suave);
}

.acesso__codigo .campo__entrada {
  flex: none;
  /* Uma casa a mais que a caixa: a sobra do espaçamento depois do sexto dígito. */
  width: calc(7 * var(--casa));
  max-width: none;
  height: 62px;
  padding: 0 0 0 calc((var(--casa) - 0.6em) / 2);
  font-family: var(--fonte-mono);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: calc(var(--casa) - 0.6em);
  font-variant-numeric: tabular-nums;
  caret-color: var(--cor-marca);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.acesso__codigo .campo__entrada:focus {
  box-shadow: none;
}

.acesso__codigo .campo__entrada::placeholder {
  color: var(--cor-borda-forte);
}

/* ================================================================ responsivo */
@media (max-width: 900px) {
  .corpo-acesso .topo {
    position: sticky;
    background: color-mix(in srgb, var(--cor-fundo) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }

  .acesso {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  /* O palco vira uma faixa: fica o lema e o painel, pequenos, embaixo do cartão. */
  .acesso__palco {
    order: 2;
    padding: var(--espaco-7) var(--margem-lateral);
  }

  .acesso__lado {
    padding-top: var(--espaco-7);
  }
}

@media (max-width: 600px) {
  .acesso__rodape-do-palco {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-2);
  }

  .acesso__votos {
    gap: var(--espaco-4);
  }

  .acesso__codigo .campo__controle {
    font-size: 1.5rem;
  }
}