*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    [hidden] { display: none !important; }

    /* ══ Tokens ═══════════════════════════════════════════════════════════
       Toda cor e todo tamanho de fonte do app saem daqui — nada de hex solto
       no resto do arquivo nem no JS. Duas regras valem pra tela inteira:

       COR TEM SIGNIFICADO FIXO
       - roxo de marca (--accent) = interação: botão principal, item
         selecionado, filtro ativo, foco, link. Nunca status.
       - cada status tem a própria cor, forte o bastante pra ler de relance:
           verde   = concluído (OK, aprovado)
           âmbar   = pendente — falta alguém agir
           vermelho= revisão / erro — voltou com problema
           azul    = em processo — andando, sem ação sua
           violeta = análise do cliente — na mão de outro
         Só o "não se aplica" (N.A.) é cinza. A regra antiga (estado normal
         em cinza) deixou o sistema apagado e escondia o pendente.
       - cada cor tem 3 tons: texto (legível sobre o fundo suave), fundo
         suave (pill, ícone) e preenchimento (barra, bolinha).

       UMA ESCALA DE TEXTO
       - 12 / 13 / 14 / 16 / 20 / 28px, nada abaixo de 12.
       - Números na própria Instrument Sans, com algarismos tabulares (ver
         body); mono só no CNPJ (e nos exemplos de código dos cadastros).
       - Caixa alta só no cabeçalho de tabela: os nomes das empresas já vêm
         em caixa alta do Linkana, e o resto da interface contrasta com eles. */
    :root {
      --ease: cubic-bezier(.2, .8, .2, 1);   /* curva única do movimento: entra rápido, assenta devagar */
      --bg:            #eff0fa;   /* fundo com um toque de marca, não cinza puro */
      --surface:       #ffffff;
      --surface-2:     #f5f5fd;   /* hover, cabeçalho de tabela */
      --surface-3:     #eceef8;   /* trilho de barra, pill neutra, quadro de ícone */
      --border:        #e1e3f0;
      --border-strong: #c5cae4;
      --text:          #171a2b;   /* contraste 17:1 no branco */
      --text-dim:      #4b5169;   /* 7.8:1 */
      --text-mut:      #676d8c;   /* 5:1 — o mínimo pra texto pequeno é 4.5 */

      --accent:        #5544c4;
      --accent-strong: #4232a3;   /* hover do botão principal, item ativo do menu */
      --accent-soft:   #efedfa;
      --accent-border: #cdc6f2;

      /* status: texto · fundo suave · preenchimento (barra, bolinha).
         Contraste conferido: texto sobre fundo suave >= 5.4:1; preenchimento
         sobre branco >= 3.4:1. `-soft` é o fundo pra áreas grandes (banner),
         mais leve que o da pill. */
      --ok:     #0f6b41;  --ok-bg:     #d5f0e2;  --ok-fill:     #1f9d63;  --ok-soft:     #ebf8f1;
      --warn:   #8a4b00;  --warn-bg:   #ffe6b3;  --warn-fill:   #cc7400;  --warn-soft:   #fff5d9;
      --danger: #a31d15;  --danger-bg: #ffd9d4;  --danger-fill: #dc3a30;  --danger-soft: #fff0ee;
      --info:   #1a4fb5;  --info-bg:   #dbe8ff;  --info-fill:   #2f6fe0;  --info-soft:   #eef4ff;
      --violet: #6432b8;  --violet-bg: #eadffd;  --violet-fill: #8b4fe0;  --violet-soft: #f6f1ff;
      --data:   #737a9b;  /* N.A. e o que não tem status */

      /* menu lateral e superfícies escuras (tooltip, toast) */
      --ink:        #1e1936;
      --ink-2:      #282245;
      --ink-line:   #332c54;
      --ink-fg:     #a3a9c8;
      --ink-fg-2:   #8087ad;
      --ink-fg-hi:  #f3f4fa;
      --ink-ok:     #5fd39a;
      --ink-warn:   #fbbf24;
      --ink-danger: #f87171;
      --ink-info:   #7aa8ff;
      --ink-icon:   #b4aaf8;   /* ícone do menu, com o toque de marca */

      --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
      --fs-xs:  12px;   /* rótulos, metadados, pills, cabeçalho de tabela */
      --fs-sm:  13px;   /* tabelas, listas, botões */
      --fs-md:  14px;   /* texto base, título de card */
      --fs-lg:  16px;   /* título da ficha e de modal */
      --fs-xl:  20px;   /* título da página, números da ficha */
      --fs-2xl: 28px;   /* números dos cartões do Resumo */

      --radius: 12px;
      --shadow: 0 1px 2px rgba(23,26,43,.04);
      --nav-w:  250px;
      --head-h: 60px;
    }

    html, body { height: 100%; }
    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      font-size: var(--fs-md);
      line-height: 1.45;
      font-variant-numeric: tabular-nums;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
    a { color: var(--accent); text-decoration: none; }
    button { font-family: inherit; }

    /* Ícones (Phosphor, ver icones.js): 1em por padrão; cada componente
       ajusta o tamanho no próprio seletor (.nav-item svg, .btn svg…). */
    .icone { width: 1em; height: 1em; flex-shrink: 0; }
    /* Marcador <i data-icone> antes de virar <svg> — reserva o espaço pra
       nada pular quando o ícone entra. */
    i[data-icone] { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; }

    /* ── 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; border-bottom: 1px solid var(--ink-line);
    }
    .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 ~ .nav-label { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--ink-line); }
    .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-spacer { flex: 1; }

    /* Rodapé: seletor de módulos (a lista abre para cima do botão) */
    .sidebar-footer {
      position: relative; padding: 8px 8px 26px; border-top: 1px solid var(--ink-line);
      margin-top: auto; background: var(--ink);
    }
    .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; }

    /* ── KPI (Resumo) ─────────────────────────────────── */
    /* Mesma linguagem do resto do sistema: cartão plano, barra de acento na
       lateral (como o aviso de confirmação e as etapas do fluxo), ícone em
       quadro suave (como os números da ficha de Pendências). Nada de
       degradê, sombra colorida nem animação de hover. */
    .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
    .kpi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
    .kpi {
      --kpi-cor: var(--border-strong); --kpi-bg: var(--surface-3); --kpi-txt: var(--text-dim);
      position: relative; overflow: hidden; padding: 16px 18px 16px 22px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: var(--shadow), inset 4px 0 0 var(--kpi-cor);
    }
    .kpi .k { font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); padding-right: 44px; }
    .kpi .v { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-top: 10px; color: var(--kpi-txt); }
    .kpi .s { font-size: var(--fs-xs); color: var(--text-mut); margin-top: 4px; }
    .kpi-ico {
      position: absolute; top: 14px; right: 14px;
      width: 34px; height: 34px; border-radius: 9px;
      display: grid; place-items: center;
      background: var(--kpi-bg); color: var(--kpi-txt);
    }
    .kpi-ico svg { width: 20px; height: 20px; }
    /* azul = fornecedores, âmbar = pendentes, vermelho = fiscais (risco legal), verde = concluído */
    .kpi.info   { --kpi-cor: var(--info-fill);   --kpi-bg: var(--info-bg);   --kpi-txt: var(--info); }
    .kpi.warn   { --kpi-cor: var(--warn-fill);   --kpi-bg: var(--warn-bg);   --kpi-txt: var(--warn); }
    .kpi.danger { --kpi-cor: var(--danger-fill); --kpi-bg: var(--danger-bg); --kpi-txt: var(--danger); }
    .kpi.ok     { --kpi-cor: var(--ok-fill);     --kpi-bg: var(--ok-bg);     --kpi-txt: var(--ok); }

    /* Conclusão: % grande, quanto foi enviado e a barra dividida por status. */
    .kc-body { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 12px; }
    .kc-body .v { margin-top: 0; }
    .kc-meta { font-size: var(--fs-xs); color: var(--text-mut); line-height: 1.35; }
    .kc-meta b { color: var(--text); font-weight: 600; }
    .stacked-bar {
      height: 8px; border-radius: 999px; background: var(--surface-3);
      overflow: hidden; display: flex; width: 100%; margin-bottom: 10px;
    }
    .sb-seg { height: 100%; transition: width .4s ease; }
    .sb-enviados  { background: var(--ok-fill); }
    .sb-pendentes { background: var(--warn-fill); }
    .sb-revisao   { background: var(--danger-fill); }
    .sb-na        { background: var(--border-strong); }
    .stacked-legend {
      display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
      font-size: var(--fs-xs); color: var(--text-dim);
    }
    .stacked-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
    .dot-ok     { background: var(--ok-fill); }
    .dot-warn   { background: var(--warn-fill); }
    .dot-danger { background: var(--danger-fill); }
    .dot-na     { background: var(--border-strong); }

    .res-vazio { padding: 22px 8px; text-align: center; font-size: var(--fs-sm); color: var(--text-mut); }
    .card-clean {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow);
      display: flex; flex-direction: column;
    }
    .card-head-clean {
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .card-head-clean h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text); margin: 0; }
    .card-head-extra { font-size: var(--fs-xs); color: var(--text-mut); font-weight: 500; }

    /* Categoria: barras lisas na cor de cada uma, duas colunas. */
    .cat-custom-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 44px; padding: 20px; }
    .cat-item { display: flex; flex-direction: column; gap: 6px; }
    .cat-item-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); }
    .cat-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
    .cat-name::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--cat-cor, var(--data)); flex-shrink: 0; }
    .cat-nums { font-size: var(--fs-xs); color: var(--text-mut); }
    .cat-nums b { font-size: var(--fs-sm); color: var(--text); }
    .cat-track { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; width: 100%; }
    .cat-fill { height: 100%; border-radius: 999px; background: var(--cat-cor, var(--data)); transition: width .4s ease; }

    /* ── PROGRESS ─────────────────────────────────────── */
    .progress {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow);
      padding: 12px 16px; margin-bottom: 18px;
    }
    .progress-top { display: flex; justify-content: space-between; font-size: var(--fs-xs); margin-bottom: 8px; }
    .progress-top .lbl { font-weight: 500; }
    .progress-top .cnt { color: var(--text-dim); }
    .track { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
    .track > i { display: block; height: 100%; background: var(--info-fill); border-radius: 999px; width: 0; transition: width .4s ease; }

    /* ── TABLE ────────────────────────────────────────── */
    .tbl-wrap { overflow-x: auto; }
    table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
    table.tbl th {
      position: sticky; top: 0; background: var(--surface-2); z-index: 1;
      font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
      color: var(--text-mut); text-align: left; padding: 9px 11px;
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    table.tbl th.sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
    table.tbl th.sortable:hover { color: var(--text); }
    table.tbl th .arw { opacity: .4; font-size: var(--fs-xs); }
    table.tbl th.sorted .arw { opacity: 1; }
    table.tbl td { padding: 9px 11px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    table.tbl tbody tr:last-child td { border-bottom: none; }
    table.tbl tbody tr:hover { background: var(--surface-2); }
    .num { text-align: right; font-size: var(--fs-xs); }

    /* Ações da linha (editar, abrir no Linkana) só aparecem no hover — com
       um lápis em cada linha, a coluna vira um paredão de ícones. Continuam
       alcançáveis pelo teclado (foco) e sempre visíveis em tela de toque. */
    .row-acao { opacity: 0; transition: opacity .12s; }
    tr:hover .row-acao, .doc-row:hover .row-acao,
    tr:focus-within .row-acao, .doc-row:focus-within .row-acao { opacity: 1; }
    @media (hover: none) { .row-acao { opacity: 1; } }
    /* Coluna de editar/excluir encolhe até o tamanho dos botões — com largura
       fixa (80px) os dois não cabiam lado a lado e dobravam a altura da linha. */
    table.tbl .col-acoes { width: 1%; white-space: nowrap; }

    .pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
    }
    /* Uma cor por status (ver tokens): a pill é o jeito mais rápido de ler a linha. */
    .pill.ok      { background: var(--ok-bg);     color: var(--ok); }       /* OK, aprovado */
    .pill.pend,
    .pill.warn    { background: var(--warn-bg);   color: var(--warn); }     /* pendente, verificar, confirmar */
    .pill.edit    { background: var(--danger-bg); color: var(--danger); }   /* revisão */
    .pill.proc    { background: var(--info-bg);   color: var(--info); }     /* em processo */
    .pill.analise { background: var(--violet-bg); color: var(--violet); }   /* análise do cliente */
    .pd-li-top .pill::before { display: none; }   /* nas listas a pill é só o número */
    .pill.na      { background: none; color: var(--text-mut); box-shadow: inset 0 0 0 1px var(--border); }
    /* Bolinha que antecede o texto — reforça a cor sem depender só do fundo. */
    .pill.ok::before, .pill.pend::before, .pill.warn::before, .pill.edit::before,
    .pill.proc::before, .pill.analise::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
    }

    .cad-form-status {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 12px; border-radius: 7px; font-size: var(--fs-sm); font-weight: 600;
      margin-bottom: 12px;
    }
    .cad-form-status svg { width: 14px; height: 14px; }
    .cad-form-status.novo     { background: var(--surface-3); color: var(--text-dim); }
    .cad-form-status.editando { background: var(--accent-soft); color: var(--accent); }
    tr.cad-row-editing { background: var(--accent-soft) !important; }
    tr.cad-row-editing td { color: var(--accent); font-weight: 600; }

    .doc-lista { display: flex; flex-direction: column; }
    .doc-row {
      display: flex; align-items: center; gap: 10px; padding: 9px 6px;
      border-bottom: 1px solid var(--border); cursor: grab; border-top: 2px solid transparent;
    }
    .doc-row:last-child { border-bottom: none; }
    .doc-row.dragging { opacity: .4; }
    .doc-row.drag-over { border-top-color: var(--accent); }
    .doc-drag { display: flex; color: var(--text-mut); -webkit-user-select: none; user-select: none; flex-shrink: 0; }
    .doc-drag svg { width: 16px; height: 16px; }
    .doc-codigo { font-size: var(--fs-xs); color: var(--text-mut); width: 50px; flex-shrink: 0; }
    .doc-desc { flex: 1; font-size: var(--fs-sm); min-width: 0; }
    .doc-setor { font-size: var(--fs-xs); color: var(--text-dim); width: 90px; flex-shrink: 0; }
    .doc-acoes { display: flex; gap: 4px; flex-shrink: 0; }
    .empty-mini { padding: 14px 6px; color: var(--text-mut); font-size: var(--fs-xs); }

    .search {
      display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%;
      padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
    }
    .search svg { width: 16px; height: 16px; color: var(--text-mut); flex-shrink: 0; }
    .search input { border: none; outline: none; font: inherit; font-size: var(--fs-sm); width: 100%; background: none; color: var(--text); }

    .empty { padding: 48px 20px; text-align: center; color: var(--text-mut); }
    .empty svg { width: 40px; height: 40px; margin-bottom: 8px; }
    .empty .ico-ok { color: var(--ok-fill); }
    .empty p { font-size: var(--fs-sm); }

    /* ── PENDÊNCIAS E-MAIL ────────────────────────────── */
    .email-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
    .email-block table.tbl { table-layout: fixed; }
    .email-block table.tbl th:nth-child(1) { width: 42%; }
    .email-block table.tbl th:nth-child(2) { width: 96px; }
    .email-block table.tbl th:nth-child(3) { width: 96px; }
    .email-block table.tbl td { white-space: normal; word-break: break-word; }
    .email-block > header {
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .email-block h3 { font-size: var(--fs-md); }
    .email-block .sub { font-size: var(--fs-xs); color: var(--text-dim); font-family: var(--mono); margin-top: 2px; }
    .email-block .tag { font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); }
    .email-block .tag.none { font-style: italic; }
    .email-block .tag.warn { color: var(--warn); }
    .btn-copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; }
    .btn-copy:hover { background: var(--surface-2); color: var(--text); }
    .btn-copy.done { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
    .btn-copy svg { width: 14px; height: 14px; }
    a.btn-copy { text-decoration: none; }

    /* ── POR EMPRESA (MASTER-DETAIL SPLIT) ────────────── */
    #view-pendencias .split, #view-matriz .split {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    #view-pendencias .co-list li, #view-matriz .co-list li {
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
    }
    /* Matriz: selo de status à direita do card — o item volta a ser uma
       LINHA (nome/CNPJ empilhados à esquerda, selo centralizado à direita),
       por isso sobrescreve o `column` da regra acima. */
    #view-matriz .co-list li {
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }
    .mat-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    /* Selo de "Status aprovação" — mesma cor do resto do app: em processo é
       azul, análise do cliente é violeta, aprovado é verde. Sem faixa nem
       fundo tingido no card: o selo já diz o status, e o roxo de marca fica
       só pro item selecionado. */
    .mat-li-status {
      flex-shrink: 0;
      width: 26px; height: 26px;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .mat-li-status svg { width: 14px; height: 14px; }
    .mat-li-status.proc     { background: var(--info-bg);   color: var(--info); }
    .mat-li-status.analise  { background: var(--violet-bg); color: var(--violet); }
    .mat-li-status.aprovado { background: var(--ok-bg);     color: var(--ok); }
    .mat-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .mat-toolbar .subtabs { margin-bottom: 0; }
    .mat-toolbar .btn, .mat-toolbar .subtab { height: 34px; }
    .mat-aviso { color: var(--warn); }
    .co-list li.mat-vazio { color: var(--text-mut); cursor: default; }
    .co-list li.mat-vazio:hover { background: none; }
    .mat-cad {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface-2);
      margin-bottom: 18px;
      overflow: hidden;
    }
    .mat-cad > summary {
      display: flex; align-items: center; gap: 8px;
      cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
      padding: 11px 14px; list-style: none; -webkit-user-select: none; user-select: none;
      transition: background .12s;
    }
    .mat-cad > summary::-webkit-details-marker { display: none; }
    .mat-cad > summary:hover { background: var(--surface); }
    .mat-cad > summary svg { width: 14px; height: 14px; color: var(--text-mut); flex-shrink: 0; transition: transform .15s; }
    .mat-cad[open] > summary { border-bottom: 1px solid var(--border); }
    .mat-cad[open] > summary svg { transform: rotate(90deg); }
    .mat-cad-body { padding: 14px; }
    .mat-sec-titulo { font-size: var(--fs-md); font-weight: 600; margin: 20px 0 10px; }
    .mat-sec-titulo .sub { font-size: var(--fs-xs); font-weight: 400; color: var(--text-mut); margin-left: 4px; }
    /* Origem da etapa (robô, manual, migração) e marcas do documento
       (divergente, manual): ícone com tooltip no lugar do valor cru do banco. */
    .mat-origem { display: inline-flex; color: var(--text-mut); }
    .mat-origem svg { width: 16px; height: 16px; }
    .mat-doc-flag { display: inline-flex; vertical-align: middle; margin-left: 6px; }
    .mat-doc-flag svg { width: 15px; height: 15px; }
    .mat-doc-flag.divergente { color: var(--warn-fill); }
    .mat-doc-flag.manual { color: var(--text-mut); }
    /* Fluxo da homologação: as 9 etapas que a pessoa preenche. Cada linha é o
       próprio campo (data ou status), sem modo "editar". */
    .fx-progresso { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: -2px 0 12px; }
    .fx-progresso i { display: block; height: 100%; border-radius: 999px; background: var(--ok-fill); transition: width .4s ease; }
    .fx { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
    .fx-item {
      display: grid; grid-template-columns: 26px minmax(180px, 1fr) minmax(210px, 280px) minmax(120px, 190px);
      align-items: center; column-gap: 14px; padding: 9px 14px;
      border-bottom: 1px solid var(--border); background: var(--surface);
    }
    .fx-item:last-child { border-bottom: none; }
    .fx-item:hover { background: var(--surface-2); }
    .fx-item.sugerida { background: var(--info-soft); box-shadow: inset 4px 0 0 var(--info-fill); }
    .fx-item.falta    { box-shadow: inset 4px 0 0 var(--warn-fill); }
    .fx-marco {
      width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
      display: grid; place-items: center; border: 2px solid var(--border-strong); color: var(--text-mut);
    }
    .fx-marco svg { width: 13px; height: 13px; }
    .fx-item.feita .fx-marco { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
    .fx-item.falta .fx-marco { background: var(--warn-soft); border-color: var(--warn-fill); color: var(--warn); }
    .fx-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .fx-n { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
    .fx-item.vazia .fx-n { color: var(--text-dim); font-weight: 500; }
    .fx-setor { font-size: var(--fs-xs); font-weight: 500; color: var(--text-mut); background: var(--surface-3); padding: 0 7px; border-radius: 999px; }
    .fx-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .fx-ctl .fx-data { flex: 1; min-width: 0; }
    .fx-ctl .fx-sel, .fx-ctl .sel { flex: 1; min-width: 0; }
    /* Valor preenchido colorido (a célula da antiga planilha): borda e fundo na cor do status. */
    .fx-ctl.v-ok .sel-btn      { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-fill);     font-weight: 600; }
    .fx-ctl.v-analise .sel-btn { background: var(--violet-bg); color: var(--violet); border-color: var(--violet-fill); font-weight: 600; }
    .fx-ctl.v-proc .sel-btn    { background: var(--info-bg);   color: var(--info);   border-color: var(--info-fill);   font-weight: 600; }
    .fx-ctl.v-pend .sel-btn    { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-fill);   font-weight: 600; }
    .fx-ctl.v-data .fx-data    { border-color: var(--ok-fill); background: var(--ok-soft); }
    .fx-limpar {
      width: 26px; height: 26px; flex-shrink: 0; border: none; background: none; border-radius: 6px;
      display: grid; place-items: center; cursor: pointer; color: var(--text-mut); transition: background .12s, color .12s;
    }
    .fx-item:hover .fx-limpar, .fx-item:focus-within .fx-limpar { opacity: 1; }   /* .row-acao só revelava em tr/.doc-row */
    .fx-limpar:hover { background: var(--danger-bg); color: var(--danger); }
    .fx-limpar svg { width: 14px; height: 14px; }
    .fx-hoje {
      flex-shrink: 0; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
      padding: 6px 10px; border-radius: 7px; border: 1px dashed var(--border-strong);
      background: var(--surface); color: var(--text-dim); transition: all .15s;
    }
    .fx-hoje:hover { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .fx-origem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .fx-sugerido {
      display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600;
      color: var(--info); background: var(--info-bg); padding: 2px 8px; border-radius: 999px;
    }
    .fx-sugerido svg { width: 14px; height: 14px; }
    .fx-conf {
      font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
      padding: 4px 10px; border-radius: 7px; border: 1px solid var(--info-fill);
      background: var(--surface); color: var(--info); transition: all .15s;
    }
    .fx-conf:hover { background: var(--info-fill); color: #fff; }

    /* Confirmação de situação: o robô não acha mais nada pra postar e a pessoa
       diz se foi pra análise do cliente ou se já foi aprovada. Fica no topo da
       ficha, com cada botão na cor do status que ele grava. */
    .conf {
      display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px;
      padding: 16px 18px; border-radius: 12px;
      background: var(--warn-soft); box-shadow: inset 4px 0 0 var(--warn-fill);
    }
    .conf-ic {
      flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
      display: grid; place-items: center; background: var(--warn-bg); color: var(--warn);
    }
    .conf-ic svg { width: 24px; height: 24px; }
    .conf-txt { min-width: 0; }
    .conf-tit { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
    .conf-det { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; margin-top: 3px; }
    .conf-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .conf .conf-btn { width: auto; padding: 9px 16px; }   /* .conf na frente: .btn (width:100%) vem depois no arquivo */
    .conf-btn.analise { background: var(--violet-fill); color: #fff; }
    .conf-btn.analise:hover { background: var(--violet); }
    .conf-btn.ok { background: var(--ok-fill); color: #fff; }
    .conf-btn.ok:hover { background: var(--ok); }
    .conf-ou { font-size: var(--fs-xs); color: var(--text-mut); }
    .conf-data { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); }
    .conf-data input { padding: 7px 10px; }
    .pd-li-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
    .pd-li-top .nm { font-weight: 600; font-size: var(--fs-md); line-height: 1.35; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pd-li-sub { font-size: var(--fs-xs); color: var(--text-mut); font-weight: 400; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
    .li-chip { font-size: var(--fs-xs); font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .li-chip.alerta { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
    .li-chip.alerta::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn-fill); margin-right: 6px; vertical-align: 1px; }
    .pd-li-sub .mono { font-family: var(--mono); }
    .co-list li.active .pd-li-sub { color: var(--accent); opacity: .85; }
    .pd-li-top .pill { flex-shrink: 0; }

    /* Sticky Master Column */
    /* A altura precisa caber mesmo ANTES da lista "grudar" no scroll (quando
       sua posição normal no fluxo, ~136px do topo — header + toolbar acima —
       ainda é maior que o `top` do sticky). Descontar só o `top` deixava a
       lista mais alta que o espaço disponível nesse estado inicial e cortava
       as últimas empresas; por isso o desconto usa a posição real de
       repouso (~136px), não o `top` do sticky. */
    .co-list {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 80px;
      height: calc(100vh - 140px);
      max-height: calc(100vh - 140px);
    }
    .co-list .search {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      flex-shrink: 0;
    }
    .co-list ul {
      list-style: none;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      margin: 0;
      padding: 10px 12px 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      scrollbar-width: thin;
    }
    /* Item = cartão solto, com respiro. A barra lateral cresce no hover e fica
       cheia no selecionado; o nome nunca quebra (termina em "…"). */
    .co-list li {
      position: relative;
      flex-shrink: 0;
      padding: 15px 16px 15px 20px;
      font-size: var(--fs-sm);
      cursor: pointer;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background .35s;
    }
    .co-list li::before {
      content: ''; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px;
      background: var(--accent); transform: scaleY(0); transition: transform .4s var(--ease);
    }
    .co-list li:hover { transform: translateX(3px); border-color: var(--accent-border); box-shadow: 0 6px 18px rgba(23, 26, 43, .07); }
    .co-list li:hover::before { transform: scaleY(.5); }
    .co-list li:active { transform: translateX(3px) scale(.992); }
    .co-list li.active { background: var(--accent-soft); border-color: var(--accent-border); }
    .co-list li.active::before { transform: scaleY(1); }
    .co-list li.active .nm { color: var(--accent-strong); }
    /* Entrada em cascata (lista-movimento.js): `cs` fica invisível até o
       observador chamar (`in`); `quieto` = reaparece parado. */
    .co-list li.cs { opacity: 0; }
    .co-list li.cs.in { opacity: 1; animation: listaEntra .6s var(--ease) var(--d, 0ms) backwards; }
    .co-list li.cs.in.quieto { animation: none; }
    @keyframes listaEntra { from { opacity: 0; transform: translateY(var(--dy, 10px)); } }
    @keyframes fichaEntra { from { opacity: 0; transform: translateY(8px); } }
    .troca > * { animation: fichaEntra .55s var(--ease) backwards; }
    .troca > *:nth-child(2) { animation-delay: 70ms; }
    .troca > *:nth-child(3) { animation-delay: 140ms; }
    .troca > *:nth-child(4) { animation-delay: 210ms; }
    .troca > *:nth-child(n+5) { animation-delay: 280ms; }
    @media (prefers-reduced-motion: reduce) {
      .co-list li.cs { opacity: 1; }
      .co-list li.cs.in, .troca > * { animation: none; }
      .co-list li, .co-list li::before { transition: none; }
    }
    .co-select {
      display: none;
      width: 100%;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      font: inherit;
      font-size: var(--fs-sm);
      background: var(--surface);
      margin-bottom: 14px;
    }

    /* Detail Card Header */
    .co-detail {
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    /* O gap visual de 16px agora é protegido pela máscara .main::before,
       então o cabeçalho gruda perfeitamente aos 80px sem precisar de
       gambiarra com padding-top e background cinza por cima do card. */
    .co-detail .co-hd {
      position: sticky;
      top: 80px;
      z-index: 5;
      background: var(--surface);
      border-radius: var(--radius) var(--radius) 0 0;
    }
    .co-hd-inner {
      border-radius: var(--radius) var(--radius) 0 0;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--surface);
    }
    .pd-hd-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .pd-hd-main h3 {
      font-size: var(--fs-lg);
      font-weight: 700;
      color: var(--text);
      margin: 0;
      line-height: 1.3;
      word-break: break-word;
    }
    /* CNPJ · local · tipo/PED como texto corrido — sem uma caixinha com
       borda pra cada pedaço. */
    .pd-hd-tags {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: var(--fs-sm);
      color: var(--text-dim);
    }
    .pd-cnpj {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: var(--mono);
      font-size: var(--fs-xs);
      color: var(--text);
      padding: 2px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background .12s;
    }
    .pd-cnpj:hover { background: var(--surface-3); }
    .pd-cnpj button {
      border: none;
      background: none;
      color: var(--text-mut);
      padding: 2px;
      cursor: pointer;
      line-height: 1;
      display: flex;
      align-items: center;
      pointer-events: none;
    }
    .pd-cnpj:hover button { color: var(--text); }
    .pd-cnpj button svg { width: 14px; height: 14px; }
    .pd-sep { color: var(--border-strong); }
    .pd-meta { color: var(--text-dim); }
    .tag-tipo {
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--text-dim);
      background: var(--surface-3);
      padding: 2px 7px;
      border-radius: 5px;
    }

    .pd-hd-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .pd-chips-group {
      display: flex;
      align-items: center;
      gap: 6px 18px;
      flex-wrap: wrap;
    }
    .pd-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 92px;
      line-height: 1.15;
    }
    .pd-chip .ico {
      display: grid; place-items: center; flex-shrink: 0;
      width: 34px; height: 34px; border-radius: 9px;
      background: var(--surface-3); color: var(--text-dim);
    }
    .pd-chip .ico svg { width: 20px; height: 20px; }
    .pd-chip b { font-size: var(--fs-xl); font-weight: 700; color: var(--text); line-height: 1.1; display: block; }
    .pd-chip .lbl2 { font-size: var(--fs-xs); font-weight: 500; color: var(--text-mut); }
    /* Cada número leva a cor do seu status. "0" em enviados/revisão volta a
       neutro (.zero): "0 em revisão" não é alarme. */
    .pd-chip.info .ico { background: var(--info-bg);   color: var(--info); }
    .pd-chip.info b    { color: var(--info); }
    .pd-chip.ok:not(.zero) .ico  { background: var(--ok-bg);     color: var(--ok); }
    .pd-chip.ok:not(.zero) b     { color: var(--ok); }
    .pd-chip.pend .ico { background: var(--warn-bg);   color: var(--warn); }
    .pd-chip.pend b    { color: var(--warn); }
    .pd-chip.rev:not(.zero) .ico { background: var(--danger-bg); color: var(--danger); }
    .pd-chip.rev:not(.zero) b    { color: var(--danger); }
    .pd-acoes {
      display: flex;
      gap: 8px 12px;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
    }
    .pd-acoes-btns {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      margin-left: auto;
    }
    .pd-verificacao { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text-mut); }
    .pd-verificacao svg { width: 14px; height: 14px; }
    /* Pra quem vai o e-mail (Pendências ▸ ficha). Antes truncava o pill
       INTEIRO num max-width apertado (200px) sem `min-width:0` no filho —
       clássica armadilha do flex: o texto cortava no meio do domínio e nem
       sempre mostrava reticências. Agora só o e-mail em si trunca (com
       elipse garantida), ícone e selo "e-mail da matriz" ficam de fora do
       corte, e o title já mostra o destino completo sem precisar abrir o
       menu Ações. */
    .pd-destino {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 7px;
      font-size: var(--fs-xs);
      background: var(--surface-2);
      color: var(--text-dim);
      max-width: 300px;
      cursor: default;
    }
    .pd-destino svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-mut); }
    .pd-destino-texto {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pd-destino-origem {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--surface-3);
      color: var(--text-dim);
      font-size: var(--fs-xs);
      font-weight: 700;
    }
    .pd-destino.sem { color: var(--warn); background: var(--warn-bg); font-weight: 500; }
    .pd-destino.sem svg { color: var(--warn); }

    /* Menu "Ações" — junta os botões da ficha de Pendências (enviar e-mail,
       copiar tabela, ver na Matriz, verificar, abrir no Linkana) num só
       dropdown, pra não empilhar 5+ botões na barra de ações. */
    .acoes-dropdown { position: relative; }
    .acoes-toggle svg:last-child { width: 14px; height: 14px; transition: transform .15s; }
    .acoes-dropdown.open .acoes-toggle svg:last-child { transform: rotate(180deg); }
    .acoes-dropdown.open .acoes-toggle {
      border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .acoes-menu {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
      min-width: 220px; background: var(--surface); border: 1px solid var(--border-strong);
      border-radius: 10px; box-shadow: 0 12px 28px rgba(23,26,43,.16), 0 2px 6px rgba(23,26,43,.06);
      padding: 5px; display: flex; flex-direction: column; gap: 1px;
      animation: selIn .13s ease-out;
    }
    .acoes-item {
      display: flex; align-items: center; gap: 9px; width: 100%;
      padding: 8px 10px; border-radius: 7px; border: none; background: none;
      font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text);
      text-align: left; text-decoration: none; cursor: pointer;
    }
    .acoes-item:hover { background: var(--surface-2); }
    .acoes-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-mut); }
    .acoes-item.done { color: var(--ok); }
    .acoes-item.done svg { color: var(--ok); }
    .acoes-item:disabled { cursor: default; opacity: .75; }

    #pd-detail table.tbl td {
      white-space: normal;
      word-break: break-word;
      vertical-align: top;
      padding: 10px 12px;
    }
    #pd-detail table.tbl td.num,
    #pd-detail table.tbl td.tipo {
      white-space: nowrap;
      word-break: normal;
    }
    #pd-detail tr.rev td:first-child { box-shadow: inset 3px 0 0 var(--danger-fill); }
    .pd-nota { color: var(--text-dim); font-size: var(--fs-sm); }
    /* O motivo da recusa é a informação que importa na linha em revisão. */
    #pd-detail tr.rev .pd-nota { color: var(--danger); }

    /* ── FORNECEDORES ─────────────────────────────────── */
    /* ══ Select customizado ═══════════════════════════════════════════════
       O <select> nativo não permite estilizar a lista aberta — fonte, cor,
       espaçamento e item marcado são do sistema operacional. O nativo continua
       no DOM (invisível) como fonte do valor e pra disparar 'change'; o que
       aparece é este botão + popover. Ver upgradeSelect() no script. */
    /* Sem declarar `display`: <div> já é block, e assim a regra `.co-select
       { display: none }` (definida antes desta) continua valendo no wrapper.
       Declarar aqui venceria por ordem e o select mobile vazaria no desktop. */
    .sel { position: relative; width: 100%; }
    .sel-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
    .sel-btn {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
      font: inherit; font-size: var(--fs-sm); text-align: left; background: var(--surface);
      color: var(--text); cursor: pointer; transition: border-color .14s, box-shadow .14s, background .14s;
      text-transform: none; letter-spacing: normal; font-weight: 400;
    }
    .sel-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
    .sel-btn:focus-visible, .sel.open .sel-btn {
      outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .sel-btn .sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sel-btn .sel-val.ph { color: var(--text-mut); }
    .sel-btn svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-mut); transition: transform .18s; }
    .sel.open .sel-btn svg { transform: rotate(180deg); }
    .sel-pop {
      position: fixed; z-index: 400; min-width: 180px;
      background: var(--surface); border: 1px solid var(--border-strong);
      border-radius: 10px; box-shadow: 0 12px 28px rgba(23,26,43,.16), 0 2px 6px rgba(23,26,43,.06);
      padding: 5px; overflow: hidden; display: flex; flex-direction: column;
      animation: selIn .13s ease-out;
    }
    .sel-search { padding: 4px 4px 6px 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
    .sel-search input {
      width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--border);
      border-radius: 7px; font: inherit; font-size: var(--fs-sm); background: var(--surface-2); color: var(--text);
    }
    .sel-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
    /* A máscara evita que o último item visível fique cortado no meio parecendo
       defeito — o corte vira um esmaecido que indica que a lista continua. */
    .sel-list {
      overflow-y: auto; max-height: 264px; scrollbar-width: thin;
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
              mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    }
    .sel-list:not(.rola) { -webkit-mask-image: none; mask-image: none; }
    .sel-opt {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 8px 10px; border-radius: 7px; font-size: var(--fs-sm); color: var(--text);
      cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sel-opt:hover, .sel-opt.cursor { background: var(--surface-2); }
    .sel-opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
    .sel-opt[aria-selected="true"]::after { content: '✓'; font-size: var(--fs-xs); }
    .sel-vazio { padding: 14px 10px; text-align: center; font-size: var(--fs-sm); color: var(--text-mut); }
    /* O wrapper herda as classes do <select> original. Aqui só neutralizamos o
       que era decoração de campo (borda/fundo/padding) — quem desenha é o
       botão. `display` fica de fora de propósito: é assim que `.co-select`
       continua escondendo a coisa toda no desktop. */
    .sel.co-select { padding: 0; border: 0; background: none; max-width: none; }
    .forn-grid .sel-btn, .me-grid .sel-btn { padding: 8px 10px; }
    .sel-inline { display: inline-block; width: auto; min-width: 150px; }

    /* ══ Tooltip ═══════════════════════════════════════════════════════════
       O `title` nativo demora ~1s, não aceita estilo e some sozinho. O texto
       continua no atributo (acessibilidade/leitor de tela) mas é movido pra
       data-tip no primeiro hover, senão o balão do sistema aparece junto. */
    .tip {
      position: fixed; z-index: 600; max-width: 300px; padding: 7px 10px;
      background: var(--ink); color: var(--ink-fg-hi); border-radius: 8px;
      font-family: var(--sans); font-size: var(--fs-xs); line-height: 1.45; font-weight: 500;
      box-shadow: 0 8px 20px rgba(23,26,43,.22); pointer-events: none;
      white-space: pre-line; opacity: 0; transform: translateY(3px);
      transition: opacity .13s ease-out, transform .13s ease-out;
    }
    .tip.show { opacity: 1; transform: translateY(0); }
    .tip::after {
      content: ''; position: absolute; width: 8px; height: 8px; background: var(--ink);
      transform: rotate(45deg); left: var(--tip-ax, 50%); margin-left: -4px;
    }
    .tip[data-lado="cima"]::after   { bottom: -3px; }
    .tip[data-lado="baixo"]::after  { top: -3px; }
    .tip[data-lado="direita"] { transform: translateX(-4px); }
    .tip[data-lado="direita"].show { transform: none; }
    .tip[data-lado="direita"]::after { left: -3px; top: var(--tip-ay, 50%); margin: -4px 0 0; }

    /* ══ Campo de data ════════════════════════════════════════════════════ */
    input[type="date"] {
      padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
      font: inherit; font-size: var(--fs-sm); background: var(--surface);
      color: var(--text); transition: border-color .14s, box-shadow .14s;
    }
    input[type="date"]:hover { border-color: var(--border-strong); }
    input[type="date"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    input[type="date"]::-webkit-calendar-picker-indicator {
      cursor: pointer; opacity: .5; padding: 2px; border-radius: 4px; transition: opacity .14s, background .14s;
    }
    input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: var(--accent-soft); }
    .data-br { font-size: var(--fs-sm); white-space: nowrap; }
    .data-br .dow { color: var(--text-mut); font-size: var(--fs-xs); margin-left: 6px; }

    /* Aba Cadastros > Modelo de e-mail — campos largos: parágrafo inteiro num
       input de uma linha é ilegível, por isso a aba é separada de Parâmetros. */
    .me-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
    .me-grid label, .me-full { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }
    .me-full { margin-top: 14px; }
    .me-grid input, .me-full textarea, .me-full input {
      padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px;
      font: inherit; font-size: var(--fs-sm); background: var(--surface); color: var(--text);
      text-transform: none; letter-spacing: normal; font-weight: 400; width: 100%; box-sizing: border-box;
    }
    .me-full textarea { resize: vertical; line-height: 1.5; min-height: 70px; }
    .me-hint { font-size: var(--fs-xs); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-mut); }
    .me-hint code { font-family: var(--mono); font-size: var(--fs-xs); background: var(--surface-3); padding: 1px 4px; border-radius: 4px; }
    .me-preview { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: #fff; color: #000; overflow-x: auto; }
    .forn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
    .forn-grid label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }
    .forn-grid input, .forn-grid select {
      padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
      font: inherit; font-size: var(--fs-sm); background: var(--surface); color: var(--text); text-transform: none; letter-spacing: normal; font-weight: 400;
    }
    .forn-grid input:focus, .forn-grid select:focus { outline: 2px solid var(--accent-border); outline-offset: -1px; }

    /* ── EXPORTAR ─────────────────────────────────────── */
    #exportar-modal .modal-box { max-width: 560px; }
    #exportar-modal .grid2 { display: grid; gap: 16px; }
    .drop { border: 1.5px dashed var(--border-strong); border-radius: 8px; padding: 22px 14px; text-align: center; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
    .drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
    .drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .drop .ic { font-size: var(--fs-xl); }
    .drop .t1 { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 6px; }
    .drop .fn { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); margin-top: 4px; word-break: break-all; display: none; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
      padding: 10px 16px; border-radius: 7px; border: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; }
    .btn:disabled { opacity: .45; cursor: not-allowed; }
    .btn.is-off { opacity: .5; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:not(:disabled):hover { background: var(--accent-strong); }
    .btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
    .btn-ghost:not(:disabled):hover { background: var(--surface-2); }
    .btn svg { width: 16px; height: 16px; }

    .note { padding: 10px 12px; border-radius: 7px; font-size: var(--fs-xs); margin-top: 12px; }
    .note.ok  { background: var(--ok-bg);     color: var(--ok); }
    .note.err { background: var(--danger-bg); color: var(--danger); }
    .note .mono { font-family: var(--mono); font-size: var(--fs-xs); opacity: .85; display: block; margin-top: 3px; word-break: break-all; }

    /* ── LOG DRAWER ───────────────────────────────────── */
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
      background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(15,23,42,.1);
      transform: translateX(100%); transition: transform .22s ease; z-index: 80; display: flex; flex-direction: column; }
    .drawer.open { transform: none; }
    .drawer header { height: var(--head-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border); }
    .drawer header h3 { font-size: var(--fs-md); }
    .log-filtros { flex-shrink: 0; padding: 12px 20px 4px; margin-bottom: 0; }
    .log-filtros .n { font-weight: 500; opacity: .7; }

    /* Linha do tempo: o ícone diz do que se trata (varredura, unidade,
       e-mail…), a cor diz como foi — mesma regra de cor do resto do app. */
    .log-body { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
    .log-dia {
      position: sticky; top: 0; z-index: 1; background: var(--surface);
      padding: 14px 0 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut);
    }
    .log-item { position: relative; display: grid; grid-template-columns: 26px 1fr auto; column-gap: 12px; padding-bottom: 16px; }
    .log-item::before {
      content: ''; position: absolute; left: 12px; top: 30px; bottom: 2px;
      width: 2px; border-radius: 1px; background: var(--surface-3);
    }
    .log-grupo .log-item:last-child::before { display: none; }
    .log-ic {
      width: 26px; height: 26px; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--surface-3); color: var(--text-dim);
    }
    .log-ic svg { width: 14px; height: 14px; }
    .log-item.ok .log-ic    { background: var(--ok-bg);     color: var(--ok); }
    .log-item.aviso .log-ic { background: var(--warn-bg);   color: var(--warn); }
    .log-item.erro .log-ic  { background: var(--danger-bg); color: var(--danger); }
    .log-txt { min-width: 0; padding-top: 3px; }
    .log-msg { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.35; }
    .log-det { font-size: var(--fs-xs); color: var(--text-mut); line-height: 1.45; margin-top: 2px; word-break: break-word; }
    .log-item.erro .log-det { color: var(--danger); }
    .log-hora { padding-top: 4px; font-size: var(--fs-xs); color: var(--text-mut); white-space: nowrap; }
    .log-vazio { padding: 48px 0; text-align: center; font-size: var(--fs-sm); color: var(--text-mut); }
    .scrim { position: fixed; inset: 0; background: rgba(15,23,42,.28); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s; }
    .scrim.open { opacity: 1; pointer-events: auto; }

    /* ── NOTIFICAÇÕES ─────────────────────────────────── */
    /* Cartões empilhados no canto (ver notificacoes.js). Barra lateral, ícone
       e botão na cor do tipo; a barra de tempo no rodapé pausa no hover. */
    #toasts {
      position: fixed; right: 20px; bottom: 20px; z-index: 500;
      display: flex; flex-direction: column; gap: 10px;
      width: 380px; max-width: calc(100vw - 32px);
      pointer-events: none;
    }
    .toast {
      --t-cor: var(--info-fill); --t-bg: var(--info-bg); --t-txt: var(--info);
      pointer-events: auto; position: relative; overflow: hidden;
      display: grid; grid-template-columns: 36px 1fr 24px; gap: 12px; align-items: start;
      padding: 14px 10px 15px 16px;
      background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 14px 34px rgba(23,26,43,.18), 0 2px 6px rgba(23,26,43,.06);
      animation: toastIn .3s cubic-bezier(.2,.8,.2,1);
    }
    .toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--t-cor); }
    .toast.ok    { --t-cor: var(--ok-fill);     --t-bg: var(--ok-bg);     --t-txt: var(--ok); }
    .toast.aviso { --t-cor: var(--warn-fill);   --t-bg: var(--warn-bg);   --t-txt: var(--warn); }
    .toast.erro  { --t-cor: var(--danger-fill); --t-bg: var(--danger-bg); --t-txt: var(--danger); }
    .toast.saindo { animation: toastOut .22s ease-in forwards; }
    .toast-ic {
      width: 36px; height: 36px; border-radius: 10px;
      display: grid; place-items: center;
      background: var(--t-bg); color: var(--t-txt);
    }
    .toast-ic svg { width: 20px; height: 20px; }
    .toast-txt { min-width: 0; padding-top: 1px; }
    .toast-tit { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.35; }
    .toast-n { font-size: var(--fs-xs); font-weight: 700; color: var(--t-txt); background: var(--t-bg); padding: 0 7px; border-radius: 999px; flex-shrink: 0; }
    .toast-det { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.45; margin-top: 2px; word-break: break-word; }
    .toast-acao {
      margin-top: 9px; font: inherit; font-size: var(--fs-xs); font-weight: 600;
      padding: 5px 11px; border-radius: 7px; cursor: pointer;
      border: 1px solid var(--t-cor); background: var(--t-bg); color: var(--t-txt);
      transition: background .15s, color .15s;
    }
    .toast-acao:hover { background: var(--t-cor); color: #fff; }
    .toast-x {
      width: 24px; height: 24px; border-radius: 6px; border: none; background: none;
      display: grid; place-items: center; cursor: pointer; color: var(--text-mut);
    }
    .toast-x:hover { background: var(--surface-3); color: var(--text); }
    .toast-x svg { width: 14px; height: 14px; }
    .toast-tempo {
      position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
      background: var(--t-cor); opacity: .55; transform-origin: left;
      animation: toastTempo linear forwards;
    }
    .toast:hover .toast-tempo { animation-play-state: paused; }
    @keyframes toastIn    { from { opacity: 0; transform: translateX(28px); } }
    @keyframes toastOut   { to   { opacity: 0; transform: translateX(28px); } }
    @keyframes toastTempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
    ::-webkit-scrollbar-track { background: transparent; }

    /* ── CADASTROS / MATRIZ / CONFIRMAR / NOVA HOMOLOGAÇÃO ───────────── */
    .icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 6px; border: 1px solid transparent;
      background: transparent; color: var(--text-dim); cursor: pointer; transition: all .15s ease;
    }
    .icon-btn:hover { background: var(--surface-2); color: var(--text); }
    .icon-btn:active { transform: scale(0.95); }
    .icon-btn svg { width: 18px; height: 18px; }

    .icon-btn-sm {
      display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
      border: none; background: transparent; color: var(--text-mut); cursor: pointer; margin-right: 4px;
      transition: background .12s, color .12s;
    }
    .icon-btn-sm:hover { background: var(--surface-3); color: var(--text); }
    .icon-btn-sm.danger:hover { color: var(--danger); background: var(--danger-bg); }
    .icon-btn-sm svg { width: 16px; height: 16px; }

    .subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
    .subtab {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 13px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
      border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer;
    }
    .subtab:hover { background: var(--surface-2); }
    .subtab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    /* Filtros de "Status aprovação" (Matriz): a cor do status fica só na
       bolinha — a mesma do selo da lista —, e o botão segue a regra de
       interação como os outros (roxo quando ativo). */
    .subtabs-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
    .subtab.st-proc::before, .subtab.st-analise::before, .subtab.st-aprovado::before {
      content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    }
    .subtab.st-proc::before     { background: var(--info-fill); }
    .subtab.st-analise::before  { background: var(--violet-fill); }
    .subtab.st-aprovado::before { background: var(--ok-fill); }
    .subtab.st-proc.active::before,
    .subtab.st-analise.active::before,
    .subtab.st-aprovado.active::before { background: rgba(255,255,255,.85); }

    .modal-overlay {
      position: fixed; inset: 0; background: rgba(15,23,42,.5); display: none;
      align-items: center; justify-content: center; z-index: 100; padding: 20px;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: var(--surface); border-radius: 12px; width: 100%; max-width: 480px;
      max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(15,23,42,.25);
    }
    .modal-box .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .modal-box .modal-head h3 { font-size: var(--fs-lg); }
    .modal-box .modal-body { padding: 18px 20px; }
    .modal-box .modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
    .modal-box .modal-foot .btn { width: auto; padding: 9px 18px; }

    .confirmar-card {
      display: flex; justify-content: space-between; align-items: center; gap: 14px;
      padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); margin-bottom: 10px; flex-wrap: wrap;
    }
    .confirmar-card .info .nm { font-weight: 600; font-size: var(--fs-md); }
    .confirmar-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .confirmar-card .actions .btn { width: auto; padding: 8px 14px; font-size: var(--fs-xs); }

    @keyframes fade  { from { opacity: 0; transform: translateY(4px); } }
    @keyframes selIn { from { opacity: 0; transform: translateY(-4px); } }
    @keyframes pulso { 50% { opacity: .35; } }

    /* ── RESPONSIVE ADAPTABILITY (ALL SCREEN SIZES) ───── */
    /* Tudo no fim do arquivo de propósito: uma regra base declarada depois
       de um @media ganha dele por ordem (era o que travava os cartões do
       Resumo em 4 colunas em qualquer largura). */

    /* 0. Ultrawide */
    @media (min-width: 1700px) {
      :root { --nav-w: 264px; }
      .main { padding: 30px 48px 60px; }
    }

    /* 1. Laptop / Notebook Screen (e.g. 1366x768, 1280x800) */
    @media (max-width: 1366px) {
      .top-header { padding: 0 18px; }
      .main { padding: 18px 20px 36px; }
      #view-pendencias .split, #view-matriz .split {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 12px;
      }
      .co-list { height: calc(100vh - 154px); max-height: calc(100vh - 154px); }
      .co-list li { padding: 12px 14px 12px 18px; }
      .co-hd-inner { padding: 14px 16px; }
    }

    /* 2. Compact Desktop / Half-Screen Windows (1024px - 1160px) */
    @media (max-width: 1160px) {
      .fx-item { grid-template-columns: 26px 1fr minmax(190px, 240px); }
      .fx-origem { grid-column: 2 / -1; justify-content: flex-start; }
      #view-pendencias .split, #view-matriz .split {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 12px;
      }
      .pd-hd-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }
      .pd-hd-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .pd-chips-group { width: 100%; }
      .pd-acoes { width: 100%; }
      .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
    }

    /* 3. Tablet / Narrow Desktop (max 960px) */
    @media (max-width: 960px) {
      .shell { flex-direction: column; }
      .sidebar {
        width: 100%; height: auto; position: static;
        flex-direction: row; align-items: center; justify-content: space-between;
        padding: 8px 14px; border-right: none; border-bottom: 1px solid var(--ink-line);
      }
      .sidebar .brand { padding: 0; border-bottom: none; }
      .brand .mark { width: 32px; height: 32px; }
      .sidebar-footer { display: none; }
      .nav {
        flex-direction: row; overflow-x: auto; padding: 0; gap: 4px;
        scrollbar-width: none;
      }
      .nav-label { display: none; }
      .nav-item {
        width: auto; min-width: 64px; padding: 6px 8px; flex-shrink: 0;
        border-radius: 8px;
      }
      .nav-item svg { width: 22px; height: 22px; }
      .nav-ico { width: 24px; height: 24px; }
      .top-header { height: 52px; padding: 0 14px; box-shadow: none; }
      .co-detail .co-hd { top: 52px; }
      .lp-empresa-row { font-size: var(--fs-md); }
      .main { padding: 14px 12px 32px; }
      .kpi-grid { grid-template-columns: 1fr; }
      #view-pendencias .split, #view-matriz .split {
        grid-template-columns: 1fr;
      }
      #view-pendencias .co-list, #view-matriz .co-list {
        display: none;
      }
      .co-select {
        display: block;
        margin-bottom: 12px;
      }
      .cat-custom-list { grid-template-columns: 1fr; }
    }

    /* 4. Mobile / Smart Phone (max 640px) */
    @media (max-width: 640px) {
      .top-btn span { display: none; }
      .top-btn { padding: 8px 10px; }
      .top-actions { gap: 6px; }
      .kpi-grid-4 { grid-template-columns: 1fr; }
      .pd-chips-group { justify-content: space-between; }
      .mat-toolbar { flex-direction: column; align-items: stretch; }
      .mat-toolbar .subtabs { width: 100%; overflow-x: auto; }
      .doc-setor { display: none; }
    }

    @media (max-width: 520px) {
      .head-meta { gap: 10px; }
      .head-meta .meta-item.hide-xs { display: none; }
    }

    /* ═══════════════════════════════════════════════════════════
       CADASTROS — cabeçalho de aba, listas em cartões, painel lateral,
       parâmetros. Classes com prefixo `cd-`. Movimento: mesma curva
       (--ease) e o mesmo ritmo das listas de Pendências/Matriz.
       ═══════════════════════════════════════════════════════════ */
    .cd-pagina { max-width: none; }
    .cd-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
    .cd-ico { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border); }
    .cd-ico svg { width: 24px; height: 24px; }
    .cd-cab-txt { flex: 1; min-width: 0; }
    .cd-cab-txt h1 { font-size: var(--fs-xl); letter-spacing: -.015em; line-height: 1.2; display: flex; align-items: center; gap: 10px; }
    .cd-cab-txt h1 .n { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; letter-spacing: 0; }
    .cd-cab-txt p { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 4px; max-width: 640px; line-height: 1.5; }
    .cd-cab-acoes { display: flex; align-items: center; gap: 10px; }

    /* botões */
    .cd-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease), background .25s, border-color .25s, box-shadow .25s, color .25s; }
    .cd-b:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
    .cd-b:active { transform: scale(.97); }
    .cd-b:disabled { opacity: .5; cursor: not-allowed; }
    .cd-b svg { width: 15px; height: 15px; }
    .cd-b.prim { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent); }
    .cd-b.prim:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 36%, transparent); }
    .cd-b.perigo { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; }
    .cd-b.perigo:hover { background: var(--danger); border-color: var(--danger); }
    .cd-b.peq { padding: 6px 12px; border-radius: 8px; }

    .cd-busca { display: flex; align-items: center; gap: 8px; padding: 8px 12px; width: 220px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color .25s, box-shadow .25s, width .4s var(--ease); }
    .cd-busca:focus-within { width: 290px; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .cd-busca svg { width: 16px; height: 16px; color: var(--text-mut); flex-shrink: 0; }
    .cd-busca input { border: none; outline: none; background: none; font: inherit; font-size: var(--fs-sm); width: 100%; color: var(--text); }

    /* etiquetas de filtro e de escolha */
    .cd-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
    .cd-chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; transition: all .3s var(--ease); }
    .cd-chip:hover { border-color: var(--accent-border); color: var(--text); transform: translateY(-1px); }
    .cd-chip .q { font-size: var(--fs-xs); font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-mut); transition: all .3s var(--ease); }
    .cd-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent); }
    .cd-chip.on .q { background: rgba(255, 255, 255, .22); color: #fff; }

    /* seção e grupo */
    .cd-sec { margin-bottom: 30px; }
    .cd-sec-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
    .cd-sec-cab .tit { flex: 1; min-width: 200px; }
    .cd-sec-cab h2 { font-size: var(--fs-lg); line-height: 1.25; }
    .cd-sec-cab p { font-size: var(--fs-sm); color: var(--text-mut); margin-top: 2px; }
    .cd-sec-cab .cd-q { color: var(--text-mut); font-size: var(--fs-sm); }
    .cd-sec-cab .push { margin-left: auto; }
    .cd-grupo { margin-bottom: 26px; }
    .cd-grupo-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .cd-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); color: #fff; background: var(--accent); }
    .cd-grupo-cab h2 { font-size: var(--fs-md); }
    .cd-grupo-cab .cd-q { color: var(--text-mut); font-size: var(--fs-sm); }
    .cd-grupo-cab .cd-b { margin-left: auto; }

    /* linhas em cartão */
    .cd-linhas { display: flex; flex-direction: column; gap: 6px; }
    .cd-lin-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); }
    .cd-lin-wrap.some { grid-template-rows: 0fr; opacity: 0; margin-bottom: -6px; }
    .cd-lin-in { overflow: hidden; min-height: 0; padding: 0 4px; margin: 0 -4px; }
    .cd-lin {
      position: relative; display: flex; align-items: center; gap: 14px;
      padding: 13px 14px 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
      cursor: pointer; opacity: 0;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background .6s;
    }
    .cd-lin.in { opacity: 1; animation: cdEntra .6s var(--ease) var(--d, 0ms) backwards; }
    .cd-lin.in.quieto { animation: none; }
    @keyframes cdEntra { from { opacity: 0; transform: translateY(var(--dy, 10px)); } }
    .cd-lin:hover { transform: translateX(3px); border-color: var(--accent-border); box-shadow: 0 6px 18px rgba(23, 26, 43, .07); }
    .cd-lin.cd-flash, .cd-lin.cd-flash.in { animation: cdFlash 1.6s var(--ease); }
    @keyframes cdFlash { 0% { background: var(--ok-bg); border-color: var(--ok-fill); } 100% { background: var(--surface); } }
    .cd-lin .alca { flex-shrink: 0; margin-left: -4px; color: var(--border-strong); cursor: grab; display: grid; place-items: center; transition: color .2s; }
    .cd-lin:hover .alca { color: var(--text-mut); }
    .cd-lin .alca svg { width: 16px; height: 16px; }
    .cd-lin .cod { flex-shrink: 0; min-width: 40px; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); }
    .cd-lin .dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface-3); }
    .cd-lin .nome { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cd-lin .marcas { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
    .cd-lin.dragging { opacity: .4; }
    .cd-lin.drag-over { box-shadow: 0 -3px 0 var(--accent); }
    .cd-tag { font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
    .cd-tag.info { background: var(--info-bg); color: var(--info); } .cd-tag.ok { background: var(--ok-bg); color: var(--ok); }
    .cd-tag.warn { background: var(--warn-bg); color: var(--warn); } .cd-tag.violet { background: var(--violet-bg); color: var(--violet); }
    .cd-tag.danger { background: var(--danger-bg); color: var(--danger); } .cd-tag.na { background: none; color: var(--text-mut); box-shadow: inset 0 0 0 1px var(--border); }
    .cd-acoes { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transform: translateX(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
    .cd-lin:hover .cd-acoes, .cd-lin:focus-within .cd-acoes, .cd-lin.apagando .cd-acoes { opacity: 1; transform: none; }
    .cd-ib { width: 32px; height: 32px; border: none; background: none; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--text-mut); transition: background .2s, color .2s, transform .2s var(--ease); }
    .cd-ib:hover { background: var(--accent-soft); color: var(--accent); }
    .cd-ib.del:hover { background: var(--danger-bg); color: var(--danger); }
    .cd-ib:active { transform: scale(.9); }
    .cd-ib svg { width: 16px; height: 16px; }
    .cd-lin .cd-conf { display: none; flex: 1; align-items: center; gap: 10px; justify-content: flex-end; font-size: var(--fs-sm); }
    .cd-lin.apagando { background: var(--danger-soft); border-color: var(--danger-fill); cursor: default; }
    .cd-lin.apagando .nome, .cd-lin.apagando .marcas, .cd-lin.apagando .cod, .cd-lin.apagando .dot, .cd-lin.apagando .alca, .cd-lin.apagando .cd-acoes:not(.cd-conf) { display: none; }
    .cd-lin.apagando .cd-conf { display: flex; }
    .cd-lin.apagando .cd-conf span { margin-right: auto; color: var(--danger); font-weight: 600; }
    .cd-vazio { text-align: center; padding: 44px 20px; color: var(--text-mut); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; font-size: var(--fs-sm); }
    .cd-vazio .cd-ico { margin: 0 auto 12px; }
    .cd-vazio h3 { color: var(--text); font-size: var(--fs-md); margin-bottom: 4px; }

    /* painel lateral: criar / editar */
    .cd-veu { position: fixed; inset: 0; z-index: 200; background: rgba(23, 26, 43, .38); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
    .cd-veu.aberto { opacity: 1; pointer-events: auto; }
    .cd-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 201; width: min(460px, 100vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: -18px 0 50px rgba(23, 26, 43, .18); transform: translateX(105%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
    .cd-painel.aberto { transform: none; visibility: visible; transition: transform .5s var(--ease); }
    .cd-painel-cab { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border); }
    .cd-painel-cab h2 { font-size: var(--fs-lg); }
    .cd-painel-cab p { font-size: var(--fs-sm); color: var(--text-mut); margin-top: 2px; }
    .cd-painel-cab .cd-ib { margin-left: auto; }
    .cd-painel-corpo { flex: 1; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 22px; }
    .cd-painel.aberto .cd-campo { animation: cdEntra .55s var(--ease) backwards; }
    .cd-painel.aberto .cd-campo:nth-child(2) { animation-delay: 70ms; }
    .cd-painel.aberto .cd-campo:nth-child(3) { animation-delay: 140ms; }
    .cd-painel.aberto .cd-campo:nth-child(4) { animation-delay: 210ms; }
    .cd-painel.aberto .cd-campo:nth-child(n+5) { animation-delay: 280ms; }
    .cd-campo > label, .cd-campo > .rot { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
    .cd-campo .aj { font-size: var(--fs-xs); color: var(--text-mut); margin-bottom: 8px; line-height: 1.45; }
    .cd-in { width: 100%; font: inherit; font-size: var(--fs-md); padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); outline: none; transition: border-color .25s, box-shadow .25s; }
    .cd-in:hover { border-color: var(--text-mut); }
    .cd-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .cd-in.erro { border-color: var(--danger-fill); box-shadow: 0 0 0 3px var(--danger-soft); }
    textarea.cd-in { resize: vertical; line-height: 1.5; }
    .cd-msg-erro { font-size: var(--fs-xs); color: var(--danger); margin-top: 6px; display: none; }
    .cd-msg-erro.on { display: block; animation: cdEntra .3s var(--ease); }
    .cd-opcoes { display: flex; flex-direction: column; gap: 8px; }
    .cd-op { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font: inherit; font-size: var(--fs-sm); text-align: left; background: var(--surface); color: var(--text); transition: all .3s var(--ease); }
    .cd-op:hover { border-color: var(--accent-border); background: var(--surface-2); }
    .cd-op .cd-num { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); color: var(--text-mut); transition: all .3s var(--ease); }
    .cd-op .marca { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; color: #fff; transition: all .3s var(--ease); }
    .cd-op .marca svg { width: 12px; height: 12px; transform: scale(0); transition: transform .3s var(--ease); }
    .cd-op.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
    .cd-op.on .cd-num { background: var(--accent); color: #fff; }
    .cd-op.on .marca { background: var(--accent); border-color: var(--accent); }
    .cd-op.on .marca svg { transform: scale(1); }
    .cd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .cd-chips .cd-chip { padding: 6px 13px; }
    .cd-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 10px; flex-wrap: wrap; }
    .cd-seg button { border: none; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
    .cd-seg button:hover { color: var(--text); }
    .cd-seg button.on { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 3px rgba(23, 26, 43, .12); }
    .cd-cor { display: flex; align-items: center; gap: 10px; }
    .cd-cor .amostra { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-3); }
    .cd-painel-pe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }

    /* parâmetros */
    .cd-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
    .cd-param { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: border-color .3s, box-shadow .3s, transform .35s var(--ease); animation: cdEntra .6s var(--ease) var(--d, 0ms) backwards; }
    .cd-param:hover { border-color: var(--accent-border); box-shadow: 0 8px 24px rgba(23, 26, 43, .07); transform: translateY(-2px); }
    .cd-param.mudou { border-color: var(--warn-fill); box-shadow: 0 0 0 3px var(--warn-soft); }
    .cd-param-topo { display: flex; align-items: center; gap: 12px; }
    .cd-param-topo .cd-ico { width: 40px; height: 40px; border-radius: 12px; }
    .cd-param-topo .cd-ico svg { width: 20px; height: 20px; }
    .cd-param-topo h3 { font-size: var(--fs-md); line-height: 1.25; }
    .cd-param p { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
    .cd-param .exemplo { display: block; line-height: 1.5; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-mut); }
    .cd-param .exemplo b { font-family: var(--mono); color: var(--accent-strong); }
    .cd-stepper { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
    .cd-stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .cd-stepper button { width: 42px; border: none; background: var(--surface-2); font: inherit; font-size: 18px; color: var(--text-dim); cursor: pointer; transition: background .2s, color .2s; }
    .cd-stepper button:hover { background: var(--accent-soft); color: var(--accent); }
    .cd-stepper button:active { background: var(--accent-border); }
    .cd-stepper input { flex: 1; min-width: 0; text-align: center; border: none; outline: none; font: inherit; font-size: var(--fs-lg); font-weight: 600; padding: 10px; background: var(--surface); color: var(--text); }
    .cd-barra { position: fixed; left: 50%; bottom: 24px; z-index: 190; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; background: var(--ink); color: var(--ink-fg-hi); border-radius: 14px; box-shadow: 0 14px 40px rgba(23, 26, 43, .35); transform: translate(-50%, 160%); transition: transform .55s var(--ease); font-size: var(--fs-sm); }
    .cd-barra.on { transform: translate(-50%, 0); }
    .cd-barra .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-warn); box-shadow: 0 0 0 4px rgba(251, 191, 36, .2); }
    .cd-barra .cd-b { background: transparent; border-color: var(--ink-line); color: var(--ink-fg-hi); }
    .cd-barra .cd-b:hover { background: var(--ink-2); }
    .cd-barra .cd-b.prim { background: var(--accent); border-color: var(--accent); }

    /* modelo de e-mail e backup */
    .cd-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
    .cd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
    .cd-card h3 { font-size: var(--fs-md); }
    .cd-card .cd-dica { font-size: var(--fs-xs); color: var(--text-mut); line-height: 1.45; margin-top: 6px; }
    .cd-card .cd-dica code { font-family: var(--mono); background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
    .cd-card-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
    .cd-sticky { position: sticky; top: 80px; }
    .cd-backup { display: flex; flex-direction: row; align-items: center; gap: 20px; }
    .cd-sec-backup { margin-top: 30px; }
    .cd-backup .cd-ico { width: 56px; height: 56px; border-radius: 16px; }
    .cd-backup .cd-ico svg { width: 28px; height: 28px; }
    .cd-backup p { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.5; margin-top: 2px; }
    @media (max-width: 1100px) { .cd-duas { grid-template-columns: 1fr; } .cd-sticky { position: static; } }
    @media (max-width: 760px) {
      .cd-cab { flex-wrap: wrap; } .cd-cab-acoes { width: 100%; } .cd-busca, .cd-busca:focus-within { width: 100%; }
      .cd-lin .marcas { display: none; } .cd-backup { flex-direction: column; align-items: flex-start; }
    }

    /* ── movimento do sistema todo ── */
    .view.active { animation: cdVista .5s var(--ease); }
    @keyframes cdVista { from { opacity: 0; transform: translateY(8px); } }
    .btn, .btn-copy, .icon-btn, .subtab, .cat-item, .kpi { transition-property: background, border-color, color, box-shadow, transform, opacity; transition-duration: .25s; transition-timing-function: var(--ease); }
    .btn:not(:disabled):active, .btn-copy:active, .icon-btn:active { transform: scale(.97); }
    .kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23, 26, 43, .08); }
    .cat-fill { transform-origin: left; animation: cdCresce .9s var(--ease) backwards; }
    @keyframes cdCresce { from { transform: scaleX(0); } }
    .nav { position: relative; }
    .nav-ind { position: absolute; left: 8px; width: calc(100% - 16px); top: 0; height: 0; border-radius: 9px; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-strong) 45%, transparent); pointer-events: none; opacity: 0; transition: top .45s var(--ease), height .45s var(--ease), left .45s var(--ease), width .45s var(--ease), opacity .3s; }
    .nav-ind.on { opacity: 1; }
    .nav.com-ind .nav-item { position: relative; z-index: 1; }
    .nav.com-ind .nav-item.active { background: none; box-shadow: none; }
    .nav.com-ind .nav-item.active:hover { background: none; }

    @media (prefers-reduced-motion: reduce) {
      .cd-lin { opacity: 1; }
      .cd-lin.in, .cd-param, .cd-painel.aberto .cd-campo, .view.active, .cat-fill { animation: none; }
      .cd-lin, .cd-lin-wrap, .cd-painel, .cd-veu, .cd-barra, .cd-acoes, .cd-chip, .cd-op, .cd-seg button, .nav-ind { transition-duration: .01ms; }
    }

    /* ── CONVENIÊNCIAS ────────────────────────────────── */
    /* Botão × que limpa a busca (aparece só com texto digitado) */
    .search { position: relative; }
    .search-x {
      flex-shrink: 0; width: 22px; height: 22px; border: none; border-radius: 6px; padding: 0;
      display: grid; place-items: center; cursor: pointer; background: none; color: var(--text-mut);
    }
    .search-x:hover { background: var(--surface-2); color: var(--text); }
    .search-x svg { width: 12px; height: 12px; }
    .search-x[hidden] { display: none; }

    /* Ordenação da lista de Pendências */
    .ordem-linha {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
      padding: 6px 12px; border-bottom: 1px solid var(--border);
      font-size: var(--fs-xs); color: var(--text-mut); font-weight: 600;
    }
    .ordem-linha select {
      flex: 1; min-width: 0; font: inherit; font-weight: 500; color: var(--text);
      border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 3px 6px; cursor: pointer;
    }

    /* "enviado hoje" na lista de Pendências */
    .li-chip.enviado { background: var(--ok-soft); color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
    .li-chip.enviado svg { width: 11px; height: 11px; }

    /* Copiar o e-mail do destinatário */
    .pd-destino-copiar {
      flex-shrink: 0; width: 22px; height: 22px; border: none; border-radius: 6px; padding: 0;
      display: inline-grid; place-items: center; cursor: pointer; background: none; color: var(--text-mut);
    }
    .pd-destino-copiar:hover { background: var(--surface-2); color: var(--text); }
    .pd-destino-copiar svg { width: 13px; height: 13px; }

    /* "há 12 min" da última verificação, no cabeçalho */
    .lp-ago { font-size: var(--fs-xs); font-weight: 600; color: var(--ok); }
    .lp-ago.velho { color: var(--warn); background: var(--warn-soft); padding: 1px 8px; border-radius: 999px; }
    .lp-ago[hidden] { display: none; }

    /* Exportar Excel agora é link direto */
    a.top-btn { text-decoration: none; }

    /* Baixar modelo / Importar planilha (Matriz) */
    .mat-import-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
    .btn.btn-mini { width: auto; padding: 7px 12px; font-size: var(--fs-xs); text-decoration: none; }
    .mat-import-lbl { position: relative; cursor: pointer; }
    .mat-import-lbl input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

    /* ── PAINEL LATERAL NA MATRIZ ─────────────────────── */
    .pl-extra { margin-right: auto; max-width: 100%; }
    .pl-data { display: flex; gap: 8px; align-items: stretch; }
    .pl-data .cd-in { flex: 1; min-width: 0; }
    .pl-aviso {
      display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px;
      background: var(--info-bg); color: var(--info); font-size: var(--fs-sm); font-weight: 500; line-height: 1.45;
    }
    .pl-aviso svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

    /* Cadastro da unidade: resumo + botão Editar */
    .mat-cad-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px 16px; margin-bottom: 18px; }
    .mat-cad-card.incompleto { border-color: var(--warn-fill); background: var(--warn-soft); }
    .mat-cad-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .mat-cad-topo h3 { font-size: var(--fs-md); font-weight: 600; }
    .mat-cad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 18px; margin: 0; }
    .mat-cad-campo { min-width: 0; }
    .mat-cad-campo dt { font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); margin-bottom: 2px; }
    .mat-cad-campo dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
    .mat-cad-campo.falta dd { color: var(--warn); font-weight: 500; font-style: italic; }

    /* Fluxo: a linha inteira abre o painel de edição */
    .fx-item[data-etapa-editar] { cursor: pointer; transition: background .15s; }
    .fx-item[data-etapa-editar]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .fx-val {
      display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; min-width: 0;
      font-size: var(--fs-sm); font-weight: 600; color: var(--text); background: var(--surface-3); border: 1px solid transparent;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .fx-val.vazio { background: none; border: 1px dashed var(--border-strong); color: var(--text-mut); font-weight: 500; }
    .fx-item:hover .fx-val.vazio { border-style: solid; border-color: var(--accent); color: var(--accent); }
    .fx-ctl.v-ok .fx-val      { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-fill); }
    .fx-ctl.v-analise .fx-val { background: var(--violet-bg); color: var(--violet); border-color: var(--violet-fill); }
    .fx-ctl.v-proc .fx-val    { background: var(--info-bg);   color: var(--info);   border-color: var(--info-fill); }
    .fx-ctl.v-pend .fx-val    { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-fill); }
    .fx-ctl.v-data .fx-val    { background: var(--ok-soft);   color: var(--text);   border-color: var(--ok-fill); }
    .fx-lapis { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--text-mut); opacity: 0; transition: opacity .15s; }
    .fx-lapis svg { width: 14px; height: 14px; }
    .fx-item:hover .fx-lapis, .fx-item:focus-visible .fx-lapis { opacity: 1; }

    /* Menu lateral: espaçamento folgado em telas altas; vai apertando por degraus
       conforme a altura da janela, pra os 11 itens caberem sem rolar. Abaixo do
       último degrau o próprio menu rola (barra escondida). */
    @media (min-width: 961px) and (max-height: 1080px) {
      .nav { gap: 5px; }
      .nav-item { padding: 9px 2px 7px; gap: 4px; }
      .nav-label { padding: 12px 0 3px; }
    }
    @media (min-width: 961px) and (max-height: 960px) {
      .sidebar .brand { padding: 12px 0 10px; }
      .nav { gap: 4px; }
      .nav-item { padding: 8px 2px 6px; gap: 4px; }
      .nav-label { padding: 9px 0 3px; }
    }
    @media (min-width: 961px) and (max-height: 860px) {
      .nav { gap: 3px; }
      .nav-item { padding: 6px 2px 5px; gap: 3px; }
      .nav-label { padding: 7px 0 2px; }
    }

    /* ── LISTAS DE DOCUMENTOS (Pendências e Matriz) ─────────────────────
       Cada documento é uma linha em cartão, como nas listas de Cadastros:
       código, nome, etiqueta do setor, status e nota alinhados numa grade. */
    .dl { display: flex; flex-direction: column; gap: 6px; }
    .dl.pd { --dl-cols: 50px minmax(0, 1.7fr) 112px 118px minmax(0, 1.4fr) 30px; padding: 12px 16px 20px; }
    .dl.mt { --dl-cols: 50px minmax(0, 1.7fr) 150px minmax(0, 1.4fr); }
    /* documento pedido pelo Linkana e ainda fora do cadastro: botão de cadastro rápido */
    .dl-sem-cad { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-mut); }
    .dl-sem-cad .ok { color: var(--ok); font-weight: 600; }
    .cr-btn { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease); }
    .cr-btn:hover { background: var(--accent); color: #fff; }
    .cr-btn:active { transform: scale(.96); }
    .cr-veu { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(23, 26, 43, .42); backdrop-filter: blur(3px); }
    .cr-card { width: 100%; max-width: 480px; padding: 26px 26px 22px; border-radius: 18px; background: var(--surface); box-shadow: 0 30px 80px rgba(15, 42, 61, .32); }
    .cr-card h2 { font-size: 20px; letter-spacing: -.015em; }
    .cr-sub { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-mut); }
    .cr-campo { margin-top: 16px; }
    .cr-campo label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }
    .cr-campo textarea.cd-in { resize: vertical; line-height: 1.45; }
    .cr-cats { display: grid; gap: 6px; }
    .cr-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 500; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
    .cr-cat i { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); flex-shrink: 0; }
    .cr-cat:hover { background: var(--surface-2); }
    .cr-cat.on { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, var(--surface)); font-weight: 700; box-shadow: inset 3px 0 0 var(--cat); }
    .cr-erro { margin-top: 14px; padding: 9px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: var(--fs-sm); font-weight: 500; }
    .cr-erro[hidden] { display: none; }
    .cr-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
    .cr-acoes .cd-b { padding: 10px 18px; }
    html[data-perfil="control"] .cr-btn { display: none; }
    /* documentos agrupados por categoria: item principal (o número) e os documentos como subitens */
    .dl-grp { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
    .dl-grp:first-of-type { margin-top: 2px; }
    .dl-grupo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; border-radius: 12px; font: inherit; text-align: left; cursor: pointer;
      background: color-mix(in srgb, var(--cat) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cat) 28%, var(--border));
      transition: background .2s, border-color .2s, transform .2s var(--ease); }
    .dl-grupo:hover { background: color-mix(in srgb, var(--cat) 18%, var(--surface)); border-color: color-mix(in srgb, var(--cat) 45%, var(--border)); }
    .dl-grupo:active { transform: scale(.995); }
    .dl-grupo:focus-visible { outline: 2px solid var(--cat); outline-offset: 2px; }
    .dl-grupo::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; margin: 0 4px 3px 2px; border-right: 2px solid var(--text-mut); border-bottom: 2px solid var(--text-mut); transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s; }
    .dl-grp.fechado > .dl-grupo::after { transform: rotate(-45deg); margin: 0 4px 0 2px; }
    .dl-grp.fechado > .dl-lin { display: none; }
    .dl-grupo-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--cat); color: #fff; font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; }
    .dl-grupo-nome { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
    .dl-grupo-qtd { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); }
    .dl-grp > .dl-lin { border-left: 3px solid color-mix(in srgb, var(--cat) 60%, var(--border)); }
    .dl-cab, .dl-lin { display: grid; grid-template-columns: var(--dl-cols); column-gap: 14px; align-items: center; }
    .dl-cab {
      padding: 4px 16px 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--text-mut);
    }
    .dl-lin {
      position: relative; padding: 11px 16px; min-height: 52px;
      background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, background .3s;
    }
    .dl-lin:hover { transform: translateX(3px); border-color: var(--accent-border); box-shadow: 0 6px 18px rgba(23, 26, 43, .07); }
    .dl-lin.rev { background: var(--danger-soft); border-color: var(--danger-bg); box-shadow: inset 4px 0 0 var(--danger-fill); }
    .dl-lin.rev:hover { border-color: var(--danger-fill); }
    .dl-lin.edit { border-color: var(--accent); background: var(--accent-soft); }
    .dl-lin.edit:hover { transform: none; }
    .dl-cod { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); }
    .dl-nome { min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
    .dl-nome small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-mut); }
    .dl-st { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .dl-nota { min-width: 0; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.45; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
    .dl-nota.vazia, .dl-vazio { color: var(--text-mut); }
    .dl-lin.rev .dl-nota { color: var(--danger); font-weight: 500; }
    .dl-acao { display: flex; justify-content: flex-end; }
    .dl-lin:hover .row-acao, .dl-lin:focus-within .row-acao { opacity: 1; }
    .dl-lapis { flex-shrink: 0; }
    .dl-edit-obs { gap: 8px; }
    .dl-edit-obs .cd-in { flex: 1; min-width: 0; padding: 7px 10px; font-size: var(--fs-sm); }
    .dl-edit-obs .cd-b { flex-shrink: 0; }
    .dl-vazio-msg { padding: 28px 16px; text-align: center; color: var(--text-mut); font-size: var(--fs-sm); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; }
    @media (max-width: 900px) {
      .dl-cab { display: none; }
      .dl.pd, .dl.mt { --dl-cols: 44px minmax(0, 1fr); }
      .dl-lin > :nth-child(n+3) { grid-column: 2; }
      .dl-acao { justify-content: flex-start; }
    }
    @media (prefers-reduced-motion: reduce) { .dl-lin, .dl-lin:hover { transition: none; transform: none; } }

    /* Linha que abre o documento no Linkana: a linha toda é o link */
    a.dl-lin { color: inherit; text-decoration: none; cursor: pointer; }
    a.dl-lin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .dl-abrir { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--text-mut); transition: background .2s, color .2s; }
    .dl-abrir svg { width: 16px; height: 16px; }
    a.dl-lin:hover .dl-abrir, a.dl-lin:focus-visible .dl-abrir { background: var(--accent-soft); color: var(--accent); }

    /* Linha de documento da Matriz: clicar abre o painel de edição (o lápis só sinaliza) */
    .dl-lin.editavel { cursor: pointer; }
    .dl-lin.editavel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .dl-lin.editavel:hover .dl-abrir, .dl-lin.editavel:focus-visible .dl-abrir { background: var(--accent-soft); color: var(--accent); }

    /* ══ RESUMO ═══════════════════════════════════════════════════════════
       Números com variação e tendência, gráfico de evolução, funil de
       homologação e listas de barras. Cartões brancos, cantos de 14px,
       cor forte só onde há status. */
    .rs-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .rs-topo h2 { font-size: var(--fs-xl); letter-spacing: -.015em; }
    .rs-topo p { margin-top: 3px; font-size: var(--fs-sm); color: var(--text-mut); }

    .rs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
    .rs-kpi {
      --kc: var(--border-strong); --kb: var(--surface-3); --kt: var(--text);
      position: relative; overflow: hidden; display: flex; flex-direction: column;
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
      padding: 16px 18px 0; box-shadow: var(--shadow), inset 4px 0 0 var(--kc);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }
    .rs-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23, 26, 43, .08), inset 4px 0 0 var(--kc); }
    .rs-kpi.info   { --kc: var(--info-fill);   --kb: var(--info-bg);   --kt: var(--info); }
    .rs-kpi.warn   { --kc: var(--warn-fill);   --kb: var(--warn-bg);   --kt: var(--warn); }
    .rs-kpi.danger { --kc: var(--danger-fill); --kb: var(--danger-bg); --kt: var(--danger); }
    .rs-kpi.ok     { --kc: var(--ok-fill);     --kb: var(--ok-bg);     --kt: var(--ok); }
    .rs-kpi-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .rs-kpi-tit { font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); line-height: 1.35; }
    .rs-kpi-ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--kb); color: var(--kt); }
    .rs-kpi-ico svg { width: 20px; height: 20px; }
    .rs-kpi-val { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
    .rs-kpi .v { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--kt); }
    .rs-kpi-sub { font-size: var(--fs-xs); color: var(--text-mut); margin-top: 4px; line-height: 1.4; }
    .rs-kpi-sub b { color: var(--text); font-weight: 600; }
    .rs-delta-l { min-height: 22px; margin-top: 8px; }
    .rs-delta { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; padding: 2px 9px; border-radius: 999px; }
    .rs-delta small { font-size: var(--fs-xs); font-weight: 500; opacity: .85; }
    .rs-delta b { font-size: 10px; }
    .rs-delta.baixou { background: var(--ok-bg);     color: var(--ok); }
    .rs-delta.subiu  { background: var(--danger-bg); color: var(--danger); }
    .rs-delta.igual  { background: var(--surface-3); color: var(--text-dim); }
    .rs-spark { height: 38px; margin: 6px -18px 0 -14px; }
    .rs-spark svg { display: block; width: 100%; height: 100%; }
    .rs-kpi-anel { padding-bottom: 14px; }
    .rs-anel-caixa { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
    .rs-anel { flex-shrink: 0; width: 88px; height: 88px; }
    .rs-anel svg { width: 100%; height: 100%; }
    .rs-anel-txt .v { font-size: 30px; }
    .rs-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--text-dim); }
    .rs-legenda span { display: inline-flex; align-items: center; gap: 6px; }
    .rs-legenda i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
    .rs-legenda b { color: var(--text); font-weight: 700; }
    .rs-kpi-anel .rs-legenda { margin-top: 12px; }

    .rs-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
    .rs-c4 { grid-column: span 4; } .rs-c6 { grid-column: span 6; } .rs-c8 { grid-column: span 8; }
    .rs-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; display: flex; flex-direction: column; }
    .rs-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 4px; }
    .rs-card-h h3 { font-size: var(--fs-md); font-weight: 600; }
    .rs-card-h p { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-mut); }
    .rs-corpo { padding: 12px 18px 18px; flex: 1; }
    .rs-vazio { padding: 26px 8px; text-align: center; font-size: var(--fs-sm); color: var(--text-mut); display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .rs-vazio.ok svg { width: 34px; height: 34px; color: var(--ok-fill); }
    .rs-link { border: none; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
    .rs-link:hover { background: var(--accent-soft); }

    /* gráfico de evolução */
    .rs-janelas { margin: 0; flex-wrap: nowrap; }
    .rs-graf-leg { padding: 6px 18px 0; font-size: var(--fs-sm); }
    .rs-graf { position: relative; padding: 4px 6px; min-height: 260px; }
    .rs-graf svg { display: block; overflow: visible; }
    .rs-grade-l line { stroke: var(--border); stroke-width: 1; }
    .rs-grade-l text, .rs-eixo-x text { font: 500 11px var(--sans); fill: var(--text-mut); }
    .rs-cross line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
    .rs-cross circle.a { fill: var(--warn-fill); stroke: var(--surface); stroke-width: 2; }
    .rs-cross circle.b { fill: var(--danger-fill); stroke: var(--surface); stroke-width: 2; }
    .rs-cross[hidden] { display: none; }
    .rs-hit { cursor: crosshair; }
    .rs-tip {
      position: absolute; z-index: 5; pointer-events: none; min-width: 168px;
      background: var(--ink); color: var(--ink-fg-hi); border-radius: 10px; padding: 9px 12px;
      font-size: var(--fs-xs); line-height: 1.55; box-shadow: 0 10px 26px rgba(23, 26, 43, .28);
    }
    .rs-tip[hidden] { display: none; }
    .rs-tip .quando { font-weight: 700; margin-bottom: 3px; }
    .rs-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 7px; }
    .rs-tip b { float: right; margin-left: 14px; }
    .rs-tip .mut { color: var(--ink-fg); margin-top: 3px; }
    .rs-tabela { margin: 0 18px 14px; font-size: var(--fs-xs); }
    .rs-tabela summary { cursor: pointer; color: var(--text-mut); font-weight: 600; padding: 4px 0; }
    .rs-tabela summary:hover { color: var(--accent); }
    .rs-tabela table { margin-top: 6px; }

    /* barra segmentada (funil / categorias) */
    .rs-seg { display: flex; gap: 2px; height: 12px; margin: 6px 0 12px; }
    .rs-seg.alta { height: 16px; }
    .rs-seg i { display: block; min-width: 4px; border-radius: 4px; transition: flex .5s var(--ease); }
    .rs-seg i:first-child { border-radius: 999px 4px 4px 999px; } .rs-seg i:last-child { border-radius: 4px 999px 999px 4px; }
    .rs-seg i:only-child { border-radius: 999px; }

    /* linhas (funil, top, documentos) */
    .rs-lista { display: flex; flex-direction: column; gap: 2px; }
    .rs-linha {
      display: grid; align-items: center; column-gap: 12px; text-align: left;
      padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px); border: none; background: none; font: inherit;
      border-radius: 10px; color: var(--text); transition: background .2s;
    }
    button.rs-linha { cursor: pointer; }
    button.rs-linha:hover { background: var(--surface-2); }
    div.rs-linha { cursor: default; }
    .rs-fn { grid-template-columns: 10px minmax(0, 1fr) auto 44px; }
    .rs-fn .pt, .rs-cat .pt { width: 10px; height: 10px; border-radius: 3px; }
    .rs-fn .nm, .rs-cat .nm { font-size: var(--fs-sm); font-weight: 500; }
    .rs-fn .pc, .rs-cat .pc { font-size: var(--fs-xs); color: var(--text-mut); }
    .rs-fn b, .rs-cat b { text-align: right; font-size: var(--fs-md); font-weight: 700; }
    .rs-barra { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 40px; }
    .rs-barra .nm { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .rs-barra .nm em { font-style: normal; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-mut); margin-right: 8px; }
    .rs-barra .tr { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
    .rs-barra .tr i { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease); }
    .rs-barra b { text-align: right; font-size: var(--fs-sm); font-weight: 700; }
    .rs-cats { display: grid; grid-template-columns: 1fr; gap: 0; }
    .rs-cat:last-child { border-bottom: none; }
    .rs-cat { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; align-items: center; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }

    /* atalhos do funil */
    .rs-acoes { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
    .rs-acao {
      display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; font-size: var(--fs-sm);
      padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; transition: transform .2s, box-shadow .2s;
    }
    .rs-acao b { font-size: var(--fs-md); }
    .rs-acao svg { width: 14px; height: 14px; margin-left: auto; }
    button.rs-acao { cursor: pointer; }
    button.rs-acao:hover { transform: translateX(3px); }
    .rs-acao.estatica { cursor: default; }
    .rs-acao.ok    { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-bg); }
    .rs-acao.aviso { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-bg); }
    .rs-tudo-ok { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ok); font-weight: 500; }
    .rs-tudo-ok svg { width: 20px; height: 20px; }

    /* atividade recente */
    .rs-ativ { display: flex; flex-direction: column; }
    .rs-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: start; }
    .rs-ev:last-child { border-bottom: none; }
    .rs-ev .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--info-bg); color: var(--info); }
    .rs-ev .ic svg { width: 15px; height: 15px; }
    .rs-ev.ok    .ic { background: var(--ok-bg);     color: var(--ok); }
    .rs-ev.aviso .ic { background: var(--warn-bg);   color: var(--warn); }
    .rs-ev.erro  .ic { background: var(--danger-bg); color: var(--danger); }
    .rs-ev .m { font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; }
    .rs-ev .d { font-size: var(--fs-xs); color: var(--text-mut); margin-top: 1px; overflow-wrap: anywhere; }
    .rs-ev time { font-size: var(--fs-xs); color: var(--text-mut); font-family: var(--mono); padding-top: 2px; }

    @media (max-width: 1360px) { .rs-c8 { grid-column: span 12; } .rs-grade .rs-c4 { grid-column: span 6; } }
    @media (max-width: 1180px) { .rs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-c6 { grid-column: span 12; } }
    @media (max-width: 760px) {
      .rs-kpis { grid-template-columns: 1fr; }
      .rs-grade .rs-c4, .rs-c6, .rs-c8 { grid-column: span 12; }
      .rs-cats { grid-template-columns: 1fr; }
      .rs-card-h { flex-wrap: wrap; }
    }
    @media (prefers-reduced-motion: reduce) { .rs-kpi, .rs-kpi:hover, .rs-acao:hover { transition: none; transform: none; } }

    /* ── RESUMO: movimento ────────────────────────────────────────────────
       Entrada (classe .rs-anim, ligada ao abrir a aba e retirada logo depois):
       cartões sobem em cascata, barras crescem, linhas se desenham e o anel
       gira. Trocar a janela do gráfico (.rs-revela) redesenha as linhas da
       esquerda pra direita. Só transform/opacity/clip-path. */
    @keyframes rsEntra { from { opacity: 0; transform: translateY(18px); } }
    @keyframes rsCrescX { from { transform: scaleX(0); } }
    @keyframes rsRevela { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px -12px -12px -12px); } }
    @keyframes rsGira { from { opacity: 0; transform: rotate(-110deg) scale(.82); } }

    .rs-anim .rs-kpi { animation: rsEntra .65s var(--ease) backwards; }
    .rs-anim .rs-kpi:nth-child(2) { animation-delay: 70ms; }
    .rs-anim .rs-kpi:nth-child(3) { animation-delay: 140ms; }
    .rs-anim .rs-kpi:nth-child(4) { animation-delay: 210ms; }
    .rs-anim .rs-grade > .rs-card { animation: rsEntra .7s var(--ease) 300ms backwards; }
    .rs-anim .rs-grade > .rs-card:nth-child(2) { animation-delay: 370ms; }
    .rs-anim .rs-grade > .rs-card:nth-child(3) { animation-delay: 440ms; }
    .rs-anim .rs-grade > .rs-card:nth-child(4) { animation-delay: 510ms; }
    .rs-anim .rs-grade > .rs-card:nth-child(5) { animation-delay: 580ms; }
    .rs-anim .rs-grade > .rs-card:nth-child(6) { animation-delay: 650ms; }
    .rs-anim .rs-grade > .rs-card:nth-child(7) { animation-delay: 720ms; }

    .rs-anim .rs-delta { animation: rsEntra .5s var(--ease) .55s backwards; }
    .rs-anim .rs-spark svg { animation: rsRevela .9s var(--ease) .45s backwards; }
    .rs-anim .rs-anel svg { animation: rsGira 1.1s var(--ease) .3s backwards; }
    .rs-anim .rs-linha, .rs-anim .rs-cat, .rs-anim .rs-ev {
      animation: rsEntra .5s var(--ease) backwards; animation-delay: calc(480ms + var(--n, 0) * 55ms);
    }
    .rs-anim .rs-barra .tr i { transform-origin: left; animation: rsCrescX .9s var(--ease) backwards; animation-delay: calc(560ms + var(--n, 0) * 55ms); }
    .rs-anim .rs-seg i { transform-origin: left; animation: rsCrescX .9s var(--ease) 480ms backwards; }

    .rs-revela svg { animation: rsRevela 1s var(--ease) backwards; }
    .rs-revela .rs-grade-l text, .rs-revela .rs-eixo-x text { animation: rsEntra .5s var(--ease) backwards; }

    @media (prefers-reduced-motion: reduce) {
      .rs-anim *, .rs-revela * { animation: none !important; }
    }

    /* legenda do anel: "Solicitados" é o total (sem cor de status) e "Em revisão" é parte dos pendentes */
    .rs-legenda i.oco { background: none; box-shadow: inset 0 0 0 2px var(--text-mut); }
    .rs-legenda small { color: var(--text-mut); font-size: 11px; margin-left: 2px; }

    /* ══ MÓDULOS ═══════════════════════════════════════════════════════════
       Cada módulo tem a sua cor base. As variáveis de cor abaixo são
       "registradas" (@property, tipo <color>): assim o navegador INTERPOLA o
       valor quando o tema muda, e tudo que usa a variável — menu, botões,
       fundos, bordas — funde de uma cor pra outra, em vez de trocar num corte.
       Gestão Linkana = roxo (o tema base, no :root). Gestão F.D. = azul ardósia. */
    @property --bg            { syntax: '<color>'; inherits: true; initial-value: #eff0fa; }
    @property --surface-2     { syntax: '<color>'; inherits: true; initial-value: #f5f5fd; }
    @property --surface-3     { syntax: '<color>'; inherits: true; initial-value: #eceef8; }
    @property --border        { syntax: '<color>'; inherits: true; initial-value: #e1e3f0; }
    @property --border-strong { syntax: '<color>'; inherits: true; initial-value: #c5cae4; }
    @property --accent        { syntax: '<color>'; inherits: true; initial-value: #5544c4; }
    @property --accent-strong { syntax: '<color>'; inherits: true; initial-value: #4232a3; }
    @property --accent-soft   { syntax: '<color>'; inherits: true; initial-value: #efedfa; }
    @property --accent-border { syntax: '<color>'; inherits: true; initial-value: #cdc6f2; }
    @property --ink           { syntax: '<color>'; inherits: true; initial-value: #1e1936; }
    @property --ink-2         { syntax: '<color>'; inherits: true; initial-value: #282245; }
    @property --ink-line      { syntax: '<color>'; inherits: true; initial-value: #332c54; }
    @property --ink-fg        { syntax: '<color>'; inherits: true; initial-value: #a3a9c8; }
    @property --ink-fg-2      { syntax: '<color>'; inherits: true; initial-value: #8087ad; }
    @property --ink-icon      { syntax: '<color>'; inherits: true; initial-value: #b4aaf8; }

    @property --surface       { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
    @property --text          { syntax: '<color>'; inherits: true; initial-value: #171a2b; }
    @property --text-dim      { syntax: '<color>'; inherits: true; initial-value: #4b5169; }
    @property --text-mut      { syntax: '<color>'; inherits: true; initial-value: #676d8c; }
    @property --data          { syntax: '<color>'; inherits: true; initial-value: #737a9b; }
    @property --ok            { syntax: '<color>'; inherits: true; initial-value: #0f6b41; }
    @property --ok-bg         { syntax: '<color>'; inherits: true; initial-value: #d5f0e2; }
    @property --ok-fill       { syntax: '<color>'; inherits: true; initial-value: #1f9d63; }
    @property --ok-soft       { syntax: '<color>'; inherits: true; initial-value: #ebf8f1; }
    @property --warn          { syntax: '<color>'; inherits: true; initial-value: #8a4b00; }
    @property --warn-bg       { syntax: '<color>'; inherits: true; initial-value: #ffe6b3; }
    @property --warn-fill     { syntax: '<color>'; inherits: true; initial-value: #cc7400; }
    @property --warn-soft     { syntax: '<color>'; inherits: true; initial-value: #fff5d9; }
    @property --danger        { syntax: '<color>'; inherits: true; initial-value: #a31d15; }
    @property --danger-bg     { syntax: '<color>'; inherits: true; initial-value: #ffd9d4; }
    @property --danger-fill   { syntax: '<color>'; inherits: true; initial-value: #dc3a30; }
    @property --danger-soft   { syntax: '<color>'; inherits: true; initial-value: #fff0ee; }
    @property --info          { syntax: '<color>'; inherits: true; initial-value: #1a4fb5; }
    @property --info-bg       { syntax: '<color>'; inherits: true; initial-value: #dbe8ff; }
    @property --info-fill     { syntax: '<color>'; inherits: true; initial-value: #2f6fe0; }
    @property --info-soft     { syntax: '<color>'; inherits: true; initial-value: #eef4ff; }
    @property --violet        { syntax: '<color>'; inherits: true; initial-value: #6432b8; }
    @property --violet-bg     { syntax: '<color>'; inherits: true; initial-value: #eadffd; }
    @property --violet-fill   { syntax: '<color>'; inherits: true; initial-value: #8b4fe0; }
    @property --violet-soft   { syntax: '<color>'; inherits: true; initial-value: #f6f1ff; }

    :root {
      transition:
        --bg .95s ease-in-out,
        --surface .95s ease-in-out,
        --surface-2 .95s ease-in-out,
        --surface-3 .95s ease-in-out,
        --border .95s ease-in-out,
        --border-strong .95s ease-in-out,
        --text .95s ease-in-out,
        --text-dim .95s ease-in-out,
        --text-mut .95s ease-in-out,
        --data .95s ease-in-out,
        --accent .95s ease-in-out,
        --accent-strong .95s ease-in-out,
        --accent-soft .95s ease-in-out,
        --accent-border .95s ease-in-out,
        --ok .95s ease-in-out,
        --ok-bg .95s ease-in-out,
        --ok-fill .95s ease-in-out,
        --ok-soft .95s ease-in-out,
        --warn .95s ease-in-out,
        --warn-bg .95s ease-in-out,
        --warn-fill .95s ease-in-out,
        --warn-soft .95s ease-in-out,
        --danger .95s ease-in-out,
        --danger-bg .95s ease-in-out,
        --danger-fill .95s ease-in-out,
        --danger-soft .95s ease-in-out,
        --info .95s ease-in-out,
        --info-bg .95s ease-in-out,
        --info-fill .95s ease-in-out,
        --info-soft .95s ease-in-out,
        --violet .95s ease-in-out,
        --violet-bg .95s ease-in-out,
        --violet-fill .95s ease-in-out,
        --violet-soft .95s ease-in-out,
        --ink .95s ease-in-out,
        --ink-2 .95s ease-in-out,
        --ink-line .95s ease-in-out,
        --ink-fg .95s ease-in-out,
        --ink-fg-2 .95s ease-in-out,
        --ink-icon .95s ease-in-out;
    }
    @media (prefers-reduced-motion: reduce) { :root { transition: none; } }
    :root[data-modulo="fd"] {
      --bg: #edf1f6; --surface-2: #f4f7fb; --surface-3: #e8edf4; --border: #dde4ee; --border-strong: #c3cddc;
      --accent: #46648f; --accent-strong: #34507a; --accent-soft: #eaf0f8; --accent-border: #c3d2e8;
      --ink: #1b2637; --ink-2: #253349; --ink-line: #32425b; --ink-fg: #9dacc4; --ink-fg-2: #7e8fa9; --ink-icon: #a6bddb;
    }

    /* o que aparece em cada módulo (troca no meio da animação: data-modulo-ativo) */
    /* Cada módulo tem o seu grupo de menu e as suas páginas (data-mod). Só as do módulo ativo aparecem;
       cada módulo guarda a própria aba ativa, então voltar a ele reabre onde estava. */
    .nav-grupo { display: none; }
    html[data-modulo-ativo="linkana"] .nav-grupo[data-modulo="linkana"],
    html[data-modulo-ativo="fd"] .nav-grupo[data-modulo="fd"],
    html[data-modulo-ativo="plataforma"] .nav-grupo[data-modulo="plataforma"] { display: contents; }
    .main > .view[data-mod] { display: none !important; }
    html[data-modulo-ativo="linkana"] .main > .view.active[data-mod="linkana"],
    html[data-modulo-ativo="fd"] .main > .view[data-mod="fd"],
    html[data-modulo-ativo="plataforma"] .main > .view.active[data-mod="plataforma"] { display: block !important; }
    html:not([data-modulo-ativo="linkana"]) #progress,
    html:not([data-modulo-ativo="linkana"]) .top-actions { display: none; }
    .mod-cab { display: none; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    html:not([data-modulo-ativo="linkana"]) .mod-cab { display: flex; }
    .mod-cab-nome { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }

    .nav-vazio {
      margin: 8px 2px; padding: 22px 6px; border: 1px dashed var(--ink-line); border-radius: 12px;
      text-align: center; font-size: 11px; line-height: 1.45; color: var(--ink-fg-2);
    }
    .fd-vazio {
      max-width: 460px; min-height: calc(100vh - 230px); margin: 0 auto;
      display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px;
    }
    .fd-vazio-ico {
      width: 78px; height: 78px; border-radius: 24px; display: grid; place-items: center;
      background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border);
    }
    .fd-vazio-ico svg { width: 38px; height: 38px; }
    .fd-vazio h2 { font-size: var(--fs-xl); letter-spacing: -.015em; }
    .fd-vazio p { font-size: var(--fs-sm); color: var(--text-mut); line-height: 1.6; }

    /* lista de módulos */
    .modulo-item { transition: background .3s; }
    .modulo-logo.modulo-fd {
      display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .04em;
      background: linear-gradient(135deg, #5d7ba6, #2c4266);
    }
    .modulo-check { opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease); }
    .modulo-item.ativo .modulo-check { opacity: 1; transform: none; }

    /* a troca: sai (~0,3 s) → conteúdo muda por baixo → entra em cascata (~1 s) */
    @keyframes modItemSai    { to { opacity: 0; transform: translateX(-16px) scale(.92); } }
    @keyframes modItemEntra  { from { opacity: 0; transform: translateX(16px) scale(.92); } }
    @keyframes modPaginaSai  { to { opacity: 0; transform: translateY(10px) scale(.992); } }
    @keyframes modPaginaEntra { from { opacity: 0; transform: translateY(18px) scale(.99); } }
    @keyframes modCabSai     { to { opacity: 0; transform: translateY(-6px); } }
    @keyframes modCabEntra   { from { opacity: 0; transform: translateY(10px); } }
    .mod-saindo .nav-grupo > * { animation: modItemSai .28s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
    .mod-entrando .nav-grupo > * { animation: modItemEntra .6s var(--ease) backwards; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
    .mod-entrando .nav-ind.on { animation: modItemEntra .6s var(--ease) .15s backwards; }
    .mod-saindo .main { animation: modPaginaSai .3s var(--ease) both; }
    .mod-entrando .main { animation: modPaginaEntra .75s var(--ease) .05s both; }
    .mod-saindo .top-header > * { animation: modCabSai .28s var(--ease) both; }
    .mod-entrando .top-header > * { animation: modCabEntra .6s var(--ease) .1s backwards; }

    @media (prefers-reduced-motion: reduce) {
      :root { transition: none; }
      .mod-saindo *, .mod-entrando * { animation: none !important; }
    }

    /* miolo do anel: total de documentos solicitados */
    .rs-anel { position: relative; }
    .rs-anel-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; pointer-events: none; }
    .rs-anel-centro b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
    .rs-anel-centro small { font-size: 10px; font-weight: 500; color: var(--text-mut); margin-top: 2px; }

    /* Ícone do módulo no topo do menu: o do módulo que sai encolhe e gira enquanto o
       do que entra cresce no mesmo lugar (ligado ao data-modulo: acompanha a fusão das cores) */
    .sidebar .brand { display: grid; place-items: center; }
    .brand .mark-mod { grid-area: 1 / 1; transition: opacity .6s ease-in-out, transform .8s var(--ease); }
    .brand .mark-mod { opacity: 0; transform: scale(.5) rotate(-16deg); pointer-events: none; }
    html[data-modulo="linkana"] .brand .mark-linkana,
    html[data-modulo="fd"] .brand .mark-fd,
    html[data-modulo="plataforma"] .brand .mark-plataforma { opacity: 1; transform: none; pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) { .brand .mark-mod { transition: none; } }

    /* ── Cartão dos módulos: se expande do botão até a borda direita ─────────
       Ancorado embaixo, alinhado ao botão (left/bottom vêm do JS) e com folga
       visível à direita. O 1º "quadrado" do cartão repete o botão apertado, por
       isso a expansão parece nascer dele. */
    .modulo-veu { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--ink) 38%, transparent); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
    .modulo-veu.on { opacity: 1; pointer-events: auto; }
    .modulo-painel {
      position: fixed; z-index: 90; display: grid; grid-template-columns: var(--bw, 76px) minmax(0, 1fr); align-items: end;
      background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    }
    .modulo-painel[hidden] { display: none; }
    .modulo-fechar {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      height: var(--bh, 62px); border: none; background: none; cursor: pointer;
      font: inherit; font-size: 11px; font-weight: 500; color: var(--ink-fg-hi);
    }
    .modulo-fechar svg { width: 26px; height: 26px; color: #fff; transition: transform .5s var(--ease); }
    .modulo-painel.abrindo .modulo-fechar svg { transform: rotate(90deg); }
    .modulo-corpo { padding: 16px 18px 16px 8px; min-width: 0; }
    .modulo-painel .modulo-menu-tit { padding: 0 6px 10px; }
    .modulo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
    .modulo-painel .modulo-item {
      padding: 14px 16px; gap: 14px; border-radius: 14px; border: 1px solid var(--ink-line);
      background: color-mix(in srgb, var(--ink) 55%, transparent);
    }
    .modulo-painel .modulo-item:hover { background: var(--ink); border-color: var(--ink-icon); }
    .modulo-painel .modulo-item.ativo { background: color-mix(in srgb, var(--ink-icon) 14%, transparent); border-color: color-mix(in srgb, var(--ink-icon) 55%, transparent); }
    .modulo-painel .modulo-item .mark { width: 44px; height: 44px; border-radius: 12px; }
    .modulo-painel .modulo-logo.modulo-fd { font-size: 15px; }
    .modulo-painel .modulo-txt b { font-size: var(--fs-md); }
    .modulo-painel .modulo-txt small { margin-top: 2px; }
    /* o conteúdo aparece depois que o cartão já abriu, em cascata */
    @keyframes moduloConteudo { from { opacity: 0; transform: translateY(10px); } }
    .modulo-painel.abrindo .modulo-menu-tit { animation: moduloConteudo .45s var(--ease) .2s backwards; }
    .modulo-painel.abrindo .modulo-item { animation: moduloConteudo .5s var(--ease) backwards; }
    .modulo-painel.abrindo .modulo-item:nth-child(1) { animation-delay: .26s; }
    .modulo-painel.abrindo .modulo-item:nth-child(2) { animation-delay: .34s; }
    .modulo-painel.fechando .modulo-corpo { opacity: 0; transition: opacity .18s ease; }
    @media (prefers-reduced-motion: reduce) { .modulo-painel *, .modulo-veu { animation: none !important; transition: none !important; } }
    .modulo-menu-tit { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-fg-2); }

    /* Cartão dos módulos, versão final: uma faixa ao lado do menu, na altura do botão,
       até a borda direita (left/right/top/height vêm do JS). O véu fica ABAIXO do menu:
       o botão continua à vista, apertado. */
    .modulo-veu { z-index: 35; }
    .modulo-painel {
      display: flex; align-items: stretch; padding: 9px 10px; grid-template-columns: none; min-height: 0; gap: 10px;
      background: var(--ink); border: 1px solid var(--ink-line);
    }
    .modulo-btn.aberto { background: color-mix(in srgb, var(--ink-icon) 16%, var(--ink-2)); }
    .modulo-corpo { padding: 0; display: flex; min-width: 0; }
    .modulo-menu-tit { display: none; }
    .modulo-lista { display: flex; gap: 10px; }
    .modulo-painel .modulo-item { width: 310px; padding: 0 16px; gap: 12px; }
    .modulo-painel .modulo-item .mark { width: 38px; height: 38px; }
    .modulo-painel .modulo-txt { min-width: 0; }
    .modulo-painel .modulo-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .modulo-painel.abrindo .modulo-item:nth-child(1) { animation-delay: .2s; }
    .modulo-painel.abrindo .modulo-item:nth-child(2) { animation-delay: .28s; }

    /* ══ ACESSO: cargo system, plataforma, usuário logado ═══════════════════ */
    /* Esquema de cores oficial do sistema Link (o azul do ícone L·GD): vale para a tela de login e para
       o módulo Gestão da Plataforma. Base #3589ac do ícone, sombra #065980, luz #67b2cd. */
    :root[data-modulo="plataforma"] {
      --bg: #ebf2f7; --surface-2: #f2f7fa; --surface-3: #e4edf3; --border: #d8e4ec; --border-strong: #bccfdb;
      --accent: #2b7a9f; --accent-strong: #1d5f7f; --accent-soft: #e6f1f7; --accent-border: #b7d6e6;
      --ink: #0f2a3d; --ink-2: #183a52; --ink-line: #24475f; --ink-fg: #9db8c9; --ink-fg-2: #7d9bb0; --ink-icon: #8fc7e0;
    }

    /* ícone da plataforma no fim do cartão de módulos (só o system) */
    .modulo-plat {
      flex-shrink: 0; align-self: center; margin-left: auto; width: 54px; height: 54px; border-radius: 15px;
      display: grid; place-items: center; cursor: pointer; color: var(--ink-fg);
      background: color-mix(in srgb, var(--ink) 55%, transparent); border: 1px solid var(--ink-line);
      transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
    }
    .modulo-plat svg { width: 26px; height: 26px; }
    .modulo-plat:hover { color: #fff; border-color: var(--ink-icon); transform: translateY(-2px); }
    html[data-modulo="plataforma"] .modulo-plat { color: #fff; background: color-mix(in srgb, var(--ink-icon) 20%, transparent); border-color: color-mix(in srgb, var(--ink-icon) 60%, transparent); }
    html:not([data-modulos~="plataforma"]) .modulo-plat { display: none; }
    html:not([data-modulos~="linkana"]) .modulo-item[data-modulo="linkana"],
    html:not([data-modulos~="fd"]) .modulo-item[data-modulo="fd"] { display: none; }

    /* usuário logado no cabeçalho */
    .usr { position: relative; flex-shrink: 0; }
    .usr-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); cursor: pointer; display: grid; place-items: center; font: inherit; transition: box-shadow .25s, transform .25s var(--ease); }
    .usr-btn:hover, .usr-btn[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
    .usr-av { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; }
    .usr-menu {
      position: absolute; right: 0; top: calc(100% + 10px); width: 250px; z-index: 60; padding: 6px;
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(23, 26, 43, .16);
      animation: rsEntra .28s var(--ease);
    }
    .usr-menu[hidden] { display: none; }
    .usr-info { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
    .usr-info b { display: block; font-size: var(--fs-md); }
    .usr-info small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-mut); }
    .usr-menu .acoes-item { width: 100%; }
    .usr-versao { margin-top: 6px; padding: 10px 12px 6px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-mut); }

    /* perfil somente-leitura: sem Cadastros e sem os botões de escrever (o servidor recusa de qualquer jeito) */
    html[data-perfil="control"] .nav-cad,
    html[data-perfil="control"] .nav-op,
    html[data-perfil="control"] .nav-item[data-view="coleta"],
    html[data-perfil="control"] .nav-item[data-view^="cad-"],
    html[data-perfil="control"] .mat-import-acoes,
    html[data-perfil="control"] .mat-cad-topo .cd-b,
    html[data-perfil="control"] .conf-acoes,
    html[data-perfil="control"] .fx-conf,
    html[data-perfil="control"] .fx-lapis,
    html[data-perfil="control"] .dl-lin.editavel .dl-abrir,
    html[data-perfil="control"] #pd-copy-one,
    html[data-perfil="control"] .acoes-item[onclick*="verificarUnica"] { display: none !important; }
    /* TrialSystem: vê tudo (Cadastros inclusive), mas nenhum botão que escreve — e o servidor recusa toda escrita */
    html[data-perfil="trialsystem"] .mat-import-acoes,
    html[data-perfil="trialsystem"] .mat-cad-topo .cd-b,
    html[data-perfil="trialsystem"] .conf-acoes,
    html[data-perfil="trialsystem"] .fx-conf,
    html[data-perfil="trialsystem"] .fx-lapis,
    html[data-perfil="trialsystem"] .dl-lin.editavel .dl-abrir,
    html[data-perfil="trialsystem"] #pd-copy-one,
    html[data-perfil="trialsystem"] #us-novo,
    html[data-perfil="trialsystem"] #usr-ajuda,
    html[data-perfil="trialsystem"] #usr-senha,
    html[data-perfil="trialsystem"] .us-lin .dl-abrir,
    html[data-perfil="trialsystem"] .rq-chk input,
    html[data-perfil="trialsystem"] .acoes-item[onclick*="verificarUnica"] { display: none !important; }
    html[data-perfil="trialsystem"] .fx-item[data-etapa-editar],
    html[data-perfil="trialsystem"] .dl-lin.editavel,
    html[data-perfil="trialsystem"] .us-lin { cursor: default; }
        html[data-perfil="control"] .fx-item[data-etapa-editar],
    html[data-perfil="control"] .dl-lin.editavel { cursor: default; }

    /* Plataforma › Usuários */
    .us-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
    .us-barra .cd-busca { margin-left: auto; }
    .us-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .us-filtros .subtab .n { margin-left: 4px; opacity: .7; font-weight: 700; }
    /* Lista de usuários: colunas de largura FIXA (cabeçalho e linhas usam a mesma grade), então tudo alinha embaixo do título */
    .us-cab, .us-lin {
      display: grid; align-items: center; column-gap: 16px;
      grid-template-columns: 44px minmax(130px, 1fr) 130px minmax(160px, 1.4fr) 140px 84px 110px 70px 28px;
    }
    .us-cab { padding: 0 18px 8px 20px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); }
    .us-lista { display: flex; flex-direction: column; gap: 8px; }
    .us-lin {
      --uc: var(--border-strong);
      padding: 12px 18px 12px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer;
      box-shadow: inset 4px 0 0 var(--uc);
      animation: rsEntra .5s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 45ms);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
    }
    .us-lin:hover { transform: translateX(3px); border-color: var(--accent-border); box-shadow: inset 4px 0 0 var(--uc), 0 6px 18px rgba(23, 26, 43, .07); }
    .us-c { min-width: 0; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .us-c svg { width: 14px; height: 14px; flex: none; color: var(--text-mut); }
    .us-vazio { font-style: normal; color: var(--text-mut); opacity: .7; }
    .us-acesso { font-size: var(--fs-xs); }
    .us-lin.system { --uc: var(--violet-fill); }
    .us-lin.trialsystem { --uc: color-mix(in srgb, var(--violet-fill) 45%, white); }
    .us-lin.admin { --uc: var(--info-fill); }
    .us-lin.inativo { opacity: .6; }
    .us-lin.inativo .us-av { filter: grayscale(1); }
    .us-av { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; font-weight: 700; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-strong); }
    .us-lin.system .us-av { background: var(--violet-fill); color: #fff; }
    .us-lin.trialsystem .us-av { background: var(--violet-bg); color: var(--violet); }
    .us-lin.admin .us-av { background: var(--info-bg); color: var(--info); }
    .us-nome { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .us-nome small { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--violet-bg); font-weight: 700; font-size: 11px; color: var(--violet); vertical-align: middle; }
    .us-mods { display: flex; gap: 6px; flex-wrap: wrap; }
    /* módulo com acesso: só o ícone, pequeno; o nome vai no balão */
    .us-mod { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); }
    .us-mod img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }
    .us-mod svg { width: 14px; height: 14px; color: var(--accent-strong); }
    .us-lin .dl-abrir { opacity: .5; }
    .us-lin:hover .dl-abrir { opacity: 1; background: var(--accent-soft); color: var(--accent); }
    @media (max-width: 1250px) { .us-cab, .us-lin { grid-template-columns: 44px minmax(120px, 1fr) 120px minmax(140px, 1.3fr) 84px 70px 28px; } .us-cab > :nth-child(5), .us-cab > :nth-child(7), .us-lin > .us-tel, .us-lin > .us-acesso { display: none; } }

    /* Notificações: ficam até serem marcadas como vistas e excluídas */
    .log-acoes { flex-shrink: 0; display: flex; gap: 8px; padding: 4px 20px 10px; }
    .log-acoes[hidden] { display: none; }
    .log-acao-btn { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); transition: background .2s, color .2s, border-color .2s; }
    .log-acao-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }
    .log-acao-btn:disabled { opacity: .45; cursor: default; }
    .log-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    .log-qtd { margin-left: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-mut); }
    .log-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
    .log-btn svg { width: 15px; height: 15px; }
    .log-btn.ok:hover { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-fill); }
    .log-btn.del:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-fill); }
    .log-item.vista .log-txt, .log-item.vista .log-ic, .log-item.vista .log-hora { opacity: .55; }

    /* ═══ Requisições (chamados) — só o cargo system; tudo aqui é propositalmente ALTO ═══ */
    .pl-largo { width: min(620px, 100vw); }
    .modulo-plat { position: relative; }
    .modulo-plat-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger-fill); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); animation: rqBatida 1.3s ease-in-out infinite; }
    .modulo-plat-n[hidden] { display: none; }
    @keyframes rqBatida { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
    @keyframes rqPisca { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

    .rq-faixa { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: linear-gradient(90deg, #b3150d, #dc3a30 50%, #b3150d); background-size: 200% 100%; color: #fff; font-size: var(--fs-md); animation: rqFaixa 3s linear infinite; position: relative; z-index: 30; }
    .rq-faixa[hidden] { display: none; }
    @keyframes rqFaixa { to { background-position: -200% 0; } }
    .rq-sirene { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; animation: rqBatida 1s ease-in-out infinite; flex: none; }
    .rq-sirene svg { width: 18px; height: 18px; }
    .rq-faixa-txt { flex: 1; min-width: 0; }
    .rq-faixa-btn { border: 2px solid #fff; background: #fff; color: #a31d15; font: inherit; font-weight: 800; padding: 6px 16px; border-radius: 999px; cursor: pointer; transition: transform .2s; }
    .rq-faixa-btn:hover { transform: scale(1.05); }

    .rq-alerta-veu { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(120, 12, 8, .55); backdrop-filter: blur(4px); animation: rqVeu .25s ease; }
    @keyframes rqVeu { from { opacity: 0; } }
    .rq-alerta { width: 100%; max-width: 480px; text-align: center; padding: 30px 30px 24px; background: var(--surface); border-radius: 22px; border-top: 8px solid var(--danger-fill); box-shadow: 0 0 0 4px rgba(220, 58, 48, .35), 0 30px 90px rgba(0,0,0,.45); animation: rqAlertaEntra .5s var(--ease), rqTreme 4s ease-in-out .6s infinite; }
    @keyframes rqAlertaEntra { from { transform: scale(.85) translateY(20px); opacity: 0; } }
    @keyframes rqTreme { 0%, 90%, 100% { transform: none; } 92% { transform: translateX(-5px); } 94% { transform: translateX(5px); } 96% { transform: translateX(-4px); } 98% { transform: translateX(3px); } }
    .rq-alerta-ico { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--danger-fill); color: #fff; display: grid; place-items: center; animation: rqBatida 1s ease-in-out infinite; }
    .rq-alerta-ico svg { width: 34px; height: 34px; }
    .rq-alerta-alta { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; color: var(--danger); animation: rqPisca 1s infinite; }
    .rq-alerta h2 { font-size: 22px; margin: 4px 0 2px; letter-spacing: -.015em; }
    .rq-alerta-quem { color: var(--text-mut); font-size: var(--fs-sm); }
    .rq-alerta blockquote { margin: 14px 0 6px; padding: 12px 14px; text-align: left; background: var(--danger-soft); border-left: 4px solid var(--danger-fill); border-radius: 8px; font-size: var(--fs-md); line-height: 1.5; }
    .rq-alerta-mais { font-size: var(--fs-sm); color: var(--danger); margin-top: 8px; }
    .rq-alerta-acoes { display: flex; gap: 8px; margin-top: 18px; }
    .rq-alerta-acoes .cd-b { flex: 1; justify-content: center; padding: 11px 10px; }
    .rq-btn-forte { flex: 1.5 !important; background: var(--danger-fill) !important; border-color: var(--danger-fill) !important; color: #fff !important; font-weight: 800; }
    .rq-alerta-link { margin-top: 12px; border: none; background: none; color: var(--text-mut); font: inherit; font-size: var(--fs-xs); text-decoration: underline; cursor: pointer; }

    .rq-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
    .rq-kpi { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font: inherit; cursor: pointer; transition: transform .2s, box-shadow .2s; }
    .rq-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23,26,43,.1); }
    .rq-kpi .k { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mut); }
    .rq-kpi .v { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
    .rq-kpi .s { font-size: var(--fs-xs); color: var(--text-mut); }
    .rq-kpi.danger { background: var(--danger-soft); border-color: var(--danger-fill); } .rq-kpi.danger .v, .rq-kpi.danger .k { color: var(--danger); }
    .rq-kpi.info { background: var(--info-soft); border-color: var(--info-bg); } .rq-kpi.info .v { color: var(--info); }
    .rq-kpi.warn { background: var(--warn-soft); border-color: var(--warn-bg); } .rq-kpi.warn .v { color: var(--warn); }
    .rq-kpi.ok { background: var(--ok-soft); border-color: var(--ok-bg); } .rq-kpi.ok .v { color: var(--ok); }
    .rq-kpi.neutro { cursor: default; }
    .rq-kpi.pulsa { animation: rqPulsoKpi 1.6s ease-in-out infinite; }
    @keyframes rqPulsoKpi { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,58,48,.45); } 50% { box-shadow: 0 0 0 8px rgba(220,58,48,0); } }

    .rq-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
    .rq-abas .subtab .n { margin-left: 4px; opacity: .7; font-weight: 700; }
    .rq-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .rq-filtros-dir { margin-left: auto; display: flex; gap: 8px; }
    .rq-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-border); }
    .rq-bulk[hidden] { display: none; }
    .rq-bulk b { margin-right: 6px; }

    .rq-lista { display: flex; flex-direction: column; gap: 8px; }
    .rq-cab-lista, .rq-lin { display: grid; grid-template-columns: 28px 130px minmax(140px, 1fr) minmax(160px, 2fr) 110px 130px 130px; gap: 12px; align-items: center; }
    .rq-cab-lista { padding: 0 14px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mut); }
    .rq-lin { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); border-left: 5px solid var(--border); background: var(--surface); cursor: pointer; transition: transform .2s, box-shadow .2s; }
    .rq-lin:hover { transform: translateX(3px); box-shadow: 0 6px 18px rgba(23,26,43,.09); }
    .rq-lin.urgente { border-left-color: var(--danger-fill); } .rq-lin.alta { border-left-color: var(--warn-fill); } .rq-lin.normal { border-left-color: var(--info-fill); }
    .rq-lin.st-aberta { background: var(--danger-soft); }
    .rq-lin.critico { animation: rqPulsoKpi 1.6s ease-in-out infinite; }
    .rq-lin.st-resolvida { opacity: .7; }
    .rq-proto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    .rq-quem { display: flex; flex-direction: column; min-width: 0; }
    .rq-quem small { color: var(--text-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rq-quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rq-msg { color: var(--text-dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-sm); }
    .rq-espera { font-size: var(--fs-sm); font-weight: 600; }
    .rq-lin.critico .rq-espera { color: var(--danger); }
    .rq-resp { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); min-width: 0; }
    .rq-resp em { color: var(--text-mut); }
    .rq-av { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
    .rq-chk { display: grid; place-items: center; }
    @media (max-width: 1000px) { .rq-kpis { grid-template-columns: repeat(2, 1fr); } .rq-cab-lista { display: none; } .rq-lin { grid-template-columns: 28px 1fr 1fr; } .rq-msg { grid-column: 2 / -1; } }

    .rq-det { display: flex; flex-direction: column; gap: 14px; }
    .rq-det-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .rq-det-tempo { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--text-mut); }
    .rq-det-tempo.critico { color: var(--danger); } .rq-det-tempo.atencao { color: var(--warn); }
    .rq-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
    .rq-card-t { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); margin-bottom: 8px; }
    .rq-quem-g { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }
    .rq-contato { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); padding: 3px 0; flex-wrap: wrap; }
    .rq-contato svg { width: 15px; height: 15px; color: var(--text-mut); }
    .rq-contato a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
    .rq-contato a:hover { text-decoration: underline; }
    .rq-mini { border: 1px solid var(--border); background: var(--surface-2); border-radius: 7px; padding: 2px 9px; font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); cursor: pointer; text-decoration: none !important; }
    .rq-mini:hover { background: var(--accent-soft); color: var(--accent-strong) !important; }
    .rq-origem { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-mut); }
    .rq-mensagem { white-space: pre-wrap; line-height: 1.6; font-size: var(--fs-md); padding: 12px 14px; background: var(--surface-2); border-radius: 10px; }
    .rq-resposta-acoes { margin-top: 10px; display: flex; gap: 8px; }
    .rq-resp-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .rq-rot { font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); margin: 10px 0 5px; }
    .rq-seg { flex-wrap: wrap; }
    .rq-historico { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 260px; overflow-y: auto; }
    .rq-hist { display: flex; gap: 10px; font-size: var(--fs-sm); }
    .rq-hist .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--text-mut); margin-top: 5px; flex: none; }
    .rq-hist.nota .ponto { background: var(--accent); }
    .rq-hist.nota .t { background: var(--accent-soft); padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; }
    .rq-hist .m { font-size: var(--fs-xs); color: var(--text-mut); margin-top: 2px; }
    @media (prefers-reduced-motion: reduce) { .rq-faixa, .rq-sirene, .rq-alerta, .rq-alerta-ico, .rq-alerta-alta, .rq-kpi.pulsa, .rq-lin.critico, .modulo-plat-n { animation: none !important; } }

    .rq-filtros .sel { flex: 0 0 auto; width: 200px; }

    /* Coleta desconectada (console, tecla C) */
    .live-progress-card.is-desconectada { border-color: var(--warn-fill); background: var(--warn-soft); }
    .live-progress-card.is-desconectada .lp-tag { color: var(--warn); font-weight: 700; }

    /* olho (exibir/ocultar) dos campos de senha dos painéis */
    .pl-senha { position: relative; }
    .pl-senha .cd-in { padding-right: 46px; }
    .pl-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--text-mut); display: grid; place-items: center; }
    .pl-olho:hover { background: var(--surface-2); color: var(--text); }
    .pl-olho svg { width: 18px; height: 18px; }

    /* opção só com o ícone (módulos no cadastro de usuário): o nome vai no balão */
    .cd-chips .cd-chip.cd-chip-img { position: relative; width: 54px; height: 54px; padding: 8px; justify-content: center; border-radius: 15px; border: 2px solid var(--border); background: var(--surface); opacity: .55; filter: grayscale(.7); }
    .cd-chip-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
    .cd-chip-img .marca { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: all .3s var(--ease); }
    .cd-chip-img .marca svg { width: 12px; height: 12px; }
    .cd-chips .cd-chip.cd-chip-img:hover { opacity: .9; filter: none; }
    .cd-chips .cd-chip.cd-chip-img.on { opacity: 1; filter: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .cd-chip-img.on .marca { opacity: 1; transform: none; }

    /* seletor de idioma (bandeiras) — menu do perfil e tela de login */
    .idiomas { display: flex; gap: 8px; }
    .idioma-op { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; display: grid; place-items: center; opacity: .55; filter: grayscale(.5); transition: opacity .25s, filter .25s, transform .25s var(--ease), border-color .25s; }
    .idioma-op img { width: 100%; height: 100%; border-radius: 50%; display: block; }
    .idioma-op:hover { opacity: 1; filter: none; transform: translateY(-1px) scale(1.06); }
    .idioma-op.on { opacity: 1; filter: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
    .usr-idioma { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; }
    .lg-idiomas { position: fixed; top: 16px; right: 22px; z-index: 3; animation: lgSobe .8s var(--ease) .7s backwards; }

    /* selo "beta" do seletor de idioma: a tradução ainda não cobre tudo */
    .beta-tag { display: inline-block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); vertical-align: middle; }
    .lg-idiomas { display: flex; align-items: center; gap: 10px; }
    .usr-idioma > span { white-space: nowrap; }
    .usr-idioma { padding-left: 12px; padding-right: 12px; gap: 8px; }
    .usr-idioma .idiomas { gap: 6px; }
    .usr-idioma .idioma-op { width: 26px; height: 26px; }

    /* card "Conclusão das unidades": anel + % alinhados à esquerda como os outros cards; legenda em 3 colunas, numa linha só */
    .rs-kpi-anel .rs-anel-caixa { flex: 1; justify-content: flex-start; gap: 24px; margin-top: 4px; }
    .rs-kpi-anel .rs-anel { width: 104px; height: 104px; }
    .rs-kpi-anel .rs-anel-txt .v { font-size: 44px; }
    .rs-kpi-anel .rs-anel-centro b { font-size: 19px; }
    .rs-kpi-anel .rs-anel-centro small { font-size: 11px; }
    .rs-kpi-anel .rs-legenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; margin-top: 10px; }
    .rs-kpi-anel .rs-legenda span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .rs-kpi-anel .rs-legenda b { font-size: 17px; line-height: 1.1; }
    .rs-kpi-anel .rs-legenda em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }

    /* excluir requisição resolvida (dois cliques) */
    .rq-excluir { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
    .rq-excluir small { color: var(--text-mut); font-size: var(--fs-xs); }
    .cd-b.perigo.confirmando { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; animation: rqPisca 1s infinite; }

    /* ═══ Plataforma › Console: o console real do servidor + controles ═══ */
    .cn-painel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
    .cn-cartao { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: inset 4px 0 0 var(--border-strong); }
    .cn-cartao.srv { box-shadow: inset 4px 0 0 var(--accent); }
    .cn-cartao.ok { box-shadow: inset 4px 0 0 var(--ok-fill); }
    .cn-cartao.aviso { box-shadow: inset 4px 0 0 var(--warn-fill); background: var(--warn-soft); }
    .cn-c-t { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mut); }
    .cn-c-v { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 700; }
    .cn-c-v small { font-size: var(--fs-xs); font-weight: 600; color: var(--text-mut); }
    .cn-c-s { font-size: var(--fs-sm); color: var(--text-dim); }
    .cn-cartao .cd-b { margin-top: auto; }
    .cn-luz { width: 9px; height: 9px; border-radius: 50%; background: var(--ok-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok-fill) 25%, transparent); flex: none; }
    .cn-luz.off, .cn-origem.off .cn-luz { background: var(--danger-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-fill) 25%, transparent); }
    .cn-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .cn-origem { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
    .cn-origem small { color: var(--text-mut); }
    .cn-q { font-size: var(--fs-xs); color: var(--text-mut); }
    .cn-busca { width: 220px; }
    #cn-seguir.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
    .cn-terminal {
      height: calc(100vh - 330px); min-height: 300px; overflow: auto; padding: 14px 16px; border-radius: 14px; outline: none;
      background: #14212e; color: #c8ccd4; font: 12.5px/1.5 var(--mono); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }
    .cn-terminal:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
    .cn-l { white-space: pre; }
    .cn-terminal::-webkit-scrollbar { width: 10px; } .cn-terminal::-webkit-scrollbar-thumb { background: #33475a; border-radius: 6px; }
    @media (max-width: 1000px) { .cn-painel { grid-template-columns: 1fr; } }

    /* ═══ MODO ESCURO ═══════════════════════════════════════════════════════════════════
       html[data-tema="escuro"] (tema.js; a escolha fica no navegador). Tudo no sistema já é feito com estas variáveis, então
       trocar o tema é trocar os valores — e, como são "registradas" (@property), o navegador FUNDE claro→escuro em ~1 s,
       sem corte. Cada módulo tem a sua versão escura (o tom de cada um continua reconhecível). Cor nova? Use variável,
       nunca hexadecimal solto, ou ela não acompanha o tema. */
    :root[data-tema="escuro"] {
      color-scheme: dark;
      --bg: #12131f; --surface: #1a1c2b; --surface-2: #212436; --surface-3: #2a2e44; --border: #2b2f47; --border-strong: #3d4363;
      --text: #eceef8; --text-dim: #b8bdd6; --text-mut: #9298b8; --data: #8b91b3;
      --accent: #7466e0; --accent-strong: #a89cf6; --accent-soft: #252247; --accent-border: #3e3878;
      --ok: #6fdca4; --ok-bg: #13382a; --ok-fill: #2fb578; --ok-soft: #0f2a20;
      --warn: #f2b85a; --warn-bg: #3d2c0b; --warn-fill: #e08a1a; --warn-soft: #2b2009;
      --danger: #ff9990; --danger-bg: #43191a; --danger-fill: #ef5a4f; --danger-soft: #2d1414;
      --info: #92b8ff; --info-bg: #17294f; --info-fill: #4a83f0; --info-soft: #111d38;
      --violet: #c6a9ff; --violet-bg: #2e1f55; --violet-fill: #9a63f0; --violet-soft: #221741;
      --ink: #0f0e1f; --ink-2: #1a1733; --ink-line: #292446; --ink-fg: #a3a9c8; --ink-fg-2: #8087ad; --ink-icon: #b4aaf8;
      --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }
    :root[data-tema="escuro"][data-modulo="fd"] {
      --bg: #10151d; --surface: #171e29; --surface-2: #1e2734; --surface-3: #263142; --border: #2a3547; --border-strong: #3a4960;
      --accent: #5f86bd; --accent-strong: #98b7e0; --accent-soft: #1a2a40; --accent-border: #34507a;
      --ink: #0b121d; --ink-2: #172234; --ink-line: #243449; --ink-fg: #9dacc4; --ink-fg-2: #7e8fa9; --ink-icon: #a6bddb;
    }
    :root[data-tema="escuro"][data-modulo="plataforma"] {
      --bg: #0e171c; --surface: #152029; --surface-2: #1b2a34; --surface-3: #243440; --border: #253843; --border-strong: #35505f;
      --accent: #2f8db5; --accent-strong: #6cc0e3; --accent-soft: #15303d; --accent-border: #2a5670;
      --ink: #08181f; --ink-2: #102a38; --ink-line: #1c3a4b; --ink-fg: #9db8c9; --ink-fg-2: #7d9bb0; --ink-icon: #8fc7e0;
    }
    /* tela de login no escuro: as manchas de fundo escurecem junto */
    html[data-tema="escuro"] .lg-fundo .a { background: #1b4a66; }
    html[data-tema="escuro"] .lg-fundo .b { background: #2a3d78; }
    html[data-tema="escuro"] .lg-fundo i { opacity: .5; }
    /* o e-mail de exemplo continua com cara de e-mail (papel branco) — é o que o destinatário vai ver */
    html[data-tema="escuro"] .me-preview { color-scheme: light; }

    /* modo claro/escuro: interruptor pequeno no rodapé do menu, acima de "Módulos" (a bolinha desliza; sol de um lado, lua do outro) */
    .sidebar-footer { display: flex; flex-direction: column; align-items: stretch; }
    .tema-toggle { align-self: center; margin: 2px 0 4px; padding: 4px; border: 0; background: none; cursor: pointer; border-radius: 999px; }
    .tt-trilho { position: relative; display: block; width: 42px; height: 22px; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-line); transition: background .6s ease; }
    .tt-trilho svg { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--ink-fg-2); transition: color .5s, opacity .5s; }
    .tt-sol { left: 5px; } .tt-lua { right: 5px; }
    .tt-bola { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-fg-hi); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .6s var(--ease); }
    html[data-tema="escuro"] .tt-bola { transform: translateX(20px); }
    .tt-trilho svg { color: var(--ink-icon); opacity: .85; }      /* os dois ícones ficam nas pontas; a bolinha cobre o do tema atual */
    .tema-toggle:hover .tt-trilho { box-shadow: inset 0 0 0 1px var(--ink-icon); }
    .tema-toggle:focus-visible { outline: 2px solid var(--ink-icon); outline-offset: 1px; }

    /* Console: alternador Servidor | Bot, cartão do bot */
    .cn-fontes { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-3); gap: 2px; }
    .cn-fontes[hidden] { display: none; }
    .cn-fonte { border: 0; background: none; padding: 5px 14px; border-radius: 8px; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); cursor: pointer; transition: background .3s, color .3s; }
    .cn-fonte.on { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
    .cn-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
    .cn-aviso { color: var(--warn); font-weight: 600; }