/* O que nasce com o login: as telas sem sidebar (entrar, trocar senha) e o
   bloco de usuario no rodape da sidebar.

   Tudo aqui usa a familia --accent de tokens.css. Este projeto NAO tem
   --cor-primaria: escrever a familia errada faz a tela cair no azul default do
   navegador sem ninguem entender por que.

   Nenhum hex de cor aparece neste arquivo: a cor vem sempre por token. A prova
   e a busca pelo hex da marca nao achar nada aqui, e por isso o proprio hex
   nao esta escrito nem neste comentario. */

/* ---------------------------------------------------------------
   TELAS DE AUTENTICACAO (sem sidebar)
   --------------------------------------------------------------- */

.tela-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fundo);
}

.auth-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 28px 26px 22px;
  box-shadow: 0 4px 20px var(--accent-sombra);
}

.auth-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

/* Largura total: numa caixa de 380px o botao dividir espaco com o vazio nao
   ajuda ninguem a achar o unico caminho da tela. */
.auth-enviar {
  width: 100%;
  height: 42px;
  margin-top: 4px;
}

.campo-dica {
  font-size: var(--fs-sm);
  color: var(--texto-fraco);
  line-height: 1.4;
}

.auth-rodape {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: var(--fs-sm);
  color: var(--texto-fraco);
  text-align: center;
}

/* A tela de auth mostra aviso antes de existir layout, entao ela precisa da
   margem que o .conteudo daria. */
.auth-caixa .aviso {
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------
   BLOCO DE USUARIO NO RODAPE DA SIDEBAR
   --------------------------------------------------------------- */
/* Isto INVERTE a regra do app local, que proibia bloco de usuario e botao
   Sair porque nao havia login. Aqui ha, e app com login sem saida visivel
   deixa a pessoa sem como sair de um computador compartilhado. */

.usuario-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 0;
  margin-top: 8px;
}

/* Avatar com a inicial, nunca foto: foto pede upload, armazenamento e
   recorte, e ninguem pediu isso. */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--raio-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-escura));
  color: var(--texto-sobre-accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Sora', sans-serif;
  flex-shrink: 0;
}

/* min-width: 0 e o que faz o text-overflow funcionar dentro de um flex: sem
   ele o filho recusa encolher e o nome longo empurra o botao Sair para fora
   da sidebar. */
.usuario-box .info {
  min-width: 0;
  flex: 1;
}

.usuario-box .info .nome {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario-box .info .papel {
  font-size: 11px;
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}