/* ============================================================================
   ADM — o que é só deste painel.

   O grosso do estilo vem do `styles.css` da raiz, que os três apps dividem: as
   cores, os cartões, a tabela, a janela e as classes `.adm-*` que já existiam
   quando o painel morava dentro do app social. Aqui ficam apenas as peças que
   nasceram com o painel separado.
   ========================================================================== */

/* A CHAVE DE PLATAFORMA — Geral · Social · Business.

   Ela fica no topo do conteúdo, e não na barra lateral, porque não é navegação:
   é um FILTRO de leitura. Posta no menu, pareceria uma quarta seção e a pessoa
   procuraria por "Social" uma tela que não existe. */
.adm-plat { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--space-6);
  border-radius: var(--radius-full); background: var(--veu-medio);
  border: 1px solid var(--border-subtle); }
.adm-plat-bt { height: 34px; padding: 0 18px; border-radius: var(--radius-full);
  border: 0; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 650; color: var(--text-muted); }
.adm-plat-bt:hover { color: var(--text-strong); }
.adm-plat-bt.on { background: var(--surface-raised); color: var(--text-strong);
  box-shadow: var(--lift-1); }

/* O recado de SQL que falta. Uma tela de operação em branco manda procurar
   defeito no código; esta diz o nome do arquivo que resolve. Ela existe igual
   no app social — aqui de novo porque o `styles.css` da raiz é compartilhado e
   já a traz, mas o painel pode ser publicado sozinho num deploy de emergência. */
.adm-falta { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-3);
  background: var(--warning-bg); border: 1px solid rgba(184,134,11,.34);
  font-size: 13.5px; line-height: 1.55; }
.adm-falta > .ico { color: var(--warning-text); flex: none; margin-top: 2px; }
.adm-falta strong { color: var(--warning-text); }

/* O painel do ADM não tem barra de baixo nem casca de app: no celular a coluna
   do menu vira uma faixa rolável no topo, para as dezesseis telas continuarem
   ao alcance sem empurrar o conteúdo para fora. */
@media (max-width: 900px) {
  .adm { display: block; }
  .adm-menu { position: static; width: auto; height: auto; border-right: 0;
    border-bottom: 1px solid var(--border-subtle); }
  .adm-menu nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
  .adm-menu nav .adm-item { flex: none; white-space: nowrap; }
  .adm-secao, .adm-pe { display: none; }
  .adm-conteudo { padding: 22px 18px; }
}