/* Telas de entrada (login e primeiro acesso). Usa os mesmos tokens e componentes do app. */

body.entrada-pagina {
  display: grid;
  place-items: center;
  padding: calc(var(--e-6) + var(--seguro-topo)) calc(var(--e-4) + var(--seguro-dir)) calc(var(--e-6) + var(--seguro-baixo)) calc(var(--e-4) + var(--seguro-esq));
  background: var(--c-fundo);
}

.entrada-cena {
  position: relative;
  width: min(100%, 440px);
}
.entrada-cena__enfeite {
  position: absolute;
  pointer-events: none;
  opacity: 0.9;
}
.entrada-cena__enfeite--esq {
  left: -136px;
  bottom: 24px;
  width: 110px;
  height: 150px;
}
.entrada-cena__enfeite--dir {
  right: -128px;
  top: 76px;
  width: 100px;
  height: 120px;
}
@media (max-width: 760px) {
  .entrada-cena__enfeite {
    display: none;
  }
}

.entrada-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.entrada-marca .ilustracao {
  width: 44px;
  height: 44px;
}
.entrada-marca__nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-34);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.entrada-cartao {
  position: relative;
}
.entrada-cartao .painel__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding: var(--e-6);
}
.entrada-cartao__intro {
  color: var(--c-texto-suave);
}
.entrada-ilus {
  display: flex;
  justify-content: center;
}
.entrada-ilus .ilustracao {
  width: 112px;
  height: 100px;
}
.entrada-rodape {
  display: flex;
  justify-content: center;
}

/* Código de 6 dígitos */
.entrada--codigo {
  font-size: var(--t-24);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.entrada--codigo::placeholder {
  letter-spacing: 0.4em;
}

/* Medidor de senha (texto sempre presente, cor nunca é a única informação) */
.medidor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.medidor__barras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.medidor__barras span {
  height: 6px;
  border-radius: var(--r-pilula);
  background: var(--c-linha);
}
.medidor[data-nivel="1"] .medidor__barras span:nth-child(-n + 1),
.medidor[data-nivel="2"] .medidor__barras span:nth-child(-n + 2),
.medidor[data-nivel="3"] .medidor__barras span:nth-child(-n + 3),
.medidor[data-nivel="4"] .medidor__barras span:nth-child(-n + 4) {
  background: var(--c-marca);
}
.medidor[data-nivel="1"] .medidor__barras span:nth-child(-n + 1) {
  background: var(--c-destaque);
}
.medidor__texto {
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--c-texto);
}

/* QR e códigos de recuperação */
.qr {
  display: grid;
  place-items: center;
  padding: var(--e-4);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-md);
  background: #ffffff; /* o QR precisa de fundo claro para ser lido, também no tema escuro */
}
.qr img {
  width: 208px;
  height: 208px;
}
.segredo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  font-size: var(--t-14);
}
.segredo code,
.codigos code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-15);
  font-weight: 600;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.codigos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  padding: var(--e-4);
  margin: 0;
  list-style: none;
  background: var(--c-faixa);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-md);
}
.codigos li {
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-sm);
  background: var(--c-painel);
  text-align: center;
}
.aviso-guardar {
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--c-destaque-suave-borda);
  border-radius: var(--r-md);
  background: var(--c-destaque-suave);
  font-weight: 600;
}
.passo {
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--c-texto-suave);
}