/* Tela de entrada (usuário + PIN), usada na copa e em Usuários. */
.entrada {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
}
.entrada-logo { width: min(320px, 70vw); margin-bottom: 16px; }
.entrada h1 { margin: 0; font-size: 1.8rem; }
.entrada p { margin: 0; max-width: 34ch; color: var(--chumbo-suave); }
.entrada-usuarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  width: min(640px, 100%);
  margin-top: 16px;
}
.entrada-usuario { font-size: 1.3rem; min-height: 84px; border-radius: var(--raio); }

.pin-pontos { display: flex; gap: 14px; margin: 18px 0 8px; min-height: 22px; }
.pin-pontos span { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--chumbo); }
.pin-pontos span.cheio { background: var(--vermelho); box-shadow: none; }

.pin-teclado {
  display: grid;
  grid-template-columns: repeat(3, 92px);
  gap: 12px;
}
.tecla {
  height: 76px;
  border: 0;
  border-radius: var(--raio);
  background: var(--branco);
  font-size: 2rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--bege-fundo);
}
.tecla:active { background: var(--bege-fundo); }
.tecla-texto { font-size: 1rem; }
.tecla-entrar { background: var(--vermelho); color: var(--bege); font-size: 1rem; box-shadow: none; }
.tecla-entrar:active { background: var(--vermelho-escuro); }

/* Entrada por e-mail, senha e código (app de gestão na internet). */
.entrada-formulario { display: grid; gap: 14px; width: min(360px, 100%); margin-top: 8px; text-align: left; }
.entrada-rotulo { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.entrada-campo {
  width: 100%;
  min-height: 52px;
  border: 2px solid var(--chumbo);
  border-radius: 14px;
  padding: 0 14px;
  font-size: 1.05rem;
  background: var(--branco);
}
.entrada-campo[name="codigo"] { font-size: 1.4rem; font-weight: 700; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.entrada-enviar { width: 100%; margin-top: 4px; }
.entrada-campo[name="codigo"]::placeholder { letter-spacing: normal; font-weight: 400; font-size: 1rem; }
.entrada-formulario .erro { text-align: center; color: var(--vermelho-escuro); }