/* MX-Gestor — estilos base. Identidade: azul corporativo + dourado discreto. */
:root{
  --mx-azul:#0d3b66;
  --mx-azul-2:#13507f;
  --mx-dourado:#c9a227;
  --mx-fundo:#f4f6f9;
}
/* ⚠️ O fundo precisa estar no HTML, não só no body: entre um documento e outro o
   navegador pinta o fundo da RAIZ, e como só o body tinha cor, esse instante saía
   BRANCO — é o "pisca" ao clicar no menu. Com a cor na raiz, a transição fica na
   mesma cor da aplicação e o pisca desaparece. `color-scheme` evita que o navegador
   force um branco/preto próprio antes do CSS ser aplicado. */
html{ background:var(--mx-fundo); color-scheme:light; }
body.mx-body{ background:var(--mx-fundo); min-height:100vh; display:flex; flex-direction:column; }
body.mx-body > main{ flex:1 0 auto; }

/* Logotipo textual */
.mx-logo{ font-size:2rem; font-weight:800; color:var(--mx-azul); letter-spacing:-.5px; }
.mx-logo span{ color:var(--mx-dourado); }
.mx-logo-sm{ font-weight:800; letter-spacing:-.3px; }
.mx-logo-sm span{ color:var(--mx-dourado); }

/* Topbar */
.mx-topbar{ background:var(--mx-azul); }

/* Login */
.mx-login{ background:linear-gradient(135deg,var(--mx-azul) 0%, var(--mx-azul-2) 100%); }
.mx-login-card{ width:100%; max-width:420px; border-radius:1rem; }

/* Seletor de empresa */
.mx-select-empresa{ max-width:230px; }

