/* Inova · casca do painel no padrão profissional
   Carregado depois do estilo.css. Só redesenha a moldura: menu lateral,
   cabeçalho da página, cartões. As telas continuam as mesmas. */

/* ------------------------------------------------------------- lateral */
#lateral{
  width:250px;flex:0 0 250px;
  background:var(--navy,#00202e);
  border-right:1px solid rgba(255,255,255,.05);
}
.marca{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.marca img{width:124px}
.marca .sub{margin-top:9px;font-size:10px;letter-spacing:.16em;color:#5f7f8e}

.menu{padding:10px 12px 20px}

/* grupo que abre e fecha */
.menu .grupo{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#5f7f8e;padding:16px 10px 6px;cursor:pointer;user-select:none;
  border-radius:8px;transition:color .12s;
}
.menu .grupo:hover{color:#9db3bf}
.menu .grupo .seta{
  width:14px;height:14px;opacity:.7;transition:transform .18s;flex:0 0 auto;
}
.menu .bloco.fechado .grupo .seta{transform:rotate(-90deg)}
.menu .bloco.fechado > button{display:none}

/* item */
.menu button{
  position:relative;
  padding:9px 12px 9px 14px;margin-bottom:2px;
  border-radius:10px;color:#b7c7d0;font-size:13.5px;font-weight:500;
  transition:background .12s,color .12s;
}
.menu button:hover{background:rgba(255,255,255,.06);color:#fff}
.menu button.ativo{
  background:rgba(255,255,255,.10);color:#fff;font-weight:650;box-shadow:none;
}
.menu button.ativo::before{
  content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--laranja,#ff7414);
}
.menu .ico{
  width:20px;flex:0 0 20px;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;opacity:.9;
}
.menu .ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.menu button.ativo .ico{color:var(--laranja,#ff7414)}
.menu .selo{background:var(--laranja,#ff7414);color:#fff;font-size:10.5px;padding:1px 7px}

.rodape-lateral{padding:12px 16px;border-top:1px solid rgba(255,255,255,.07);color:#8aa4b0;font-size:12.5px}
.rodape-lateral .btn.claro{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:#dfe8ec}
.rodape-lateral .btn.claro:hover{background:rgba(255,255,255,.12)}

/* ------------------------------------------------------------ cabeçalho */
.topo{
  padding:22px 30px 18px;background:var(--fundo,#f7fafc);border-bottom:0;
  align-items:flex-start;flex-wrap:wrap;gap:12px 16px;
}
.topo > div:not(.acoes):not(.inv-situacao-caixa){flex:1;min-width:220px}
.topo .acoes{order:3}
.inv-situacao-caixa{order:4}
.topo h1{font-size:26px;font-weight:750;letter-spacing:-.02em;line-height:1.15;color:var(--navy,#00202e)}
.topo p{margin-top:5px;font-size:13.5px;color:var(--texto2,#55707d)}
.topo .acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* pílula de situação da conexão */
.inv-situacao{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:650;white-space:nowrap;
}
.inv-situacao i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.inv-situacao.ok{background:var(--verde-claro,#e7f6ed);color:var(--verde,#0f9d58)}
.inv-situacao.ruim{background:var(--vermelho-claro,#fdecec);color:var(--vermelho,#d33a3a)}
.inv-situacao.neutro{background:var(--azul-claro,#e8f1f6);color:var(--azul,#013f5c)}
.inv-situacao.alerta{background:var(--amarelo-claro,#fff4e2);color:var(--amarelo,#b97a00)}

.pagina{padding:8px 30px 64px}

/* -------------------------------------------------------------- cartões */
.cartao{border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(0,32,46,.04),0 8px 24px rgba(0,32,46,.05)}
.cartao > h3:first-child,
.cartao > .olho + h3{
  font-size:16px;font-weight:700;letter-spacing:-.01em;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--borda,#e4eaef);
}
.cartao > .olho{margin-bottom:6px}

/* botão hambúrguer, só no celular */
.inv-hamburguer{display:none;border:1px solid var(--borda-forte,#cfdae2);background:#fff;border-radius:10px;
  width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.inv-hamburguer svg{width:20px;height:20px;stroke:var(--navy,#00202e);fill:none;stroke-width:2;stroke-linecap:round}
.inv-sombra{display:none;position:fixed;inset:0;background:rgba(0,32,46,.45);z-index:39}
@media(max-width:860px){
  .inv-hamburguer{display:inline-flex}
  .inv-sombra.on{display:block}
  .topo{padding:14px 16px}
  .topo h1{font-size:21px}
  .pagina{padding:8px 16px 48px}
}

/* -------------------------------------------------------------- vazio */
.vazio .icone{font-size:30px;margin-bottom:8px}