/* VER COMO OUTRA PESSOA: a faixa de identidade emprestada e o menu de gente.
 *
 * Arquivo próprio pelo mesmo motivo do entregues.css: em 10/09/2026 havia trabalho de outra
 * sessão em aberto no estilo.css, e mexer nele levaria esse trabalho junto num commit que
 * não é dele.
 *
 * A FAIXA É AMARELA DE PROPÓSITO, e fica presa no topo. Ela não é enfeite: sem ela a pessoa
 * esquece por qual tela está olhando e estranha o hub inteiro, porque some módulo, some
 * botão e nada explica. O amarelo é o mesmo aviso do resto da casa: atenção, não erro. */

/* ⚠️ O `hidden` TEM DE GANHAR DO `display` (quebrou em produção em 10/09/2026, e o Wylle viu
 * primeiro: "qual que é dessa barra zuada aqui meo? oloco quebrou").
 *
 * O atributo `hidden` do HTML vale por uma regra do próprio navegador, `[hidden]{display:none}`,
 * e regra de folha de estilo do autor ganha dela sempre. Como esta classe declara
 * `display:flex`, a faixa continuava ocupando lugar mesmo com o `hidden` no elemento: uma
 * barra amarela vazia no topo do hub, para TODO MUNDO, o dia inteiro.
 *
 * Vale para toda a casa: elemento que a tela liga e desliga por `hidden` e que tem `display`
 * declarado no CSS precisa desta linha junto. Sem ela o `el.hidden = true` não esconde nada. */
.faixa-espelho[hidden],
.menu-gente[hidden] {
  display: none !important;
}

.faixa-espelho {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 16px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b4a08;
  background: linear-gradient(#ffe9a8, #ffdf88);
  border-bottom: 1px solid #e6c65f;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

.faixa-espelho strong { font-weight: 700; }

.faixa-espelho .botao.vazio {
  background: rgba(255, 255, 255, .7);
  border: 1px solid #cfa73f;
  color: #6b4a08;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}

.faixa-espelho .botao.vazio:hover { background: #fff; }

/* O menu de gente abre DENTRO do menu da conta, e não numa segunda camada flutuante: uma
 * lista que voa por cima do menu que a abriu é a que a pessoa fecha sem querer ao mexer o
 * mouse. Ele rola sozinho, para o time crescer sem empurrar o "Sair" para fora da tela. */
.menu-gente {
  max-height: 260px;
  overflow-y: auto;
  /* --linha é o token de borda da casa. O que estava aqui, --borda, não existe na paleta,
   * e o traço saía sempre no cinza claro fixo, mesmo no navy e no grafite. */
  border-top: 1px solid var(--linha);
  margin-top: 4px;
  padding-top: 4px;
}

.menu-gente button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
}

/* O papel ao lado do nome. Dois "Gedásio" no time é raro, mas "Operador" e "Head" dizem na
 * hora que tela a pessoa vai encontrar do outro lado. */
.menu-gente button i {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  opacity: .6;
}

.menu-gente-espera {
  padding: 10px 12px;
  font-size: 12px;
  opacity: .65;
}

/* Dentro do espelho o avatar ganha um anel, para o estado ser visível mesmo com a faixa
 * rolada para fora numa tela pequena. */
body.no-espelho .avatar {
  box-shadow: 0 0 0 2px #ffd257;
}