/* Manual de uso - painel lateral.
   Em tela grande ocupa metade da largura; no celular ocupa a página inteira.
   Os destaques usam a cor de fonte padrão do sistema (#333). */

/* O ícone do manual é posicionado pelo grupo .menu-acoes-topo (css/barra-acoes.css). */

.painel-manual{position:fixed;top:0;right:0;bottom:0;width:50%;max-width:820px;min-width:380px;
	background:#FFF;box-shadow:-4px 0 24px rgba(0,0,0,.22);z-index:99990;
	display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;}
.painel-manual.aberto{transform:translateX(0);}

.painel-manual .manual-cabecalho{display:flex;align-items:center;gap:10px;padding:14px 18px;
	border-bottom:1px solid #E5E5E5;background:#F8F9FA;}
.painel-manual .manual-titulo{font-size:17px;font-weight:700;color:#333;margin-right:auto;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.painel-manual .manual-cabecalho a{color:#777;text-decoration:none;font-size:18px;padding:4px 8px;border-radius:4px;}
.painel-manual .manual-cabecalho a:hover,.painel-manual .manual-cabecalho a.ativo{color:#333;background:#ECEFF2;}

/* O conteúdo e o índice dividem a mesma área: o índice entra por cima, não
   empurra nem reduz o texto do manual. */
.painel-manual .manual-area{position:relative;flex:1;overflow:hidden;}
.painel-manual .manual-corpo{position:absolute;top:0;left:0;right:0;bottom:0;
	overflow-y:auto;padding:20px 24px 40px;color:#333;line-height:1.6;}

.painel-manual .manual-indice-lista{display:none;position:absolute;top:0;left:0;right:0;
	max-height:100%;overflow-y:auto;background:#FFF;border-bottom:1px solid #DDD;
	box-shadow:0 8px 18px rgba(0,0,0,.16);padding:12px 18px 16px;z-index:2;}
.painel-manual .manual-indice-lista.aberta{display:block;}

.manual-indice-grupo{margin-bottom:12px;}
.manual-indice-grupo strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
	color:#999;margin-bottom:5px;}
.manual-indice-item{display:block;padding:6px 8px;border-radius:4px;color:#333;text-decoration:none;font-size:14px;}
.manual-indice-item:hover{background:#ECEFF2;color:#333;text-decoration:none;}
.manual-indice-item.ativo{background:#333;color:#FFF;}

.manual-carregando,.manual-vazio{padding:30px;text-align:center;color:#999;}

/* Conteúdo escrito nos arquivos de manual. */
.manual-corpo h2{font-size:20px;margin:0 0 6px;color:#333;}
.manual-corpo .manual-resumo{color:#777;margin:0 0 20px;}
.manual-corpo h3{font-size:15px;text-transform:uppercase;letter-spacing:.4px;color:#333;
	margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid #E9ECEF;}
.manual-corpo h4{font-size:15px;margin:18px 0 6px;color:#333;}
.manual-corpo p{margin:0 0 12px;}
.manual-corpo ul,.manual-corpo ol{margin:0 0 14px;padding-left:22px;}
.manual-corpo li{margin-bottom:6px;}
.manual-corpo strong{color:#333;}
.manual-corpo em{color:#333;}
.manual-corpo table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px;}
.manual-corpo th,.manual-corpo td{border:1px solid #E5E8EB;padding:7px 10px;text-align:left;vertical-align:top;color:#333;}
.manual-corpo th{background:#F4F6F8;font-size:13px;}
.manual-corpo .manual-passos{counter-reset:passo;list-style:none;padding-left:0;}
.manual-corpo .manual-passos li{position:relative;padding-left:34px;margin-bottom:10px;}
.manual-corpo .manual-passos li:before{counter-increment:passo;content:counter(passo);position:absolute;left:0;top:1px;
	width:24px;height:24px;border-radius:50%;background:#333;color:#FFF;font-size:12px;font-weight:700;
	display:flex;align-items:center;justify-content:center;}
.manual-corpo .manual-aviso{background:#FFF7E6;border-left:4px solid #d08b18;padding:11px 14px;
	border-radius:0 5px 5px 0;margin:0 0 16px;color:#333;}
.manual-corpo .manual-dica{background:#F4F6F8;border-left:4px solid #B9C2CB;padding:11px 14px;
	border-radius:0 5px 5px 0;margin:0 0 16px;color:#333;}
.manual-corpo .manual-campo{font-weight:700;color:#333;}
.manual-corpo code{background:#F1F3F5;padding:2px 6px;border-radius:3px;font-size:13px;color:#333;}

@media (max-width:991px){

	/* O painel passa a ocupar a página inteira. */
	.painel-manual{width:100%;max-width:none;min-width:0;}
	.painel-manual .manual-corpo{padding:16px 16px 40px;}

}

@media (max-width:767px){

	.painel-manual .manual-cabecalho{padding:12px 14px;}
	.painel-manual .manual-titulo{font-size:15px;}
	.painel-manual .manual-indice-lista{padding:12px 14px 16px;}

}

@media print{

	.painel-manual{
		display:none !important;
	}

}