/* Cabecalho: contexto, status da integracao, busca e usuario. */

.topo-menu {
  display: none; /* so aparece quando a navegacao vira gaveta */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto-fraco);
  cursor: pointer;
}

.topo-contexto {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 0;
  border-radius: var(--raio-container);
  background: var(--cor-superficie-baixa);
  cursor: pointer;
  text-align: left;
  max-width: 280px;
}

.topo-contexto:hover {
  background: var(--cor-borda);
}

.topo-contexto-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topo-contexto-rotulo {
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
  line-height: 1.2;
}

.topo-contexto-valor {
  font-size: var(--txt-corpo-p);
  font-weight: 600;
  color: var(--cor-titulo);
}

/* ---------- status da integracao ---------- */
.topo-status {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pill);
  background: var(--cor-superficie-baixa);
  font-size: var(--txt-rotulo);
  white-space: nowrap;
}

.topo-status-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-sucesso);
  animation: pulsar 2s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .topo-status-ponto { animation: none; }
}

.topo-status-texto {
  font-weight: 500;
  color: var(--cor-titulo);
}

/* ---------- busca ---------- */
.topo-busca {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex: 1;
  max-width: 420px;
  padding-inline: var(--esp-3);
  height: var(--altura-input);
  border-radius: var(--raio-container);
  background: var(--cor-superficie-baixa);
}

.topo-busca:focus-within {
  outline: 2px solid var(--cor-primaria);
  outline-offset: -1px;
}

.topo-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto);
}

.topo-busca input::placeholder {
  color: var(--cor-texto-fraco);
}

.topo-busca input:focus {
  outline: none;
}

/* ---------- acoes e usuario ---------- */
.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-left: auto;
}

.topo-icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto-fraco);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.topo-icone:hover {
  background: var(--cor-superficie-baixa);
  color: var(--cor-titulo);
}

.topo-contador {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  border-radius: var(--raio-pill);
  background: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--cor-superficie);
}

.topo-divisor {
  width: 1px;
  height: 24px;
  background: var(--cor-borda);
}

.topo-usuario {
  position: relative; /* ancora do menu da conta */
}

.topo-usuario-botao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  max-width: 260px;
  padding: var(--esp-1) var(--esp-2);
  border: 0;
  border-radius: var(--raio-container);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background-color 120ms ease;
}

.topo-usuario-botao:hover,
.topo-usuario-botao[aria-expanded='true'] {
  background: var(--cor-superficie-baixa);
}

.topo-usuario-botao[aria-expanded='true'] .topo-usuario-seta {
  transform: rotate(180deg);
}

.topo-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cor-primaria-tint);
  color: var(--cor-primaria);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--txt-corpo-p);
  background-size: cover;
  background-position: center;
}

.topo-avatar--foto {
  color: transparent;
}

.topo-avatar--g {
  width: 40px;
  height: 40px;
  font-size: var(--txt-corpo);
}

.topo-usuario-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topo-usuario-nome {
  font-size: var(--txt-corpo-p);
  font-weight: 600;
  color: var(--cor-titulo);
  line-height: 1.3;
}

.topo-usuario-papel {
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
}

/* ---------- menu da conta ---------- */
.usuario-menu {
  position: absolute;
  top: calc(100% + var(--esp-2));
  right: 0;
  z-index: 60;
  width: 280px;
  padding: var(--esp-2);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-container);
  box-shadow: var(--sombra-3);
}

.usuario-menu-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-3) var(--esp-4);
}

.usuario-menu-identidade {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.usuario-menu-nome {
  font-size: var(--txt-corpo);
  font-weight: 600;
  color: var(--cor-titulo);
  line-height: 1.3;
}

.usuario-menu-email {
  font-size: var(--txt-rotulo);
  color: var(--cor-texto-fraco);
}

.usuario-menu-perfil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie-baixa);
}

.usuario-menu-separador {
  height: 1px;
  margin: var(--esp-2) 0;
  background: var(--cor-borda);
}

.usuario-menu-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--txt-corpo-p);
  text-align: left;
  cursor: pointer;
}

.usuario-menu-item:hover {
  background: var(--cor-superficie-baixa);
  color: var(--cor-titulo);
}

.usuario-menu-item .icone {
  color: var(--cor-texto-fraco);
}

.usuario-menu-item[data-acao='sair']:hover {
  background: var(--cor-erro-tint);
  color: var(--cor-erro);
}

.usuario-menu-item[data-acao='sair']:hover .icone {
  color: var(--cor-erro);
}

/* ---------- responsivo ---------- */
@media (max-width: 1280px) {
  .topo-status { display: none; }
}

@media (max-width: 1024px) {
  .topo-contexto { display: none; }
  .topo-usuario-texto { display: none; }
}

@media (max-width: 900px) {
  .topo-menu { display: flex; }
}