/*
 * Cabecalho do sistema (app/View/comuns/cabecalho.php).
 * 23/10/2026: subgrupos do menu da engrenagem, e o CSS do sino e da faixa de
 * assinatura, que viviam em <style> dentro da view (regra do projeto).
 */

/* ---------------- Menu da engrenagem: subgrupos que abrem e fecham ----------------
   Mesmo visual do dropdown de sempre (pedido do usuario: organizar, nao mudar o
   tema). Cada grupo e um item com seta; aberto, mostra os itens recuados. O
   JS fica no cabecalho, logo depois do menu. */
.nx-cfg-grupo { list-style: none; }
.nx-cfg-gatilho { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.nx-cfg-seta { font-size: .7rem; color: #8a8f98; transition: transform .15s ease; }
.nx-cfg-grupo.aberto > .nx-cfg-gatilho { font-weight: 600; }
.nx-cfg-grupo.aberto > .nx-cfg-gatilho .nx-cfg-seta { transform: rotate(90deg); }
.nx-cfg-sub { display: none; list-style: none; margin: 0; padding: 0 0 .25rem; }
.nx-cfg-grupo.aberto > .nx-cfg-sub { display: block; }
.nx-cfg-sub .dropdown-item { padding-left: 2.6rem; font-size: .95em; }
@media (prefers-reduced-motion: reduce) { .nx-cfg-seta { transition: none; } }
/* Com todos os grupos abertos, o menu rola por dentro em vez de passar da tela */
@media (min-width: 992px) {
    .nx-cfg { max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* ---------------- Sino de notificacoes (migration 134) ---------------- */
.nx-sino > .nav-link { font-size: 1.15rem; color: rgba(0,0,0,.65); }
.nx-sino-badge { position: absolute; top: 0; right: -4px; font-size: .62rem; padding: .22em .45em; }
.nx-sino > .nav-link:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.nx-sino-menu { width: 340px; }
/* Celular: fixed, na largura da tela. Absolute seria cortado - o style.css
   poe overflow-x: hidden em .container/.container-fluid abaixo de 768px,
   o que corta tambem no eixo y. O top e o JS que define ao abrir. */
@media (max-width: 991.98px) {
    .nx-sino .nx-sino-menu { position: fixed; top: 70px; left: 8px; right: 8px; width: auto; }
}
#nxSinoLista { max-height: 380px; overflow-y: auto; }
.nx-sino-item { display: block; padding: .6rem 1rem; border-bottom: 1px solid #f0f0f0; color: #333; text-decoration: none; white-space: normal; }
.nx-sino-item:hover { background: #f5f8fb; color: #333; }
.nx-sino-item.nao-lida { background: #eef5ff; }
.nx-sino-item.nao-lida .nx-sino-titulo::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0d6efd; margin-right: 6px; vertical-align: middle; }
.nx-sino-titulo { font-weight: 600; font-size: .88rem; }
.nx-sino-msg { font-size: .8rem; color: #555; }
.nx-sino-quando { font-size: .72rem; color: #888; }

/* ---------------- Faixa de aviso da assinatura (migration 140) ---------------- */
.nx-faixa { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .75rem .5rem 0;
            padding: .6rem .9rem; border-radius: 10px; border: 1px solid; font-size: .9rem; }
.nx-faixa-texto { flex: 1 1 260px; }
/* Cores fixas: o style.css global deixa o texto de .btn escuro */
.nx-faixa-botao { white-space: nowrap; background: #1f2937 !important; border-color: #1f2937 !important; color: #fff !important; }
.nx-faixa-botao:hover { background: #111827 !important; }
@media (max-width: 575.98px) { .nx-faixa-botao { width: 100%; } }
.nx-faixa-info   { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.nx-faixa-alerta { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.nx-faixa-perigo { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }