/* =======================================================================
   PRODUCAO-INTERNA.CSS — estilos do módulo "Produção Interna" (Construx).
   Reusa o Design System (styles.css): .card .field .muted .page-head + o
   componente .nav (menu lateral / barra inferior). Aqui só o CASCO do módulo
   (menu lateral + conteúdo, igual ao RH/Agentes de IA) e o estado vazio das
   frentes ainda não desenvolvidas. Só TOKENS do Design System — nada de hex
   solto.
   ======================================================================= */

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

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

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

/* --- estado vazio (frentes futuras — todas, nesta etapa) --- */
.pin-vazia { text-align: center; padding: 30px 18px; }
.pin-vazia-ic { font-size: 2.2rem; margin-bottom: 6px; }
.pin-vazia-tit { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }