(grid
4 colunas) ou reaproveite o grid da própria página. */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;position:relative}
.kpi.feature{background:linear-gradient(135deg,#fffaf0,#fef3da);border-color:var(--amber-tint-2)}
.kpi-lab{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.kpi-lab svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;flex-shrink:0}
.kpi-val{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-1px;line-height:1}
/* S7-13: unidade pequena ao lado do número (kg, un, %). */
.kpi-val small{font-family:var(--ff);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:2px}
.kpi.feature .kpi-val{color:var(--honey-800)}
.kpi-sub{margin-top:8px;font-size:11.5px;color:var(--muted)}
.kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;margin-top:6px}
.kpi-delta.up{color:var(--ok)}
.kpi-delta.down{color:var(--danger)}
.kpi-delta.flat{color:var(--muted)}
/* .badge — status genérico parametrizável. Substitui .pay/.ctype (que
viravam uma classe CSS nova por domínio a cada tela). Modificadores
semânticos: -ok (sucesso/aprovado), -warn (atenção/restrição),
-danger (erro/rejeitado/vencido), -neutral (padrão/sem status),
-info (informativo/azul), -quarantine (aguardando análise). */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-ok{color:#15803d;background:#f0fdf4}
.badge-warn{color:var(--warn);background:var(--warn-light)}
.badge-danger{color:var(--danger);background:#fef2f2}
.badge-neutral{color:var(--muted);background:#f3f4f6}
.badge-info{color:var(--info);background:#eff6fb}
.badge-quarantine{color:var(--quarantine);background:var(--quarantine-light)}
/* .empty — estado vazio central. Sempre acionável quando fizer sentido
(CTA opcional) — nunca só "Nada aqui". Uso:
🗂️
(opcional — emoji ou svg)
Nenhum item ainda
texto de apoio
(opcional)
(opcional)
*/
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;color:var(--faint);gap:6px}
.empty-icon{font-size:32px;margin-bottom:6px;line-height:1}
.empty-icon svg{width:32px;height:32px;stroke:var(--faint);stroke-width:1.5;fill:none}
.empty-text{font-size:13.5px;font-weight:600;color:var(--muted)}
.empty-sub{font-size:12px;color:var(--faint);max-width:320px}
.empty-cta{margin-top:10px}
/* S7-13: vazio dentro de tabela/lista (não ocupa a tela inteira). */
.empty.empty-inline{padding:18px 8px}
/* S7-11: esqueleto de carregamento (nunca "0 de tudo" enquanto carrega). */
.sk{display:block;border-radius:6px;background:linear-gradient(90deg,#eef0f2 0%,#f7f8f9 45%,#eef0f2 90%);background-size:220% 100%;animation:skbrilho 1.3s ease-in-out infinite}
@keyframes skbrilho{0%{background-position:100% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
/* S1-14 (MAX) — table-kit.js: ordenação de coluna + paginação. */
.th-sortable{cursor:pointer;user-select:none}
.th-sortable:focus-visible{outline:2px solid var(--honey-500);outline-offset:-2px}
.sort-ind{color:var(--honey-700);font-size:10px}
.tk-pag{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;flex-wrap:wrap}
.tk-perpage-sel{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-family:var(--ff);font-size:12.5px;color:var(--ink);background:#fff}
.tk-pag-nav{display:flex;align-items:center;gap:10px}
.tk-pag-info{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
/* ───────────────────────────────────────────────────────────────
F1 (paridade app × site, 2026-09-24) — web/ui-kit.js: modal, gaveta,
toast, confirmação em 2 cliques, menu de ações por linha, campo de
formulário. Reusa os tokens do topo do arquivo — nunca cores soltas.
Acrescentado no FIM do arquivo de propósito: nada acima foi tocado. */
.uik-overlay{position:fixed;inset:0;background:rgba(17,17,17,.42);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .16s;backdrop-filter:blur(1.5px)}
.uik-overlay.show{opacity:1}
.uik-drawer-overlay{justify-content:flex-end;padding:0;background:rgba(17,17,17,.32)}
.uik-modal{background:#fff;border-radius:16px;width:100%;max-width:520px;box-shadow:0 24px 64px rgba(0,0,0,.22);display:flex;flex-direction:column;max-height:92vh;transform:translateY(8px) scale(.98);transition:transform .16s}
.uik-overlay.show .uik-modal{transform:translateY(0) scale(1)}
.uik-modal.uik-size-sm{max-width:380px}
.uik-modal.uik-size-lg{max-width:720px}
.uik-drawer{background:#fff;width:420px;max-width:92vw;height:100%;box-shadow:-16px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(16px);transition:transform .2s}
.uik-drawer-overlay.show .uik-drawer{transform:translateX(0)}
.uik-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.uik-head h2{font-size:15px;font-weight:700;color:var(--ink)}
.uik-x{border:1px solid var(--line);background:#fff;border-radius:7px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);padding:0;flex-shrink:0}
.uik-x:hover{border-color:var(--honey-500);color:var(--honey-700)}
.uik-body{padding:18px 20px;overflow-y:auto;flex:1}
.uik-foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;flex-wrap:wrap}
.btn-danger-uik{background:#fef2f2;border:1px solid #fecaca;color:var(--danger)}
.btn-danger-uik:hover{background:#fee2e2}
.uik-field{margin-bottom:14px}
.uik-field label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.uik-field input,.uik-field select,.uik-field textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:8px 11px;font-family:var(--ff);font-size:13.5px;color:var(--ink);background:#fff;outline:none}
.uik-field input:focus,.uik-field select:focus,.uik-field textarea:focus{border-color:var(--honey-500);box-shadow:0 0 0 3px rgba(245,158,11,.11)}
.uik-hint{font-size:11.5px;color:var(--faint);margin-top:4px}
.uik-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:10px;box-shadow:0 12px 32px rgba(16,24,40,.28);opacity:0;pointer-events:none;transition:.2s;z-index:var(--z-toast);max-width:88vw;text-align:center}
.uik-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.uik-toast-erro{background:#7f1d1d}
.uik-toast-aviso{background:#78350f}
.uik-confirming{background:#fef2f2 !important;border-color:#fecaca !important;color:var(--danger) !important}
.uik-row-menu{position:absolute;z-index:var(--z-menu-modal);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(16,24,40,.16);min-width:180px;padding:5px;display:flex;flex-direction:column}
.uik-row-menu-item{display:flex;align-items:center;gap:9px;border:0;background:none;text-align:left;padding:8px 10px;border-radius:7px;font-family:var(--ff);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.uik-row-menu-item:hover{background:#f3f4f6}
.uik-row-menu-item.danger{color:var(--danger)}
.uik-row-menu-item.danger:hover{background:#fef2f2}
.uik-row-menu-item svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;flex-shrink:0}
.uik-spinner{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:uikspin .6s linear infinite;margin-right:2px}
@keyframes uikspin{to{transform:rotate(360deg)}}
/* Responsivo — sem scroll horizontal em telas estreitas (celular usado
pra abrir o site por engano, ou DevTools em modo responsivo). */
@media (max-width:480px){
.uik-overlay{padding:0}
.uik-modal{max-width:100%;height:100%;max-height:100%;border-radius:0}
.uik-drawer{width:100%;max-width:100%}
.uik-foot{flex-direction:column-reverse}
.uik-foot .btn{width:100%;justify-content:center}
}
/* ─── Aviso "app aberto no celular" (confirmarCelularFechado) ───── */
.uik-phone-warn{display:flex;gap:12px;align-items:flex-start;background:var(--amber-tint);border:1px solid var(--amber-tint-2);border-radius:10px;padding:12px 14px;margin-bottom:6px}
.uik-phone-warn .ic{font-size:22px;line-height:1;flex-shrink:0}
.uik-phone-warn p{font-size:13px;color:var(--ink);line-height:1.5;margin:0}