/* BOTÕES "VOLTAR" E "SAIR" — o mesmo tamanho, formato e cor em TODO o sistema (todas as telas e módulos).
   Para mudar todos de uma vez, mude só os números aqui (este arquivo é carregado por último em cada tela).
   Dois lugares, mesmo botão:
   - TOPO: canto direito da barra de cima (Voltar / Sair);
   - DENTRO DA TELA: "← Voltar" no canto esquerdo, logo acima do conteúdo do módulo. */
:root {
  --botao-nav-altura: 40px;
  --botao-nav-largura: 120px;
  --botao-nav-cor: #2e7cf6;
}

/* ---------- Aparência (igual em todos) ---------- */
.barra-topo-login .botao-fechar-popup,
.barra-topo-login .botao-voltar-topo-emitir,
.cabecalho-senha .botao-fechar-popup,
header.topo button#btn-sair,
header.topo-admin button#btn-sair,
header.topo-cliente button#btn-sair,
#botao-sair-topo-anoreg,
#botao-voltar-topo-anoreg,
#botao-voltar-ou-sair,
#link-sair-senha,
#botao-fechar-painel,
#botao-fechar-chat,
#botao-fechar-criar-grupo,
#botao-fechar-lista,
#botao-sair-aviso,
.botao-voltar-submodulos,
.botao-voltar-controle-associados-modulo,
.botao-voltar-associados-modulo,
.botao-voltar-tela,
.botao-voltar-padrao,
.botao-nav-padrao,
#botao-voltar-modulos-config,
#btn-fechar-meus-dados,
#cas-voltar-busca,
#botao-voltar,
#patrimonio-botao-voltar-resumo,
#recuperar-voltar,
#recuperar-voltar-2,
#codigo-voltar {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: var(--botao-nav-largura) !important;
  height: var(--botao-nav-altura) !important;
  padding: 0 20px !important;
  border: 1.5px solid var(--botao-nav-cor) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--botao-nav-cor) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.barra-topo-login .botao-fechar-popup:hover,
.barra-topo-login .botao-voltar-topo-emitir:hover,
.cabecalho-senha .botao-fechar-popup:hover,
header.topo button#btn-sair:hover,
header.topo-admin button#btn-sair:hover,
header.topo-cliente button#btn-sair:hover,
#botao-sair-topo-anoreg:hover,
#botao-voltar-topo-anoreg:hover,
#botao-voltar-ou-sair:hover,
#link-sair-senha:hover,
#botao-fechar-painel:hover,
#botao-fechar-chat:hover,
#botao-fechar-criar-grupo:hover,
#botao-fechar-lista:hover,
#botao-sair-aviso:hover,
.botao-voltar-submodulos:hover,
.botao-voltar-controle-associados-modulo:hover,
.botao-voltar-associados-modulo:hover,
.botao-voltar-tela:hover,
.botao-voltar-padrao:hover,
.botao-nav-padrao:hover,
#botao-voltar-modulos-config:hover,
#btn-fechar-meus-dados:hover,
#cas-voltar-busca:hover,
#botao-voltar:hover,
#patrimonio-botao-voltar-resumo:hover,
#recuperar-voltar:hover,
#recuperar-voltar-2:hover,
#codigo-voltar:hover {
  background: rgba(46, 124, 246, 0.10) !important;
  color: var(--botao-nav-cor) !important;
}

/* Botão com o atributo "escondido" continua escondido. */
.barra-topo-login .botao-fechar-popup[hidden],
.barra-topo-login .botao-voltar-topo-emitir[hidden],
.cabecalho-senha .botao-fechar-popup[hidden],
header.topo button#btn-sair[hidden],
header.topo-admin button#btn-sair[hidden],
header.topo-cliente button#btn-sair[hidden],
#botao-sair-topo-anoreg[hidden],
#botao-voltar-topo-anoreg[hidden],
#botao-voltar-ou-sair[hidden],
#link-sair-senha[hidden],
#botao-fechar-painel[hidden],
#botao-fechar-chat[hidden],
#botao-fechar-criar-grupo[hidden],
#botao-fechar-lista[hidden],
#botao-sair-aviso[hidden],
.botao-voltar-submodulos[hidden],
.botao-voltar-controle-associados-modulo[hidden],
.botao-voltar-associados-modulo[hidden],
.botao-voltar-tela[hidden],
.botao-voltar-padrao[hidden],
.botao-nav-padrao[hidden],
#botao-voltar-modulos-config[hidden],
#btn-fechar-meus-dados[hidden],
#cas-voltar-busca[hidden],
#botao-voltar[hidden],
#patrimonio-botao-voltar-resumo[hidden],
#recuperar-voltar[hidden],
#recuperar-voltar-2[hidden],
#codigo-voltar[hidden] {
  display: none !important;
}

