/* Telas de acesso: entrar, cadastro e recuperação de senha.
   Usa as cores, fontes e botões de estilo.css. */

:root {
  --erro: #B3261E;
  --campo-borda: #8FA39C;
}

:root[data-tema="escuro"] {
  --erro: #FFB4A9;
  --campo-borda: #6F8A80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --erro: #FFB4A9;
    --campo-borda: #6F8A80;
  }
}

[hidden] {
  display: none !important;
}

.acesso {
  display: grid;
  min-height: 100dvh;
}

.acesso-coluna {
  display: flex;
  flex-direction: column;
  width: min(100%, 480px);
  margin-inline: auto;
  padding: 12px 20px 40px;
}

.acesso-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.acesso-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--texto-2);
}

.acesso-voltar:hover {
  color: var(--primaria);
}

.acesso-conteudo {
  margin-top: 32px;
}

.acesso-painel {
  display: none;
}

/* ── Etapas ────────────────────────────────────────────────────────────── */
.etapa:focus {
  outline: none;
}

.etapa h1 {
  font-size: 28px;
  line-height: 36px;
}

.etapa-apoio {
  margin-top: 8px;
  color: var(--texto-2);
}

.etapa-apoio strong {
  font-weight: 600;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.etapa-icone {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  fill: var(--primaria);
}

.etapa > .btn {
  margin-top: 28px;
}

/* ── Campos ────────────────────────────────────────────────────────────── */
.campo {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.campo label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.campo input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--campo-borda);
  border-radius: 10px;
  background: var(--cartao);
  color: var(--texto);
  font: 400 16px/24px var(--textos);
}

.campo input:focus-visible {
  border-color: var(--primaria);
  outline: 3px solid var(--primaria);
  outline-offset: 2px;
}

.campo input[aria-invalid="true"] {
  border-color: var(--erro);
}

.campo-ajuda {
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-2);
}

.campo-erro {
  display: flex;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--erro);
}

.campo-erro .ic {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* Código de confirmação: dígitos grandes e espaçados */
.campo input.campo-codigo {
  max-width: 220px;
  font: 600 24px/32px var(--titulos);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
}

.campo-senha {
  position: relative;
}

.campo-senha input {
  padding-right: 52px;
}

.ver-senha {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--texto-2);
  cursor: pointer;
}

.ver-senha:hover {
  color: var(--primaria);
}

.ver-senha .ic-ocultar,
.ver-senha[aria-pressed="true"] .ic-mostrar {
  display: none;
}

.ver-senha[aria-pressed="true"] .ic-ocultar {
  display: block;
}

/* ── Avisos e ações ────────────────────────────────────────────────────── */
.aviso {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--erro);
  border-radius: 10px;
  background: color-mix(in srgb, var(--erro) 8%, var(--cartao));
  font-size: 14px;
  line-height: 20px;
}

.aviso .ic {
  color: var(--erro);
}

.aviso.aviso-ok {
  border-color: var(--primaria);
  background: var(--apoio);
}

.aviso.aviso-ok .ic {
  color: var(--primaria);
}

.btn-largo {
  width: 100%;
  margin-top: 24px;
}

.btn[disabled] {
  opacity: .65;
  cursor: progress;
}

.etapa-links {
  margin-top: 16px;
}

.etapa-troca {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
}

.etapa a:not(.btn),
.link-botao {
  font-weight: 600;
  color: var(--primaria);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link-botao {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 16px/24px var(--textos);
  cursor: pointer;
}

.link-botao[disabled] {
  opacity: .6;
  cursor: progress;
}

/* ── Telas maiores: formulário à esquerda, foto de destino à direita ───── */
@media (min-width: 1024px) {
  .acesso {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .acesso-coluna {
    padding: 20px 32px 56px;
  }

  .acesso-conteudo {
    margin-block: auto;
    padding-block: 32px;
  }

  /* Painel de marca: petróleo nos dois temas, com os três passos acendendo em sequência */
  .acesso-painel {
    position: sticky;
    top: 0;
    display: grid;
    align-content: center;
    gap: 40px;
    height: 100dvh;
    padding: 64px clamp(40px, 6vw, 96px);
    background: #123C3A;
    color: #FFFFFF;
  }

  :root[data-tema="escuro"] .acesso-painel {
    background: #122825;
  }

  .acesso-painel-titulo {
    max-width: 12ch;
    font: 700 48px/56px var(--titulos);
    letter-spacing: -0.02em;
  }

  .acesso-passos {
    display: grid;
    max-width: 440px;
  }

  .acesso-passos li {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 20px;
    padding-bottom: 32px;
    color: #CFE3DA;
  }

  .acesso-passos li:last-child {
    padding-bottom: 0;
  }

  .acesso-passos b {
    display: block;
    font: 600 20px/28px var(--titulos);
    letter-spacing: -0.01em;
    color: #FFFFFF;
  }

  .acesso-passos span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #BCE9D5;
    color: #0B1918;
    font: 600 16px/1 var(--textos);
  }

  .acesso-passos li:last-child span {
    background: #F27D68;
  }

  /* linha que liga um passo ao seguinte */
  .acesso-passos li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 19px;
    width: 2px;
    background: #BCE9D5;
    transform-origin: top;
  }

  @media (prefers-reduced-motion: no-preference) {
    .acesso-passos li {
      opacity: .35;
      animation: acender .5s ease forwards;
      animation-delay: calc(var(--i) * .9s + .4s);
    }

    .acesso-passos li:not(:last-child)::before {
      transform: scaleY(0);
      animation: descer .6s ease forwards;
      animation-delay: calc(var(--i) * .9s + .8s);
    }
  }

  .etapa h1 {
    font-size: 32px;
    line-height: 40px;
  }
}

@keyframes acender {
  to {
    opacity: 1;
  }
}

@keyframes descer {
  to {
    transform: scaleY(1);
  }
}