/* A BARRA DOS MÓDULOS, vertical, à esquerda -- UM DESENHO SÓ (ele, 03/11/2026: "aquela barra do módulo tem que ser igual para todos os módulos").
   Mora no ChatProc (frontend/src/barraDosModulos/), vale para ele e chega ao CRM e ao e-mail copiada por `levar-a-barra.mjs`: lá NÃO se edita.
   As cores são as da pele Balcão; fora do ChatProc, onde as variáveis não existem, valem os mesmos valores escritos depois da vírgula.

   Ele em 07/09/2026: *"bota lá no cantinho, no lado esquerdo, em barra vertical, os módulos."* Fixa e fina, o ícone sempre visível. O conteúdo
   ganha a margem correspondente (no ChatProc, `.dashboard`; nos outros, o `body.com-barra-de-modulos`) -- barra sobreposta esconderia o começo. */
.barra-de-modulos { position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; box-sizing: border-box; width: 3.6rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .3rem; background: var(--navy, #14213d); border-right: 1px solid #0b1427; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: #4b5d86 transparent; }
.barra-de-modulos > button { position: relative; width: 100%; display: grid; place-items: center; gap: .15rem; padding: .55rem .2rem; border: 1px solid transparent; border-radius: var(--radius-md, .625rem); background: transparent; color: #c9d3e6; font-family: inherit; cursor: pointer; }
.barra-de-modulos button svg { width: 21px; height: 21px; }
/* A Inter é mais larga que a letra do sistema: em 3,6rem "Veículos" quebrava no meio ("Veíc ulos"), medido na homologação em 28/10. A barra
   ganha 0,6rem e a palavra não se parte mais -- só passa para a linha de baixo inteira. */
.barra-de-modulos button em { width: 100%; font-size: .58rem; font-style: normal; font-weight: 700; line-height: 1.15; text-align: center; letter-spacing: -.01em; overflow-wrap: normal; word-break: normal; }
.barra-de-modulos button:hover { color: #fff; background: #22325a; }
.barra-de-modulos button.active { color: #fff; background: var(--navy-muted, #2a3b63); border-color: #4b5d86; }
.barra-de-modulos:empty { display: none; }
/* O botão sem ícone (o "ChatProc" de quando ainda não chegou a barra da pessoa): um quadrado do tamanho do ícone. */
.barra-de-modulos-sem-icone { display: block; width: 21px; height: 21px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 6px; }
/* O TRAÇO: separa os SEGMENTOS (que trocam a barra de cima) dos ATALHOS (que abrem uma tela e deixam a de cima como estava). */
.barra-de-modulos-traco { display: block; width: 1.6rem; height: 1px; margin: .55rem auto; background: var(--sidebar-border, #34466f); }
body.com-barra-de-modulos { padding-left: 3.6rem; }
@media (min-width: 721px) {
  .barra-de-modulos { width: 4.2rem; }
  body.com-barra-de-modulos { padding-left: 4.2rem; }
}
@media (max-width: 720px) {
  /* NO CELULAR A BARRA VIRA UMA FILA no alto: uma coluna numa tela estreita comeria a tela. Rola de lado, como a fila de módulos. */
  .barra-de-modulos { position: static; width: 100%; flex-direction: row; bottom: auto; gap: .25rem; padding: .4rem; border-right: 0; border-bottom: 1px solid #24344f; overflow-x: auto; }
  .barra-de-modulos button { width: auto; flex: 0 0 auto; grid-auto-flow: column; align-items: center; padding: .4rem .6rem; }
  .barra-de-modulos button em { font-size: .68rem; }
  /* No CRM e no e-mail do celular (os módulos de atendimento), a barra não entra: a tela é deles. */
  body.com-barra-de-modulos { padding-left: 0; }
  body.com-barra-de-modulos > .barra-de-modulos { display: none; }
}