/* Identidade Gridian WMS — aplicacao das logos oficiais.
 *
 * ESTE E O UNICO LUGAR onde a marca e dimensionada no desktop. Os caminhos e o nome
 * vivem em assets/js/00-marca.js; aqui vive so o TAMANHO e o espaco ao redor.
 *
 * A marca NAO e mais desenhada em CSS. A assinatura tipografica e o simbolo 3x3 da
 * rodada anterior foram removidos quando as logos oficiais chegaram: eram um desenho
 * proprio, feito antes de existir marca, e manter os dois seria manter duas marcas.
 * Por isso aqui nao ha font-family, peso nem letter-spacing de marca — mexer nisso
 * agora seria redesenhar a logo, e a logo nao se redesenha.
 *
 * A unica regra que importa: proporcao 2172x724 preservada em todo lugar (`height:auto`),
 * e a versao certa para o fundo certo — quem decide isso e o JS, nao o CSS.
 */

.marca{ display: inline-block; line-height: 0; }

.marca__logo{
  display: block;
  width: 100%;
  height: auto;      /* a proporcao da logo nunca e forcada */
  max-width: 100%;
}

/* Barra lateral (fundo escuro) — a logo ocupa a largura util, com respiro proprio. */
#app > nav .marca-bloco{ display: block; padding: 10px 14px 26px; }
#app > nav .marca{ width: 148px; }

/* Recolhida: a logo inteira nao cabe em 76 px sem virar borrao. Em vez de espremer,
 * a faixa e recortada na inicial — o "G" e o que sobrevive nessa largura. */
#app.sidebar-collapsed > nav .marca-bloco{ padding: 10px 0 26px; }
#app.sidebar-collapsed > nav .marca{
  width: 44px;
  overflow: hidden;
  margin: 0 auto;
}
#app.sidebar-collapsed > nav .marca__logo{ width: 148px; max-width: none; }

/* Cabecalho do desktop (fundo branco). O design system o mantem oculto enquanto a
 * lateral existe; abaixo de 900 px a lateral some e ele volta a carregar a marca. */
#app header h1.marca{ margin: 0; width: 132px; }
@media (max-width: 900px){
  #app header h1.marca{ display: inline-block; }
}