/* ── 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); }