/* ── SHELL & SIDEBAR ──────────────────────────────── */
    .shell { display: flex; min-height: 100vh; background: var(--bg); }

    /* Trilho estreito: ícone grande em cima, nome curto embaixo. Sem modo
       recolhido — já ocupa pouco da tela. */
    .sidebar {
      width: 92px; flex-shrink: 0;
      background: var(--ink);
      border-right: 1px solid var(--ink-line);
      display: flex; flex-direction: column;
      position: sticky; top: 0; height: 100vh;
      z-index: 40;
    }
    .sidebar .brand {
      display: flex; align-items: center; justify-content: center;
      padding: 16px 0 14px;
    }
    .brand .mark { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; object-fit: contain; }

    .nav {
      flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
      padding: 8px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .nav::-webkit-scrollbar { display: none; }
    /* Título de grupo: mais claro que os rótulos dos itens, em caixa alta, e uma
       linha separa cada grupo do anterior. */
    .nav-label {
      font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
      color: color-mix(in srgb, var(--ink-icon) 65%, white); text-align: center; padding: 14px 0 6px;
    }
    .nav-label { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--ink-line); }   /* inclusive o 1º grupo: divisória recuada sob o logo (não encosta na borda, então não desalinha do cabeçalho) */
    .nav-item {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
      padding: 12px 2px 10px; border-radius: 12px;
      font-size: 11px; font-weight: 500; line-height: 1.15; color: var(--ink-fg);
      cursor: pointer; border: none; background: none; width: 100%; text-align: center;
      transition: all .15s;
    }
    .nav-item .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-ico { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
    .nav-item svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--ink-icon); transition: color .15s; }
    .nav-item:hover { background: var(--ink-2); color: var(--ink-fg-hi); }
    .nav-item:hover svg { color: #fff; }
    .nav-item.active {
      background: linear-gradient(90deg, var(--accent-strong), var(--accent));
      color: #fff; font-weight: 600;
      box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-strong) 45%, transparent);
    }
    .nav-item.active svg { color: #fff; }
    /* Cada item traz o ícone duotone e o fill; o ativo mostra o fill. */
    .nav-item .ico-ativo, .nav-item.active .ico-normal { display: none; }
    .nav-item.active .ico-ativo { display: block; }
    /* Contador do menu: âmbar = tem coisa esperando você (mesma cor do
       "pendente" no resto do app). Some quando é zero — "0" não diz nada. */
    .nav-item .count {
      position: absolute; top: -7px; right: -13px;
      min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
      font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
      background: #b45309; color: #fff; box-shadow: 0 0 0 2px var(--ink);
    }
    .nav-item .count[hidden] { display: none; }
    .nav-item .count.so-normal { background: var(--info-fill); }   /* só há requisições normais (de aplicativos): azul, sem urgência */
    .nav-spacer { flex: 1; }

    /* Rodapé: seletor de módulos (a lista abre para cima do botão) */
    .sidebar-footer {
      position: relative; padding: 16px 8px 26px;
      margin-top: auto; background: var(--ink);
    }
    /* divisória recuada, igual às dos grupos do menu (não uma linha de ponta a ponta) */
    .sidebar-footer::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; border-top: 1px solid var(--ink-line); }
    .modulo-btn.aberto { background: var(--ink-2); color: var(--ink-fg-hi); }
    .modulo-btn.aberto svg { color: #fff; }
    .modulo-item {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 9px 10px; border-radius: 10px; border: none; background: none;
      color: var(--ink-fg-hi); text-align: left; cursor: pointer; font: inherit;
    }
    .modulo-item:hover { background: var(--ink); }
    .modulo-item.ativo { background: rgba(255, 255, 255, .06); }
    .modulo-item .mark { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex-shrink: 0; }
    .modulo-txt { min-width: 0; }
    .modulo-txt b { display: block; font-size: var(--fs-sm); font-weight: 600; }
    .modulo-txt small { display: block; font-size: var(--fs-xs); color: var(--ink-fg-2); }
    .modulo-item > svg { margin-left: auto; width: 16px; height: 16px; color: var(--ink-ok); flex-shrink: 0; }

    /* monitorando = verde pulsando · aguardando = azul · iniciando = âmbar · erro = vermelho */
    .status-pulse-dot {
      width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
      background: var(--ink-ok); box-shadow: 0 0 0 3px rgba(95,211,154,.25);
      animation: pulso 2s ease-in-out infinite;
    }
    .status-pulse-dot.aguardando { background: var(--ink-info); box-shadow: 0 0 0 3px rgba(122,168,255,.22); animation: none; }
    .status-pulse-dot.iniciando  { background: var(--ink-warn); box-shadow: 0 0 0 3px rgba(251,191,36,.22); }
    .status-pulse-dot.erro       { background: var(--ink-danger); box-shadow: 0 0 0 3px rgba(248,113,113,.28); animation: none; }

    /* ── MAIN SHELL & TOP HEADER ──────────────────────── */
    .main-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

    .top-header {
      height: 64px; background: var(--surface);
      border-bottom: 1px solid var(--border);
      /* Máscara global invisível (16px) projetada para baixo.
         Protege o gap visual de 16px para que o conteúdo que rola
         sob o cabeçalho desapareça suavemente sem vazar texto. */
      box-shadow: 0 16px 0 0 var(--bg);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 28px; position: sticky; top: 0; z-index: 30; gap: 24px;
    }

    /* Progresso da verificação do robô — no lugar do título da aba, visível
       em todas as abas. Sem cara de card: o cabeçalho já é a superfície. O
       spinner animado é o "trabalhando" e some quando a verificação termina
       (aí a barra fica verde). */
    .live-progress-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 24px; }
    .lp-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .lp-badge-row { display: flex; align-items: center; gap: 6px; }
    .lp-spin { width: 16px; height: 16px; flex-shrink: 0; color: var(--info-fill); }
    .lp-tag { font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); white-space: nowrap; }
    .lp-empresa-row {
      display: flex; align-items: baseline; gap: 8px; min-width: 0;
      font-size: var(--fs-lg); font-weight: 700; color: var(--text); letter-spacing: -.01em;
    }
    .lp-razao { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lp-sep { color: var(--border-strong); font-weight: 300; }
    .lp-cnpj { flex-shrink: 0; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--text-dim); }

    .top-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .top-btn {
      width: auto; padding: 8px 14px; font-size: var(--fs-sm); font-weight: 600; border-radius: 8px;
      display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    }
    .top-btn svg { width: 16px; height: 16px; }
    .top-btn.done { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
    .top-icon-btn {
      position: relative;
      width: 34px; height: 34px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--surface);
      display: grid; place-items: center; cursor: pointer; color: var(--text-dim);
    }
    .top-icon-btn:hover { background: var(--surface-2); color: var(--text); }
    .top-icon-btn svg { width: 18px; height: 18px; }
    /* Bolinha do sino: nº de avisos/erros não lidos — âmbar, ou vermelha se algum for erro. */
    .bell-badge {
      position: absolute; top: -6px; right: -6px;
      min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
      background: #b45309; color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 18px; text-align: center;
      box-shadow: 0 0 0 2px var(--surface);
    }
    .bell-badge.erro { background: var(--danger); }
    .bell-badge[hidden] { display: none; }

    /* ── MAIN VIEW ────────────────────────────────────── */
    /* `overflow-x: clip` (não `hidden`) de propósito: `hidden` força o navegador
       a computar `overflow-y: auto` também, transformando o .main num scroll
       container próprio — aí o `position: sticky` da lista (.co-list, na aba
       Pendências/Matriz) passa a "grudar" relativo ao .main em vez da janela,
       e a lista pula pra baixo assim que o painel de detalhe fica mais alto
       que a lista. `clip` recorta o eixo X sem criar esse scroll container. */
    .main { flex: 1; min-width: 0; padding: 24px 28px 48px; overflow-x: clip; }
    .view { display: none; }
    .view.active { display: block; animation: fade .18s ease; }
    .view-head { display: none; }
    .view-head h2 { font-size: var(--fs-xl); }
    .view-head p { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 3px; }

    .card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow);
    }
    .card-head {
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .card-head h3 { font-size: var(--fs-md); }
    .card-body { padding: 16px; }