/* =======================================================================
   AGENTESIA.CSS — estilos do módulo "Agentes de IA" (Construx).
   Reusa o Design System (styles.css): .page-head .muted + o componente .nav
   (menu lateral / barra inferior). Aqui só o CASCO do módulo (menu lateral +
   conteúdo, igual ao RH/Planejamento/Estoque). Nesta etapa a área de conteúdo
   de cada agente é DELIBERADAMENTE VAZIA (só nome + descrição no cabeçalho).
   Só TOKENS do Design System — nada de hex solto.
   ======================================================================= */

/* --- casco do módulo: menu lateral + conteúdo (idêntico ao RH) --- */
.aia { display: flex; align-items: flex-start; margin: calc(-1 * var(--content-py)) calc(-1 * var(--content-px)) calc(-1 * var(--content-pb)); }
.aia-nav { z-index: 39; }
.aia-main { flex: 1; min-width: 0; padding: var(--content-py) var(--content-px) calc(var(--content-py) + var(--content-pb)); }
.wrap:has(.aia) { max-width: none; }
.aia-conteudo { min-width: 0; }

/* --- topo: nome do módulo --- */
.aia-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 14px; }
.aia-top-tit { flex: 1; min-width: 220px; }
.aia-top-tit h1 { font-size: var(--fs-page); line-height: var(--lh-title); letter-spacing: var(--tracking-title); }

/* --- cabeçalho do agente: nome + descrição; conteúdo abaixo fica vazio --- */
.aia-head h1 { margin-bottom: 4px; }
.aia-head p { max-width: 70ch; color: var(--text-secondary); }

/* No celular a .aia-nav vira barra inferior fixa (regra de styles.css): o casco
   vira bloco simples e reserva o espaço da barra medido em --aia-nav-h. */
@media (max-width: 780px) {
  .aia { display: block; margin: 0; }
  .aia-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .aia-main { padding: 0; padding-bottom: max(0px, calc(var(--aia-nav-h, 0px) - 84px)); }
}