/* Portal Expedicao: o que a moldura acrescenta ao kit (estilo.css). */
html,body{height:100%}

/* entrar: a peca #entrar do kit; aqui so a marca, o erro e o botao largo */
.login-marca{display:flex;align-items:center;gap:12px}
.login-marca b{display:block;font:800 var(--t2)/1.1 var(--sans);letter-spacing:.02em}
.login-marca small{color:var(--tinta3);font-size:var(--t-1)}
.login-selo{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--noite);color:#fff;font:800 16px/1 var(--sans)}
#bt-entrar{width:100%;padding:14px;font-weight:800;letter-spacing:.06em}
.login-erro{margin:-4px 0 0;padding:10px 12px;border-radius:10px;border:2px solid var(--vermelho);background:color-mix(in srgb,var(--vermelho) 10%,var(--papel));
  color:var(--vermelho-t);font-weight:700;font-size:var(--t-1)}

/* casca: o painel ocupa todo o espaco ao lado do menu */
#app main{position:relative;height:100vh}
#quadro{display:block;width:100%;height:100%;border:0}
nav{display:flex;flex-direction:column}
nav .sair{margin-top:auto}
nav .menu-grupo{padding-top:6px}
.abre-menu{display:none}

@media (max-width:900px){
  .abre-menu{display:inline-flex;position:fixed;left:10px;bottom:10px;z-index:40;height:44px;box-shadow:0 2px 0 var(--linha2)}
  html.menu-aberto::after{content:"";position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.4)}
}

/* menu recolhido (PC): trilho de 64 px so com os icones; a escolha fica guardada no navegador */
nav .recolhe{margin:0 0 12px}
@media (min-width:901px){
  #app{transition:grid-template-columns .18s}
  html.menu-mini #app{grid-template-columns:64px 1fr}
  html.menu-mini nav{padding:0 8px 24px}
  html.menu-mini nav::before{margin:0 -8px 18px}
  html.menu-mini nav .quem-sou{grid-template-columns:1fr;justify-items:center;margin:0 0 14px;padding:4px}
  html.menu-mini nav .quem-sou>div,html.menu-mini nav .menu-grupo>h2,html.menu-mini nav button b{display:none}
  html.menu-mini nav .menu-grupo{margin:0 0 12px;padding:4px 0;border:0;background:none}
  html.menu-mini nav button{grid-template-columns:32px;justify-content:center;padding:6px 0}
  html.menu-mini nav button[aria-current="page"]::before{left:-8px}
}
@media (max-width:900px){nav .recolhe{display:none}}