/* Cards de módulo */
.mx-modulo{ border:1px solid #e3e7ee; border-radius:.9rem; transition:transform .12s, box-shadow .12s; color:var(--mx-azul); }
a.mx-modulo:hover{ transform:translateY(-3px); box-shadow:0 .6rem 1.4rem rgba(13,59,102,.15); border-color:var(--mx-azul); }
.mx-modulo-icon{ font-size:2rem; display:block; margin-bottom:.4rem; color:var(--mx-azul); }
.mx-modulo-nome{ font-weight:600; font-size:.95rem; line-height:1.2; }
.mx-modulo--breve{ opacity:.6; }
.mx-modulo--breve .mx-modulo-icon{ color:#8a93a3; }

.mx-rodape{ flex-shrink:0; }

/* ===== Layout com menu lateral ===== */
:root{ --mx-sidebar-w:248px; --mx-sidebar-w-min:62px; }

/* Menu RETRÁTIL — ganha ~186px de tela nas listas largas (grids, relatórios).
   Recolhido mostra só os ícones; o rótulo aparece no hover como tooltip nativo.
   A escolha fica no localStorage, então segue o usuário entre as telas. */
body.mx-menu-min .mx-sidebar{ width:var(--mx-sidebar-w-min); }
body.mx-menu-min .mx-sidebar .mx-nav-item span,
body.mx-menu-min .mx-sidebar .mx-nav-caret,
body.mx-menu-min .mx-sidebar-brand .mx-logo-sm span,
body.mx-menu-min .mx-sidebar .mx-nav-badge{ display:none; }
body.mx-menu-min .mx-sidebar .mx-nav-item{ justify-content:center; padding-left:0; padding-right:0; }
body.mx-menu-min .mx-sidebar .mx-nav-item i{ font-size:1.15rem; }
/* Recolhido, os grupos viram só o ícone-cabeçalho: o submenu confundiria sem rótulo */
body.mx-menu-min .mx-sidebar .mx-nav-sub{ display:none; }
body.mx-menu-min .mx-sidebar-brand{ padding-left:.4rem; padding-right:.4rem; text-align:center; }
.mx-sidebar{ transition:width .15s ease; }
.mx-menu-toggle{
  background:none; border:0; color:#8fa7c0; cursor:pointer; padding:.25rem .4rem;
  border-radius:.35rem; line-height:1;
}
.mx-menu-toggle:hover{ background:rgba(255,255,255,.08); color:#fff; }
/* No celular a sidebar já é off-canvas — recolher ali não faz sentido */
@media (max-width: 991.98px){
  body.mx-menu-min .mx-sidebar{ width:var(--mx-sidebar-w); }
  body.mx-menu-min .mx-sidebar .mx-nav-item span,
  body.mx-menu-min .mx-sidebar .mx-nav-sub{ display:revert; }
  .mx-menu-toggle{ display:none; }
}
.mx-shell{ display:flex; min-height:100vh; }
.mx-sidebar{
  width:var(--mx-sidebar-w); flex-shrink:0; background:#0b2f52; color:#cdd9e6;
  position:sticky; top:0; height:100vh; overflow-y:auto; z-index:1040;
}
.mx-sidebar-brand{ padding:1rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.mx-sidebar-brand .mx-logo-sm{ font-size:1.4rem; font-weight:800; color:#fff; }
.mx-sidebar-brand .mx-logo-sm span{ color:var(--mx-dourado); }
.mx-nav{ padding:.6rem .5rem; display:flex; flex-direction:column; gap:2px; }
.mx-nav-item{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; border-radius:.5rem;
  color:#cdd9e6; text-decoration:none; font-size:.93rem; white-space:nowrap;
}
.mx-nav-item i{ font-size:1.05rem; width:1.2rem; text-align:center; }
.mx-nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.mx-nav-item.ativo{ background:var(--mx-azul-2); color:#fff; font-weight:600; }
.mx-nav-item--breve{ opacity:.5; cursor:default; }
.mx-nav-sep{ border-color:rgba(255,255,255,.12); margin:.5rem .6rem; }

/* Grupos colapsáveis */
.mx-nav-group{ }
.mx-nav-group > summary{ list-style:none; cursor:pointer; user-select:none; }
.mx-nav-group > summary::-webkit-details-marker{ display:none; }
.mx-nav-grouphead{ font-weight:600; color:#aeb9c7; }
.mx-nav-caret{ font-size:.75rem; transition:transform .15s; }
.mx-nav-group[open] > summary .mx-nav-caret{ transform:rotate(180deg); }
.mx-nav-sub{ margin:2px 0 4px; padding-left:.5rem; border-left:2px solid rgba(255,255,255,.08); }
.mx-nav-subitem{ font-size:.9rem; padding-top:.45rem; padding-bottom:.45rem; }
.mx-nav-subitem i{ font-size:.95rem; }

.mx-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.mx-main .mx-topbar{ position:sticky; top:0; z-index:1030; }
.mx-content{ flex:1 0 auto; }
.mx-sidebar-overlay{ display:none; }

@media (max-width: 991.98px){
  .mx-sidebar{
    position:fixed; left:0; top:0; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:.3rem 0 1rem rgba(0,0,0,.2);
  }
  .mx-sidebar-open .mx-sidebar{ transform:translateX(0); }
  .mx-sidebar-open .mx-sidebar-overlay{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1035;
  }
}

/* Tags de uso (Configurações) */
.mx-uso-tag{ font-size:.7rem; }
.mx-cfg-card .card-header{ background:#f8fafc; }

/* ---------------------------------------------------------------- mx-progress
   Barra fina no topo entre o clique e a nova tela. O navegador não dá sinal
   nenhum nesse intervalo, e mesmo 300 ms sem feedback parecem travamento.
   Não bloqueia nada: só informa que o clique foi ouvido. */
#mxProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,#0d6efd,#3d8bfd);box-shadow:0 0 8px rgba(13,110,253,.6);
  opacity:0;transition:width .2s ease,opacity .25s ease;pointer-events:none}
#mxProgress.on{opacity:1}
@media (prefers-reduced-motion: reduce){ #mxProgress{transition:none} }

/* Espera longa (> 700 ms): além da barra, um aviso legível. NÃO é overlay — a tela
   anterior continua visível e utilizável; bloquear a página por uma navegação seria
   pior do que a espera. Fica no rodapé para não cobrir conteúdo nem o menu. */
#mxCarregando{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);
  z-index:2001;display:flex;align-items:center;gap:.55rem;
  background:rgba(13,59,102,.96);color:#fff;padding:.5rem .95rem;border-radius:999px;
  font-size:.86rem;box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
#mxCarregando.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mx-spin-sm{width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:mxGira .7s linear infinite}
@keyframes mxGira{to{transform:rotate(360deg)}}

/* Item clicado: spinner NA HORA e sem aceitar novo clique. Sem isto, entre o clique
   e a tela pesada o usuário não vê nada e clica de novo — foi o relato do Consolidado
   do Grupo. `pointer-events:none` é o que impede a segunda requisição. */
.mx-indo{opacity:.72;pointer-events:none}
.mx-spin-inline{display:inline-block;vertical-align:-2px;margin-left:.4rem;
  border-color:currentColor;border-top-color:transparent;opacity:.9}
@media (prefers-reduced-motion: reduce){ .mx-spin-inline{animation:none} }
@media (prefers-reduced-motion: reduce){
  #mxCarregando{transition:none}
  .mx-spin-sm{animation:none;border-top-color:rgba(255,255,255,.35)}
}

/* Mural: destaque suave na operação que acabou de entrar no feed */
@keyframes mrEntra { from { background:#fff3cd; } to { background:transparent; } }
.mr-novo{ animation: mrEntra 1.4s ease-out; }
@media (prefers-reduced-motion: reduce){ .mr-novo{ animation:none } }