/*
 * A altura fixa em 980px partia do princípio de que a tela sempre teria
 * pelo menos essa altura. Em telas menores que isso (a maioria dos
 * celulares), o BorderContainer calculava a região central maior que a
 * viewport real e, como overflow ficava hidden, parte do conteúdo ficava
 * inacessível/sobreposto. Usar a altura real da viewport (100vh) faz o
 * dijit.BorderContainer calcular as regiões corretamente em qualquer
 * tamanho de tela; o próprio #conteudo (região central) já rola por conta
 * própria (overflow:auto, definido pelo dijit) quando o conteúdo é maior
 * que o espaço disponível.
 */
body,html {
	height: 100vh !important;
	overflow-X: hidden;
}
body {
	overflow: hidden;
}

#corpo {
	width: 100%;
	height: 100%;
}

/*
 * O tema dijit aplica a classe dijitContentPaneSingleChild em #conteudo
 * quando a região central tem um único widget-filho "resizável" (ex: um
 * dijit.form.Form, como o formulário de cadastro de usuário). Essa classe
 * sobrescreve o overflow:auto padrão do ContentPane para overflow:hidden
 * (workaround antigo do próprio dijit para um bug de scrollbar do Safari),
 * cortando o conteúdo sem barra de rolagem em monitores menores. Como a
 * expectativa aqui (ver comentário acima) é #conteudo sempre poder rolar,
 * restauramos o overflow-y nesse caso.
 */
#conteudo.dijitContentPaneSingleChild {
	overflow-y: auto !important;
}

/*
 * #topo (design:sidebar) só tem uma região agora: #titulo (center). A
 * altura aqui precisa bater com a de #titulo, senão o dijit calcula um
 * espaço real menor do que o CSS promete e o overflow:hidden dela corta o
 * que estiver dentro (ver #titulo/#logoTop abaixo). O margin-top de 50px
 * que existia aqui não tinha nenhuma razão documentada (commit inicial,
 * sem histórico) nem nenhum elemento externo que dependesse desse
 * respiro — só inflava a altura reservada pra região sem necessidade.
 */
#topo {
	padding: 0;
	height: 60px; /* = altura de #titulo */
	border-bottom: 1px solid #ccc;
}

#rodape {
	height: 50px;
}

#titulo {
	background-repeat: no-repeat;
	padding: 0;
	overflow: hidden;
	height: 60px;
}

/*
 * A logo era um <img> solto fora do dijit.BorderContainer, alinhada só por
 * margin-top/margin-left "no chute" (e o h1 compensava com margin-left
 * fixo). Como ela não pertencia a nenhuma região do BorderContainer, o
 * dijit não a recalculava junto no resize, então ela desalinhava do
 * título. Agora a logo mora dentro do próprio contentPane do título
 * (#tituloWrap), e os dois ficam lado a lado via flexbox — sem números
 * mágicos de margem pra manter o encaixe.
 */
#tituloWrap {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 15px;
}

#titulo h1 {
	margin: 0;
}

/*
 * Entrar/Sair morava numa região #menu à parte, um BorderContainer inteiro
 * só pra essa linha (ocupava a largura toda da página por baixo do
 * cabeçalho). Agora ele é só mais um item de #tituloWrap; margin-left:auto
 * empurra ele pro fim da mesma linha da logo/título.
 */
#tituloWrap .login {
	margin-left: auto;
	color: blue;
	font-weight: bold;
	font-size: 1.15em;
	white-space: nowrap;
	margin-right: 15px;
}

hr{
	margin-top: 42px;
	margin-left: 9px;
}

/*
 * Altura fixa em height (não width) pra manter a proporção real da imagem
 * (547x514) — width:auto deixa o navegador calcular a largura certa em vez
 * de usar um valor chutado que não batia exatamente com a proporção
 * original. Tem que caber dentro dos 60px de #titulo (ver acima), senão
 * volta a ser cortada pelo overflow:hidden.
 */
#logoTop{
	height: 50px;
	width: auto;
	flex-shrink: 0;
	margin-left: 15px;
	margin-top: 0px;
}