/* Login, sessao na barra, medidor de senha e sessoes. So tokens de :root de app.css: sem cor fixa. */

/* 1. Barra: "Olá, <nome> · Sair" ao lado da navegacao. */
.topo .sessao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
  font-size: 0.9375rem;
}

.sessao__nome {
  color: var(--texto);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sessao__nome:hover {
  text-decoration: underline;
}

.sessao__sep {
  color: var(--texto-2);
}

.sessao__form {
  margin: 0;
}

.sessao__sair {
  padding: 0;
  border: 0;
  background: none;
  color: var(--acento-tinta);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.sessao__sair:focus-visible,
.sessao__nome:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* 2. Tela de login: uma coluna centralizada, sem caixa dentro de caixa. */
.login {
  max-width: 28rem;
  margin: var(--s6) auto 0;
}

.login__form {
  margin-top: var(--s4);
}

.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.campo-grupo + .campo-grupo,
.formulario .acoes-linha {
  margin-top: var(--s3);
}

/* 3. Medidor de senha: texto e lista de erros, sempre visiveis e anunciados (aria-live). */
.medidor {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s1);
}

.medidor__forca {
  margin: 0;
  font-weight: 600;
}

.medidor__erros {
  margin: 0;
  padding-left: var(--s4);
  color: var(--erro-tinta);
}

.medidor__erros:empty {
  display: none;
}

/* 4. Lista de sessoes (conta). */
.lista-sessoes {
  list-style: none;
  margin: var(--s2) 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.sessao-item {
  padding: var(--s3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--superficie);
}

.sessao-item p {
  margin: 0;
  overflow-wrap: anywhere;
}

.dados-conta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s1) var(--s4);
  margin: 0;
}

.dados-conta dt {
  color: var(--texto-2);
}

.dados-conta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* 5. Senha unica (senha_provisoria.html): codigo grande, quebra de linha segura. */
.senha-valor {
  margin: var(--s3) 0;
}

.senha-valor code {
  display: inline-block;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
  font-size: 1.25rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* 6. Celular: a barra quebra em duas linhas, sem rolagem horizontal. */
@media (max-width: 640px) {
  .topo .sessao {
    width: 100%;
    margin-left: 0;
  }

  .dados-conta {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .dados-conta dt {
    margin-top: var(--s2);
  }
}