/* ================= Barra lateral (referência: sidebar estilo "Chainx") =================
   Comportamento em js/sidebar.js. Só tokens de cor: vale nos dois temas. */

.side{width:244px;padding:18px 12px 14px;gap:2px;transition:width var(--t-base,220ms) var(--ease-out,ease)}

/* marca maior + botão « à direita */
.side .brand{position:relative;padding:4px 4px 20px 8px;font-size:16px;letter-spacing:-.025em;gap:9px;white-space:nowrap}
.side .brand .lg{width:40px;height:40px}
.side-recolher{margin-left:auto;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--dim2);cursor:pointer;flex:none}
.side-recolher:hover{background:var(--sf3);color:var(--txt)}
.side-recolher svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base,220ms) var(--ease-out,ease)}

/* itens: mais respiro */
.side .nav{position:relative;padding:8px 11px;border-radius:10px;font-size:13.5px;gap:11px;color:var(--dim)}
.side .nav .ic{width:20px;height:20px}
.side .nav svg{width:17px;height:17px}

/* ativo discreto: pílula neutra + filete roxo na borda da barra */
.side .nav.on{background:var(--sf3);color:var(--txt);border-color:var(--line);box-shadow:none;font-weight:600}
.side .nav.on .ic{color:var(--txt)}
.side .nav.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}

/* títulos de grupo: some o rótulo em caixa alta */
.side .navgrp.navgrp-oculto{display:none}
.side .navgrp-exp{display:flex;align-items:center;gap:11px;padding:8px 11px;margin-top:2px;border-radius:10px;
  text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:500;color:var(--dim);cursor:pointer;user-select:none;
  transition:background-color var(--t-fast,150ms) var(--ease-out,ease),color var(--t-fast,150ms) var(--ease-out,ease)}
.side .navgrp-exp:hover{background:var(--sf2);color:var(--txt)}
.side .navgrp-exp .ic{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--dim2);flex:none}
.side .navgrp-exp svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side .navgrp-seta{margin-left:auto;display:flex;color:var(--dim2)}
.side .navgrp-seta svg{width:14px;height:14px;transform:rotate(180deg);transition:transform var(--t-base,220ms) var(--ease-out,ease)}
.side .navgrp-exp.fechado .navgrp-seta svg{transform:rotate(0)}

/* subitens: sem ícone, ligados ao grupo por uma linha em árvore */
.side .nav.nav-filho{margin-left:21px;padding:6px 11px 6px 18px;font-size:13px;overflow:visible;
  background-image:linear-gradient(var(--line2),var(--line2));background-repeat:no-repeat;background-size:1px 100%;background-position:0 0;
  transition:max-height var(--t-base,220ms) var(--ease-out,ease),opacity var(--t-fast,150ms) var(--ease-out,ease),padding var(--t-base,220ms) var(--ease-out,ease),background-color var(--t-fast,150ms) var(--ease-out,ease);
  max-height:40px}
.side .nav.nav-filho .ic{display:none}
.side .nav.nav-filho::after{content:"";position:absolute;left:0;top:0;height:50%;width:10px;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2);border-bottom-left-radius:7px}
.side .nav.nav-filho.nav-filho-ultimo{background-image:none}
.side .nav.nav-filho.on{background-image:none;background-color:var(--sf3)}
.side .nav.nav-filho.on::before{left:-33px}
/* recolhido sem display:none: acessos.js usa offsetParent para saber se o grupo tem itens */
.side .nav.nav-recolhido{max-height:0;padding-top:0;padding-bottom:0;opacity:0;pointer-events:none;border-color:transparent;margin-top:0;margin-bottom:0;overflow:hidden}

/* rodapé: Configurações e Sair, separados por uma linha */
.side .side-espaco{flex:1;min-height:18px;border-bottom:1px solid var(--line);margin:0 -12px 10px}
.side .foot{margin-top:10px}

/* ---- modo compacto (só ícones) ---- */
.side.compacta{width:72px;padding-left:10px;padding-right:10px}
.side.compacta .brand{font-size:0;flex-direction:column;gap:12px;padding:4px 0 18px}
.side.compacta .brand span{display:none}
.side.compacta .side-recolher{margin-left:0}
.side.compacta .side-recolher svg{transform:rotate(180deg)}
.side.compacta .nav{font-size:0;justify-content:center;gap:0;padding:10px 0}
.side.compacta .nav.nav-filho{margin-left:0;background-image:none}
.side.compacta .nav.nav-filho::after{display:none}
.side.compacta .nav.nav-filho .ic{display:flex}
.side.compacta .nav.nav-recolhido{max-height:40px;padding:10px 0;opacity:1;pointer-events:auto}
.side.compacta .nav.on::before{left:-10px}
.side.compacta .navgrp-exp{display:none}
.side.compacta .side-espaco{margin:0 -10px 10px}
.side.compacta .foot{justify-content:center}
.side.compacta .foot > div{display:none}

@media (prefers-reduced-motion: reduce){
  .side,.side .nav.nav-filho,.side .navgrp-seta svg{transition:none}
}

/* tema claro: theme-light.css pinta o ativo em degradê com texto branco e apaga os
   títulos de grupo; aqui vale o mesmo padrão do escuro (pílula neutra + filete) */
:root[data-theme="light"] .side .nav.on{color:var(--txt);background:var(--sf3);border-color:var(--line);box-shadow:none}
:root[data-theme="light"] .side .nav.on .ic{color:var(--txt)}
:root[data-theme="light"] .side .navgrp-exp{color:#4a5170}
:root[data-theme="light"] .side .navgrp-exp .ic,:root[data-theme="light"] .side .navgrp-seta{color:#7a819f}
:root[data-theme="light"] .side .navgrp-exp:hover{background:rgba(19,22,40,.05);color:var(--txt)}