/* ═══════════════════════════════════════════════════════════════
   Conecta 360 — tema central da INTRANET (design system Conecta)
   Fonte única dos tokens de cor e dos selos de status (.pill).
   Site público NÃO usa este arquivo (paleta própria em base.css).
   Ao alterar: bump do ?v=N nos <link> das páginas (cache).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* superfícies */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface2: #F1F5F9;

  /* contornos */
  --border: #E2E8F0;
  --border2: #CBD5E1;

  /* tinta */
  --text: #1E293B;
  --muted: #64748B;

  /* marca */
  --accent: #3D7EF5;
  --accent-dim: #DBEAFE;

  /* status semântico (paleta sóbria — decisão Israel 19/07) */
  --ok: #059669;
  --ok-dim: #D1FAE5;
  --warn: #D97706;
  --warn-dim: #FEF3C7;
  --bad: #DC2626;
  --bad-dim: #FEE2E2;

  /* status do funil CRM */
  --s-novo: #94A3B8;
  --s-em_contato: #F5A623;
  --s-qualificado: #3D7EF5;
  --s-proposta: #A855F7;
  --s-negociando: #0EA5E9;
  --s-concluido: #10B981;
  --s-perdido: #EF4444;
  /* aliases: templates antigos referenciam --s-contato/--s-fechado */
  --s-contato: var(--s-em_contato);
  --s-fechado: var(--s-concluido);
}

/* ── Selo de status padrão (novos módulos usam .pill; legados migram aos poucos)
   Código de cor do sistema: verde=ok/concluído · âmbar=aguardando/atenção ·
   vermelho=crítico/atrasado · azul=em andamento · cinza=neutro/inativo ── */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.pill-ok    { background: var(--ok-dim);     color: var(--ok); }
.pill-warn  { background: var(--warn-dim);   color: var(--warn); }
.pill-bad   { background: var(--bad-dim);    color: var(--bad); }
.pill-info  { background: var(--accent-dim); color: var(--accent); }
.pill-muted { background: var(--surface2);   color: var(--muted); }

/* ── Tabela → CARDS no mobile (usabilidade em telas densas) ──
   Opt-in: <table class="tbl-cards"> + data-label="Coluna" em cada <td>.
   No desktop nada muda; em ≤640px cada linha vira um card com rótulo por
   campo. Célula sem rótulo (ações/ícone) = data-label="" (some o rótulo).
   Estabelece o 1º padrão table→card do projeto — reutilizável. */
@media (max-width: 640px) {
  table.tbl-cards { min-width: 0 !important; width: 100%; border-collapse: collapse; }
  table.tbl-cards thead { display: none; }
  table.tbl-cards tbody, table.tbl-cards tr, table.tbl-cards td { display: block; }
  table.tbl-cards tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 14px; margin-bottom: 10px; background: var(--surface);
  }
  table.tbl-cards td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; border: none; padding: 6px 0; text-align: right;
  }
  table.tbl-cards td::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
  }
  table.tbl-cards td[data-label=""]::before { content: none; }
  table.tbl-cards td[data-label=""] { justify-content: flex-end; padding-top: 8px; }
}