/* ---------- Posição ---------- */
/* TOPO: sempre no canto direito da barra de cima, na mesma linha. */
.barra-topo-login .grupo-botoes-topo,
.barra-topo-login .grupo-botoes-topo-anoreg {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}
.barra-topo-login > .botao-fechar-popup,
.barra-topo-login > .botao-voltar-topo-emitir {
  margin-left: auto !important;
}

/* DENTRO DA TELA: canto esquerdo, acima do conteúdo, com o mesmo espaço embaixo. */
.botao-voltar-submodulos,
.botao-voltar-controle-associados-modulo,
.botao-voltar-associados-modulo,
.botao-voltar-tela,
.botao-voltar-padrao,
#botao-voltar-modulos-config,
#btn-fechar-meus-dados,
#botao-voltar,
#patrimonio-botao-voltar-resumo {
  margin: 0 0 18px 0 !important;
  align-self: flex-start !important;
}

/* Telas estreitas (celular): o botão encolhe um pouco, igual em todas. */
@media (max-width: 560px) {
  :root { --botao-nav-largura: 96px; --botao-nav-altura: 38px; }
}

/* ---------- CELULAR (Painel de Senha, Chamador e Bate-papo): "Voltar" do tamanho do "Abrir" ----------
   No cabeçalho verde do celular, o "Voltar" fica do MESMO tamanho e formato do botão "Abrir" ao lado
   (só a cor segue o padrão: fundo branco, contorno e letra azuis). O nome "Voltar" sempre aparece inteiro:
   os botões nunca encolhem; se faltar espaço, é o título que se ajusta. */
body.chamador-celular .cabecalho-painel-senha .botoes-cabecalho-painel,
body.fundo-bate-papo .cabecalho-painel-senha .botoes-cabecalho-painel,
.popup-chat .cabecalho-popup-chat .botoes-cabecalho-painel {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* Título inteiro ("Painel de Senha"): o "online" desce para baixo do nome, liberando a largura da linha. */
body.chamador-celular .cabecalho-painel-senha .titulo-com-status,
body.fundo-bate-papo .cabecalho-painel-senha .titulo-com-status {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
}
body.chamador-celular .cabecalho-painel-senha .rotulo-painel-senha,
body.fundo-bate-papo .cabecalho-painel-senha .rotulo-painel-senha {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.1 !important;
}

html body.chamador-celular .botoes-cabecalho-painel .botao-janela-popup,
html body.fundo-bate-papo .botoes-cabecalho-painel .botao-janela-popup,
html body .popup-chat .botoes-cabecalho-painel .botao-janela-popup,
html body.chamador-celular #botao-fechar-painel,
html body.fundo-bate-papo #botao-fechar-lista,
html body.fundo-bate-papo #botao-fechar-painel,
html body .popup-chat #botao-fechar-chat,
html body .popup-chat #botao-fechar-criar-grupo,
html body .popup-chat #botao-fechar-lista,
html body.chamador-celular .botoes-cabecalho-painel .botao-fechar-popup,
html body.fundo-bate-papo .botoes-cabecalho-painel .botao-fechar-popup {
  box-sizing: border-box !important;
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* Cor do "Voltar" = a do padrão (branco com contorno e letra azuis); "Abrir" mantém a dele. */
html body.chamador-celular #botao-fechar-painel,
html body.fundo-bate-papo #botao-fechar-lista,
html body.fundo-bate-papo #botao-fechar-painel,
html body .popup-chat #botao-fechar-chat,
html body .popup-chat #botao-fechar-criar-grupo,
html body .popup-chat #botao-fechar-lista,
html body.chamador-celular .botoes-cabecalho-painel .botao-fechar-popup,
html body.fundo-bate-papo .botoes-cabecalho-painel .botao-fechar-popup {
  background: #ffffff !important;
  border: 1.5px solid var(--botao-nav-cor) !important;
  color: var(--botao-nav-cor) !important;
}
/* O "Abrir" ganha uma borda invisível da mesma espessura, para os dois ficarem exatamente do mesmo tamanho. */
html body.chamador-celular .botoes-cabecalho-painel .botao-janela-popup,
html body.fundo-bate-papo .botoes-cabecalho-painel .botao-janela-popup,
html body .popup-chat .botoes-cabecalho-painel .botao-janela-popup {
  border: 1.5px solid transparent !important;
}