/* Lateral do sistema: os módulos, quem está logado e o sair. É o mesmo em toda página
   (index, instagram), montado pelo lado.js; as cores vêm do :root de cada página.
   Contas a Pagar, Instagram e Obras são telas daqui; módulo com `fora` abre noutra aba. */
.casca{display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100dvh}
.area{min-width:0}
.lado{position:sticky; top:0; z-index:25; height:100dvh; display:flex; flex-direction:column; background:var(--concreto); color:#F2F0EE; border-right:1px solid var(--fio-escuro); font-family:var(--f-corpo)}
.lado svg{display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.lado .mono{font-family:var(--f-mono); letter-spacing:.16em; text-transform:uppercase}
.lado-cab{height:var(--topo,61px); flex:none; display:flex; align-items:center; padding:0 20px; border-bottom:1px solid var(--fio-escuro)}
.lado .marca{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.lado .marca svg{width:34px; height:23px; color:var(--sinal); stroke:none}
.lado .marca b{display:block; font-family:var(--f-display); font-weight:700; font-size:.92rem; letter-spacing:.08em; line-height:1.1}
.lado .marca .mono{display:block; font-size:.58rem; color:rgba(242,240,238,.48)}
.modulos{display:grid; gap:2px; padding:16px 12px}
.modulos a{display:flex; align-items:center; gap:11px; height:40px; padding:0 10px; border-radius:var(--r-sm); color:rgba(242,240,238,.72); text-decoration:none;
  font-family:var(--f-display); font-weight:600; font-size:.86rem; letter-spacing:.01em; white-space:nowrap; transition:color .2s, background .2s}
.modulos a:hover{color:#fff; background:rgba(255,255,255,.06)}
.modulos a[aria-current]{color:#fff; background:rgba(255,255,255,.08); box-shadow:inset 3px 0 0 var(--sinal)}
.modulos svg{width:18px; height:18px; flex:none}
.modulos a[aria-current] svg{color:var(--sinal)}
.modulos .fora{width:13px; height:13px; margin-left:auto; color:rgba(242,240,238,.32); transition:color .2s, transform .3s var(--ease)}
.modulos a:hover .fora{color:rgba(242,240,238,.7); transform:translate(1px,-1px)}
.modulos .curto{display:none}
.modulos .grupo{margin:14px 10px 4px; font-size:.56rem; color:rgba(242,240,238,.38)}
.lado .quem{display:flex; align-items:center; gap:9px; width:100%; margin-top:auto; padding:14px 20px; border:0; border-top:1px solid var(--fio-escuro); background:none;
  min-width:0; font:inherit; font-size:.9rem; color:rgba(242,240,238,.82); text-align:left; cursor:pointer; transition:color .2s}
.lado .quem:hover{color:#fff}
.lado .avatar{width:30px; height:30px; flex:none; border-radius:var(--r-sm); background:var(--concreto-700); border:1px solid var(--fio-escuro); color:#fff;
  display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:.72rem}
#quem-nome{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* notebook: faixa de ícones, pra tela de trabalho ficar com a largura */
@media (max-width:1279px){
  .casca{grid-template-columns:64px minmax(0,1fr)}
  .lado-cab{justify-content:center; padding:0}
  .lado .marca > span,.modulos span,.modulos .grupo,.modulos .fora,.lado .quem > span:last-child{display:none}
  .modulos{padding:16px 10px}
  .modulos a{justify-content:center; padding:0}
  .modulos .grupo + a{margin-top:14px}
  .lado .quem{justify-content:center; padding:14px 0}
}

/* celular: barra embaixo, ícone e nome curto */
@media (max-width:760px){
  .casca{display:block}
  .lado{position:fixed; inset:auto 0 0 0; height:auto; flex-direction:row; align-items:stretch; border-right:0; border-top:1px solid var(--fio-escuro); padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
  .lado-cab{display:none}
  .modulos{display:flex; flex:1; gap:2px; padding:0}
  .modulos a{flex:1; flex-direction:column; justify-content:center; gap:3px; height:52px; font-size:.68rem}
  .modulos a > span:not(.longo){display:block}
  .modulos .grupo + a{margin-top:0}
  .modulos a[aria-current]{box-shadow:inset 0 2px 0 var(--sinal)}
  .lado .quem{width:auto; margin:0; padding:0 12px; border-top:0; border-left:1px solid var(--fio-escuro)}
}