/* ---------- barra lateral fixa: as quatro ferramentas (pedido do usuário, 13/10/2026; ver DESIGN.md, "Barra lateral") ----------
   Azul Escuro predominante, ícones e textos em branco, dourado só no item selecionado e no fio da marca.
   Abaixo de 900 px vira uma barra no topo com o botão "Menu". */
:root{--lateral:252px}
#app.com-lateral{padding-left:var(--lateral)}
.lateral{position:fixed;inset:0 auto 0 0;width:var(--lateral);z-index:30;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--azul) 0%,var(--azul) 55%,var(--azul-medio) 100%);color:var(--branco);
  border-right:1px solid rgba(var(--dourado-rgb),.28);overflow-y:auto}
.lt-topo{padding:26px 22px 20px;border-bottom:1px solid rgba(var(--branco-rgb),.1)}
.lt-marca{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;border-radius:8px}
.lt-marca img{display:block;width:148px;height:auto}
.lt-marca span{font:700 10.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--dourado-claro);
  padding-top:10px;border-top:2px solid var(--dourado);align-self:flex-start}
.lt-menu{display:none}
/* A logo já está na barra: as capas das visões gerais ficam só com a marca d'água (as capas dos relatórios mantêm a logo). */
@media screen{#app.com-lateral header.capa:not(.rel-capa) .logo-h{display:none}}
.lt-nav{display:flex;flex-direction:column;gap:6px;padding:18px 14px}
.lt-nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid transparent;
  font:500 14px var(--sans);color:var(--branco);text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.lt-nav svg,.lt-menu svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lt-nav a:hover{background:rgba(var(--branco-rgb),.08)}
.lt-nav a[aria-current="page"]{border-color:var(--dourado);background:rgba(var(--dourado-rgb),.14);color:var(--dourado-claro);font-weight:700}
.lt-nav a[aria-current="page"] svg{stroke:var(--dourado)}
.lateral :focus-visible{outline-color:var(--dourado-claro)}

@media (max-width:900px){
  #app.com-lateral{padding-left:0}
  .lateral{position:static;width:auto;border-right:0;border-bottom:2px solid var(--dourado);overflow:visible;background:var(--azul)}
  .lt-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--gut);border-bottom:0}
  .lt-marca{flex-direction:row;align-items:center;gap:12px}
  .lt-marca img{width:104px}
  .lt-marca span{padding:0 0 0 12px;border-top:0;border-left:2px solid var(--dourado);font-size:9.5px;letter-spacing:.16em}
  .lt-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(var(--branco-rgb),.45);background:transparent;color:var(--branco);font:600 13px var(--sans)}
  .lt-menu[aria-expanded="true"]{border-color:var(--dourado);color:var(--dourado-claro)}
  .lt-nav{display:none;padding:4px var(--gut) 14px}
  .lateral.aberta .lt-nav{display:flex}
}
@media (max-width:420px){.lt-marca span{display:none}}
@media print{#app.com-lateral{padding-left:0}}