/* Classes da casca do site (2026-10-08). Substituem os style="" inline do
   header/login do app desktop — a CSP do site (style-src 'self') nao permite
   estilo inline. Tudo aqui reaproveita os tokens var(--...) de tema.css. */
.header-marca { display: flex; align-items: center; gap: 10px; }
.header-logo { height: 22px; }
.header-titulo { border-left: 1px solid var(--borda-rgba-255-255-255-0-3); padding-left: 10px; }
.btn-sem-margem-esq { margin-left: 0; }
.gear-sessao-info { margin-top: 0; }
.card-login { }
.login-logo { text-align: center; margin-bottom: 18px; }
.login-logo-img { height: 38px; }

/* Menu lateral como gaveta no celular (2026-10-09). No computador o botao e o fundo ficam escondidos e nada muda. */
.menu-toggle { display: none; margin-right: 4px; }
.menu-fundo { display: none; }
@media (max-width: 700px) {
  body.com-menu .menu-toggle { display: inline-block; }
  .app-shell:not(.oculto) { display: block; }
  .app-shell .sidebar-coluna { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 85vw); box-sizing: border-box; padding: 12px; overflow-y: auto; background: var(--fundo-f4f5f7); z-index: 150; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: 4px 0 16px var(--sombra-rgba-0-0-0-0-2); }
  .app-shell .sidebar-coluna.aberta { transform: none; visibility: visible; }
  .menu-fundo.aberta { display: block; position: fixed; inset: 0; background: var(--fundo-rgba-0-0-0-0-4); z-index: 140; }
  /* Barra superior estreita: o texto "SGP Tools" some (fica o logo) pra caber ☰ + nome + ambiente + engrenagem. */
  header .header-titulo { display: none; }
  /* Sem a coluna de 190 px, as grades de 2-4 colunas das Métricas e da Gestão empilham/enxugam pra não estourar a largura. */
  main .tv-kpi-row, main .tv-kpi-row.tv-kpi-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main .tv-row2, main .hdg-insight-grid { grid-template-columns: minmax(0, 1fr); }
  main .tv-col, main .hdg-panel { min-width: 0; overflow-x: auto; }
  main .tv-pie-body { flex-wrap: wrap; }
}