/* Ícones de ação da barra superior.
   Eles ficam num grupo flex alinhado à direita: quando algum não está
   disponível (a busca geral, por exemplo, só aparece nos módulos que a
   habilitam), os demais se encostam sem deixar espaço vazio.
   Abaixo de 767px os ícones dão lugar a um botão único com uma bandeja.
   O css/conteudo.css é injetado depois deste arquivo, por isso as regras que
   sobrescrevem estilos já existentes da barra precisam de !important. */

.menugeral .menu-acoes-topo{position:absolute;right:15px;top:calc(50% - 20px);
	display:flex;align-items:center;gap:10px;}

/* Dentro do grupo quem posiciona é o flex, não o "right" de cada ícone. */
.menugeral .menu-acoes-topo > a{
	position:relative !important;
	right:auto !important;
	left:auto !important;
	top:auto !important;
	margin:0 !important;
	flex:0 0 auto;
}

.menugeral .menuManual{display:block;width:40px;height:40px;border-radius:50%;
	color:#a4b5c3;background:#F2F2F2;text-align:center;padding-top:8px;font-size:20px;}
.menugeral .menuManual:hover,.menugeral .menuManual.ativo{background:#FFF;color:#333;text-decoration:none;}

.menugeral .menuAcoesMobile{display:none;width:40px;height:40px;border-radius:50%;
	color:#a4b5c3;background:#F2F2F2;text-align:center;padding-top:8px;font-size:20px;}
.menugeral .menuAcoesMobile:hover,.menugeral .menuAcoesMobile.ativo{background:#FFF;color:#333;text-decoration:none;}
.menugeral .contador-acoes-mobile{position:absolute;right:-5px;top:-5px;min-width:20px;height:20px;
	padding:2px 5px;border-radius:10px;background:#E64457;color:#FFF;font:700 11px/16px Arial;}

/* A seta das caixas é alinhada ao ícone correspondente pelo scripts/barra-acoes.js,
   que grava a distância em --seta. O valor fixo é só o ponto de partida. */
.menugeral .boxAlertasAdministrativos:after,
.menugeral .boxAlertasChamados:after,
.menugeral .boxAcoesMobile:after{
	right:var(--seta, 66px) !important;
}

.menugeral .boxAcoesMobile{display:none;position:absolute;z-index:21;top:60px;right:10px;
	width:270px;max-width:calc(100vw - 20px);background:#FFF;border-radius:6px;
	box-shadow:1px 1px 20px rgba(0,0,0,.3);overflow:hidden;}
.menugeral .boxAcoesMobile:after{content:"";position:absolute;top:-8px;
	border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #FFF;}

.boxAcoesMobile .acao-mobile{display:flex;align-items:center;gap:10px;padding:13px 16px;
	border-bottom:1px solid #EEE;color:#333;text-decoration:none;font-size:14px;}
.boxAcoesMobile .acao-mobile:last-child{border-bottom:0;}
.boxAcoesMobile .acao-mobile:hover,.boxAcoesMobile .acao-mobile:focus{background:#F4F6F8;color:#333;text-decoration:none;}
.boxAcoesMobile .acao-mobile .glyphicon{font-size:17px;color:#777;width:20px;text-align:center;}
.boxAcoesMobile .acao-mobile .rotulo-acao{flex:1;}
.boxAcoesMobile .contador-acao{min-width:20px;height:20px;padding:2px 6px;border-radius:10px;
	background:#E64457;color:#FFF;font:700 11px/16px Arial;text-align:center;}

@media (max-width:767px){

	/* Os ícones dão lugar ao botão único. */
	.menugeral .menuAlertasAdministrativos,
	.menugeral .menuAlertasChamados,
	.menugeral .menuManual,
	.menugeral .menuBusca{
		display:none !important;
	}

	.menugeral .menuAcoesMobile{display:block;}

	/* As caixas passam a ocupar a largura útil da tela. */
	.menugeral .boxAlertasAdministrativos,
	.menugeral .boxAlertasChamados,
	.menugeral .boxInfoBusca{
		left:10px !important;
		right:10px !important;
		width:auto !important;
		max-width:none !important;
	}

}

@media print{

	.menugeral .menu-acoes-topo,
	.menugeral .boxAcoesMobile{
		display:none !important;
	}

}