/* ==========================================================================
   sistema.css — shell do sistema (header no topo + área de trabalho)
   ========================================================================== */

body.sistema{ min-height:100dvh; }

/* --- header ------------------------------------------------------------- */
.topo{
  position:sticky; top:0; z-index:30;
  background:var(--deep1); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(1,40,55,.18);
}
.topo-interno{
  max-width:var(--largura-max); margin:0 auto;
  min-height:var(--topbar-h);
  display:flex; align-items:center; gap:22px;
  padding:0 22px;
}

/* O logotipo é monocromático (teal escuro); sobre o header escuro ele é
   invertido para branco puro, preservando o recorte alfa das bordas. */
.topo-logo{
  height:26px; width:auto; flex-shrink:0;
  filter:brightness(0) invert(1);
}

/* --- menu horizontal ----------------------------------------------------- */
.menu{
  display:flex; align-items:center; gap:4px;
  flex:1; min-width:0; overflow-x:auto;
}
.menu-item{
  display:flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:8px; cursor:pointer; white-space:nowrap;
  font-size:.86rem; font-weight:500; color:rgba(255,255,255,.72);
  transition:background .15s, color .15s;
}
.menu-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.menu-item.ativo{ background:var(--deep3); color:#fff; font-weight:600; }
.menu-item .ponto{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--deep5); opacity:.6;
}
.menu-item.ativo .ponto{ background:var(--amber1); opacity:1; }

/* O rótulo "Módulos" só faz sentido na versão empilhada do mobile. */
.menu-titulo{ display:none; }

/* --- sair ---------------------------------------------------------------- */
.btn-sair{
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  font-family:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  color:rgba(255,255,255,.72); background:transparent;
  border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:7px 12px;
}
.btn-sair:hover{ color:#fff; border-color:rgba(255,255,255,.55); }
.btn-sair svg{ width:14px; height:14px; }

/* Botões só de ícone no header (tema, menu no mobile). */
.btn-icone, .btn-menu{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; padding:0; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.22); border-radius:8px;
}
.btn-icone:hover, .btn-menu:hover{ color:#fff; border-color:rgba(255,255,255,.55); }
.btn-icone svg, .btn-menu svg{ width:17px; height:17px; }

.btn-menu{ display:none; }

/* --- página -------------------------------------------------------------- */
.pagina{
  max-width:var(--largura-max); margin:0 auto;
  padding:22px;
}
.pagina-titulo{
  font-size:1.16rem; font-weight:700; margin:0 0 18px; color:var(--deep1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pagina-titulo{ color:var(--deep5); }
}
:root[data-theme="dark"] .pagina-titulo{ color:var(--deep5); }

#workarea{ min-height:60dvh; }

/* --- avisos (toast) ------------------------------------------------------- */
#avisos{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; flex-direction:column; gap:8px; max-width:340px;
}
.aviso{
  background:var(--gray1); color:#fff;
  font-size:.8rem; line-height:1.45;
  padding:11px 14px; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:opacity .35s, transform .35s;
}
.aviso-erro{ background:var(--vermelho); }
.aviso.saindo{ opacity:0; transform:translateY(6px); }

/* --- mobile: o menu vira uma lista empilhada sob o header ----------------- */
@media (max-width:760px){
  .topo-interno{ flex-wrap:wrap; gap:12px; padding:10px 14px; }
  .topo-logo{ margin-right:auto; height:22px; }
  .btn-menu{ display:flex; order:4; }
  .btn-icone{ order:2; }
  .btn-sair span{ display:none; }
  .btn-sair{ padding:7px 9px; order:3; }

  .menu{
    order:4; display:none; width:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:6px 0 10px; overflow:visible;
    border-top:1px solid rgba(255,255,255,.10);
  }
  body.menu-aberto .menu{ display:flex; }

  .menu-titulo{
    display:block; padding:8px 12px 4px;
    font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(255,255,255,.38);
  }

  .pagina{ padding:16px 14px; }
}