/* ═══════════════════════════════════════════════════════════════
   CRIAR CONNECT · TOKENS + COMPONENTES CANÔNICOS (prefixo k-)
   Regras: consome as variáveis já existentes do painel (--primary,
   --card, --border, --muted...) e por isso herda o tema escuro.
   Nenhuma classe daqui colide com classes antigas.
   Toda tela REFORMADA usa só estas classes; zero estilo inline novo.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* espaçamento */
  --k-s1:4px;--k-s2:8px;--k-s3:12px;--k-s4:16px;--k-s5:24px;--k-s6:32px;
  /* raios */
  --k-r1:10px;--k-r2:14px;--k-r3:18px;
  /* sombras */
  --k-sh1:0 1px 3px rgba(15,23,42,.08);
  --k-sh2:0 6px 18px rgba(15,23,42,.10);
  --k-sh3:0 16px 40px rgba(15,23,42,.16);
  /* movimento (as três durações oficiais + a curva da casa) */
  --k-fast:120ms;--k-med:200ms;--k-slow:280ms;
  --k-ease:cubic-bezier(.2,.9,.3,1);
}

/* entrada padrão de blocos reformados */
@keyframes kIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.k-in{animation:kIn var(--k-slow) var(--k-ease) both}

/* ── BOTÕES ─────────────────────────────────────── */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--k-r1);padding:9px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all var(--k-fast) var(--k-ease);white-space:nowrap;line-height:1.2}
.k-btn:active{transform:translateY(1px)}
.k-btn:disabled{opacity:.55;cursor:not-allowed}
.k-btn-pri{background:var(--primary);color:#fff}
.k-btn-pri:hover{background:var(--primary-d);box-shadow:var(--k-sh2)}
.k-btn-soft{background:var(--primary-l);color:var(--primary)}
.k-btn-soft:hover{filter:brightness(.96)}
.k-btn-gh{background:var(--card);color:var(--text);border-color:var(--border)}
.k-btn-gh:hover{border-color:var(--muted)}
.k-btn-danger{background:#FEE2E2;color:#B91C1C}
.k-btn-danger:hover{background:#FECACA}
.k-btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}

/* ── CARD ───────────────────────────────────────── */
.k-card{background:var(--card);border:1px solid var(--border);border-radius:var(--k-r2);box-shadow:var(--k-sh1)}
.k-card-pad{padding:var(--k-s4) 18px}
.k-card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--k-s3);flex-wrap:wrap;margin-bottom:var(--k-s3)}
.k-card-h b{font-size:14.5px;color:var(--ink)}
.k-card-h .k-sub,.k-sub{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.5}
.k-gap{display:flex;flex-direction:column;gap:var(--k-s3)}

/* ── KPIs ───────────────────────────────────────── */
.k-stats{display:flex;gap:var(--k-s3);flex-wrap:wrap;margin-bottom:var(--k-s4)}
.k-stat{flex:1;min-width:130px;background:var(--card);border:1px solid var(--border);border-radius:var(--k-r2);padding:var(--k-s4) 18px;box-shadow:var(--k-sh1)}
.k-stat b{display:block;font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.k-stat small{font-size:12px;color:var(--muted)}

/* ── PILLS DE STATUS ────────────────────────────── */
.k-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;border-radius:20px;padding:3px 10px}
.k-pill-ok{color:#065F46;background:#D1FAE5}
.k-pill-warn{color:#92400E;background:#FEF3C7}
.k-pill-off{color:#475569;background:#E2E8F0}
.k-pill-bad{color:#B91C1C;background:#FEE2E2}
.k-pill-info{color:#1D4ED8;background:#DBEAFE}
body[data-theme="escuro"] .k-pill-ok{background:rgba(16,185,129,.16);color:#6EE7B7}
body[data-theme="escuro"] .k-pill-warn{background:rgba(245,158,11,.16);color:#FCD34D}
body[data-theme="escuro"] .k-pill-off{background:rgba(148,163,184,.16);color:#CBD5E1}
body[data-theme="escuro"] .k-pill-bad{background:rgba(239,68,68,.16);color:#FCA5A5}
body[data-theme="escuro"] .k-pill-info{background:rgba(59,130,246,.16);color:#93C5FD}
body[data-theme="escuro"] .k-btn-danger{background:rgba(239,68,68,.15);color:#FCA5A5}

/* ── TABELA ─────────────────────────────────────── */
.k-table-wrap{overflow-x:auto}
.k-table{width:100%;border-collapse:collapse;font-size:13.5px}
.k-table th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding:12px 16px;border-bottom:1px solid var(--border2)}
.k-table td{padding:12px 16px;border-top:1px solid var(--border2);color:var(--text)}
.k-table tr:hover td{background:var(--bg2)}

/* ── LINHA DE LISTA ─────────────────────────────── */
.k-row{display:flex;align-items:center;gap:var(--k-s3);padding:11px 0;border-top:1px solid var(--border2);flex-wrap:wrap}
.k-row:first-of-type{border-top:0}
.k-grow{flex:1;min-width:160px}
.k-row b{font-size:13.5px;color:var(--ink)}
.k-row small,.k-dim{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.45}

/* ── FORMULÁRIOS ────────────────────────────────── */
.k-inp{background:var(--card);border:1px solid var(--border);border-radius:var(--k-r1);color:var(--text);font-size:13px;font-family:inherit;padding:10px 12px;outline:none;transition:border-color var(--k-fast)}
.k-inp:focus{border-color:var(--primary)}
.k-formbar{display:flex;gap:var(--k-s2);flex-wrap:wrap;align-items:center;padding:var(--k-s3);background:var(--primary-l);border-radius:var(--k-r1);margin-bottom:var(--k-s3)}
body[data-theme="escuro"] .k-formbar{background:rgba(0,102,204,.14)}

/* ── ESTADO VAZIO ───────────────────────────────── */
.k-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
.k-empty::before{content:'◌';display:block;font-size:26px;margin-bottom:8px;opacity:.5}

/* ── MISC ───────────────────────────────────────── */
.k-av{width:34px;height:34px;border-radius:50%;background:var(--primary-l);color:var(--primary);font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.k-code{font-size:14px;font-weight:800;letter-spacing:1.5px;font-family:ui-monospace,Consolas,monospace;color:var(--ink)}
.k-days{display:flex;gap:4px}
.k-day{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:10.5px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all var(--k-fast) var(--k-ease);font-family:inherit}
.k-day.on{background:var(--primary);border-color:var(--primary);color:#fff}
.k-day[disabled]{cursor:default}