/* Menu lateral com ícones e recolhível (só os ícones), como no CRM. */

.ic { display: inline-flex; flex: none; }
.ic svg { display: block; }
.nav a { position: relative; }
.nav a .rot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.on .ic { color: var(--accent); }

.marca { display: flex; align-items: center; }
.marca .simbolo { display: none; width: 34px; height: 34px; }

.recolher { align-self: flex-end; display: inline-flex; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 6px; margin: -8px 0 -8px; }
.recolher:hover { color: var(--ink); background: var(--surface-2); }
.recolher .ic { transition: transform .2s; }

.btn.com-icone { display: inline-flex; align-items: center; gap: 6px; }

.shell { transition: grid-template-columns .2s ease; }
.shell.recolhido { grid-template-columns: 72px minmax(0, 1fr); }
.shell.recolhido .side { padding: 20px 10px; align-items: center; }
.shell.recolhido .marca .logo-claro, .shell.recolhido .marca .logo-escuro { display: none; }
.shell.recolhido .marca .simbolo { display: block; }
.shell.recolhido .recolher { align-self: center; }
.shell.recolhido .recolher .ic { transform: rotate(180deg); }
.shell.recolhido .nav { width: 100%; }
.shell.recolhido .nav h3 { display: none; }
.shell.recolhido .nav a { justify-content: center; padding: 10px 0; }
.shell.recolhido .nav a .rot { display: none; }
.shell.recolhido .nav a .contagem { position: absolute; top: 2px; right: 6px; margin: 0; }
.shell.recolhido .eu { padding: 6px; justify-content: center; }
.shell.recolhido .eu > div { display: none; }
.shell.recolhido .rodape-lateral { width: 100%; justify-items: center; }
.shell.recolhido .rodape-lateral .linha { flex-direction: column; }
.shell.recolhido .rodape-lateral .btn .rot { display: none; }
.shell.recolhido .rodape-lateral .btn { padding: 8px; }

@media (prefers-reduced-motion: reduce) {
  .shell, .recolher .ic { transition: none; }
}

/* Celular: a barra de baixo mostra o ícone com o nome pequeno embaixo. */
@media (max-width: 860px) {
  .barra-inferior a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; position: relative; min-width: 64px; }
  .barra-inferior a .rot { white-space: nowrap; }
  .barra-inferior a .contagem { position: absolute; top: 0; right: 10px; margin: 0; }
}