/* ============================================================================
   A CASCA DOS SISTEMAS IBRAFLEX
   Usada pela Biblioteca de Documentos e pelo Catálogo.

   POR QUE ELA EXISTE, 01/09/2026

   O Gabriel colocou as telas lado a lado e disse: "não está seguindo um
   padrão, os locais precisam estar direcionados corretamente para as pessoas
   que abrirem saberem mexer, portal no mesmo local". Ele estava certo. O
   Orçamento de Campo tinha a marca em cima à esquerda, o nome do sistema com
   a versão embaixo dela, o botão de voltar ao Portal logo abaixo, o menu no
   meio e a pessoa no rodapé. O Acervo tinha os mesmos botões no canto de
   cima à direita, e as telas novas tinham uma barra horizontal.

   Três formas diferentes de fazer a mesma coisa em três telas do mesmo
   portal. Quem abre precisa reaprender onde ficam as coisas a cada clique, e
   é exatamente isso que faz um sistema interno parecer improvisado.

   O padrão é o do Orçamento de Campo, porque era o que a equipe já usava
   todo dia. As outras telas vieram atrás.

   NO CELULAR a lateral vira uma barra em cima: tela de 375px não comporta
   256px de menu fixo e ainda sobrar espaço para trabalhar.
   ============================================================================ */

.casca{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100dvh}

/* ------------------------------------------------------------- a lateral
   A LATERAL E UM CARTAO QUE FLUTUA, e nao uma coluna colada na borda.
   Medidas copiadas do menu do Acervo, que o Gabriel escolheu como padrao da
   casa em 01/09/2026: cartao branco afastado da janela, canto de 14px,
   padding de 8px, item de 10px. A diferenca parece pequena e nao e: coluna
   colada divide a tela em dois blocos, cartao afastado deixa o menu parecer
   uma peca que se pode pegar. */
.lateral{
  position:sticky;top:0;height:100dvh;padding:12px;z-index:20;
  display:flex;flex-direction:column;
}
.lateral > *{flex:none}
.lateral .cartao{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:var(--sh, 0 1px 2px rgba(14,31,56,.04), 0 6px 20px rgba(14,31,56,.06));
}
.lateral .marca{display:block;padding:10px 10px 14px}
.lateral .marca img{height:30px;width:auto;display:block}

.lateral .sistema{
  padding:0 10px 12px;
  font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--navy);
}
.lateral .sistema span{
  font-weight:600;letter-spacing:normal;text-transform:none;opacity:.45;
}

.lateral .voltar{padding:0 2px 10px}
.lateral .voltar a{
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none;
  background:#F7F9FC;
}
.lateral .voltar a:hover{background:#F4F7FC;border-color:#C9D0DE}
.lateral .voltar svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* A ACAO VEM ANTES DA NAVEGACAO, 01/09/2026.
   O "Novo documento" estava no fim de uma lista de onze categorias que rola.
   Quem chegava para publicar precisava descer a lista inteira para achar o
   botao, e o que a pessoa MAIS faz era o que estava mais longe da mao.
   Agora a acao fica fixa no alto, fora da area que rola: a lista pode crescer
   para trinta categorias que o botao continua no mesmo lugar.
   E o mesmo motivo de "Escrever" ficar no topo do e-mail, e nao depois das
   pastas. */
.lateral .acoes{padding:0 2px 10px;display:flex;flex-direction:column;gap:6px}
.lateral .acaoForte{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:11px 12px;border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(150deg,var(--navy2),var(--blue));color:#fff;
  font-size:13.5px;font-weight:700;font-family:inherit;
  box-shadow:0 6px 16px rgba(41,54,130,.28);
}
.lateral .acaoForte:hover{filter:brightness(1.07)}
.lateral .acaoForte:active{transform:scale(.975)}
.lateral .acaoForte svg{width:16px;height:16px;stroke:#fff;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lateral .acaoFraca{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background:#fff;color:var(--ink2);font-size:12.5px;font-weight:700;
  font-family:inherit;
}
.lateral .acaoFraca:hover{background:#F5F7FB;color:var(--ink)}
.lateral .acaoFraca:active{transform:scale(.975)}
.lateral .acaoFraca svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

.lateral .menu{flex:1;min-height:0;overflow-y:auto;padding:0 2px 4px}
.lateral .grupo{
  font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink3);padding:12px 10px 4px;
}
.lateral .item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:10px;border:1px solid transparent;background:none;
  font-size:13.5px;line-height:1.25;font-weight:500;color:var(--ink);cursor:pointer;
  text-align:left;text-decoration:none;margin-bottom:2px;
}
.lateral .item:hover{background:#F5F7FB}
.lateral .item.on{background:var(--navy);color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(41,54,130,.25)}
.lateral .item svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lateral .item .n{
  margin-left:auto;font-size:11px;font-weight:800;
  background:#EDF0F7;color:var(--ink3);padding:1px 7px;border-radius:20px;
}
.lateral .item.on .n{background:rgba(255,255,255,.24);color:#fff}
.lateral .item .n.alerta{background:var(--amber);color:#201604}

.lateral .euRodape{
  margin-top:auto;border-top:1px solid var(--line);padding:12px 10px 4px;
  display:flex;align-items:center;gap:10px;
}
.lateral .euRodape .txt{flex:1;min-width:0;line-height:1.25}
.lateral .euRodape .txt b{display:block;font-size:13px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral .euRodape .txt i{display:block;font-style:normal;font-size:11px;
  color:var(--ink3);text-transform:capitalize}
.lateral .euRodape .sair{
  border:1px solid var(--line);background:#fff;width:34px;height:34px;
  border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:none;
}
.lateral .euRodape .sair:hover{background:#FDF2F1;border-color:#F3CFCB}
.lateral .euRodape .sair svg{width:16px;height:16px;stroke:var(--ink2);
  fill:none;stroke-width:2;stroke-linecap:round}
.lateral .euRodape .sair:hover svg{stroke:var(--vermelho)}

/* ------------------------------------------------- a barra do celular */
.topoMovel{
  display:none;height:56px;background:#fff;border-bottom:1px solid var(--line);
  align-items:center;gap:10px;padding:0 14px;position:sticky;top:0;z-index:25;
}
.topoMovel img{height:24px;width:auto}
.topoMovel .nomeSis{font-size:12px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--navy)}
.topoMovel .espaco{flex:1}
.topoMovel a,.topoMovel button{
  border:1px solid var(--line);background:#fff;border-radius:9px;
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);text-decoration:none;flex:none;
}
.topoMovel svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* No celular o menu da lateral vira uma faixa de rolagem horizontal logo
   abaixo do topo. Continua sendo o MESMO menu, na mesma ordem: quem aprendeu
   no computador não precisa reaprender no celular. */
.menuMovel{display:none;gap:8px;overflow-x:auto;padding:12px 14px 0;
  -webkit-overflow-scrolling:touch}
.menuMovel::-webkit-scrollbar{display:none}
.menuMovel .item{
  flex:none;padding:7px 14px;border-radius:20px;background:#fff;
  border:1.5px solid var(--line);font-size:13px;font-weight:700;
  color:var(--ink2);cursor:pointer;white-space:nowrap;
}
.menuMovel .item.on{background:var(--navy);border-color:var(--navy);color:#fff}
.menuMovel .item .n{margin-left:5px;opacity:.65;font-weight:600}

@media(max-width:1024px){
  .casca{grid-template-columns:1fr}
  .lateral{display:none}
  .topoMovel{display:flex}
  .menuMovel{display:flex}
}