/* ============================================================
   Pro SST — CRM · PIPELINE (layout novo, variante ligavel)
   ------------------------------------------------------------
   Desenho do Figma "Taskboard - Task Management Dashboard Kanban
   View" (file v6plCwzw3SbkYzmCf9myta, frame 116:22549 "Projects -
   Board"). Substituiu o Optivue em 24/09/2026: aquele so maquiava o
   card classico por CSS e o conteudo estourava a coluna, alem de a
   pagina inteira rolar para o lado ("ficou pior do que estava").

   Ativado por `body.crm-pipeline-novo` — flag por empresa
   (Empresa.painel_crm_pipeline_novo) + override de sessao
   (?pipeline=novo / ?pipeline=classico). ADITIVO: sem a classe, o
   kanban classico renderiza 100% intacto.

   CSS ESCRITO A MAO DE PROPOSITO: o Tailwind do projeto e bundle
   pre-compilado — classe utilitaria nova nao existe sem o build.

   Tokens (extraidos do arquivo pela API do Figma):
     fonte     Plus Jakarta Sans (ja carregada no base.html)
     titulo    20/600 #282727 · texto 14/500 #525252 · apoio #8B8B8B
     borda     #DFE4E7 (chips, abas) · #CDD5DA (botao secundario)
     coluna    272px · fundo #F4F6F6 · raio 10 · respiro 6
     card      branco · raio 6 · padding 14 · titulo 16/600 · linhas 12/500
     divisor   #B9C7C6 · etiqueta 28px raio 6 12/600
     filtro    32px · raio 10
   Acento: roxo #7147FB do template -> azul Pro SST.
   ============================================================ */

body.crm-pipeline-novo {
  --tbk-font:    "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tbk-ink:     #282727;
  --tbk-text:    #525252;
  --tbk-muted:   #8B8B8B;
  --tbk-line:    #DFE4E7;
  --tbk-line-2:  #CDD5DA;
  --tbk-rule:    #C9D3D2;
  --tbk-col:     #F4F6F6;
  --tbk-card:    #FFFFFF;
  --tbk-hover:   #F7F9F9;
  --tbk-accent:  #1E5CAD;   /* azul Pro SST no lugar do #7147FB */
  --tbk-accent-d:#153060;
  --tbk-tint:    #E8F0FA;
  --tbk-hot:     #E5484D;
  --tbk-warm:    #D39A00;
  --tbk-cold:    #1E5CAD;
  --tbk-ok-bg:   #DBFFEC;  --tbk-ok-fg: #0E7A43;
  --ld-edge:     #E6E9E8;  --ld-rule: #E3E3E3;
}
html[data-theme="dark"] body.crm-pipeline-novo {
  --tbk-ink:   #E8ECF2;
  --tbk-text:  #C4CDD8;
  --tbk-muted: #8A929C;
  --tbk-line:  #2A313C;
  --tbk-line-2:#343C48;
  --tbk-rule:  #343C48;
  --tbk-col:   #121821;
  --tbk-card:  #1A212B;
  --tbk-hover: #202833;
  --tbk-accent:#5B9BEA;
  --tbk-tint:  rgba(91, 155, 234, .14);
  --tbk-ok-bg: rgba(14, 122, 67, .2); --tbk-ok-fg: #4ADE80;
  --ld-edge:   #2A313C;  --ld-rule: #2A313C;
}

/* A coluna de conteudo do base.html e `flex-1` sem min-width:0: um quadro
   mais largo que a tela EMPURRAVA a pagina inteira (sidebar e topbar
   cortadas no print). Com min-width:0 quem rola e so o quadro. */
body.crm-pipeline-novo div:has(> header.sticky) { min-width: 0; }

/* ---------- Cabecalho ---------- */
body.crm-pipeline-novo .tbk-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px;
  font-family: var(--tbk-font);
}
body.crm-pipeline-novo .tbk-title {
  font-size: 20px; font-weight: 600; line-height: 32px; color: var(--tbk-ink); margin: 0;
}
body.crm-pipeline-novo .tbk-stats {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 13px; font-weight: 500; color: var(--tbk-muted);
}
body.crm-pipeline-novo .tbk-stats b { color: var(--tbk-ink); font-weight: 700; }

/* O space-y-6 do kanban separa tudo em 24px — no desenho a faixa de abas
   encosta no titulo e os filtros encostam nas abas. */
body.crm-pipeline-novo .tbk-head + .tbk-tabs { margin-top: 10px !important; }
body.crm-pipeline-novo .tbk-tabs + .crmp-toolbar { margin-top: 16px !important; }

/* ---------- Abas (Overview/List/Board do design) ---------- */
body.crm-pipeline-novo .tbk-tabs {
  display: flex; gap: 24px; border-bottom: 1px solid var(--tbk-line);
  font-family: var(--tbk-font); overflow-x: auto; scrollbar-width: none;
}
body.crm-pipeline-novo .tbk-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  font-size: 14px; font-weight: 500; color: var(--tbk-text);
  white-space: nowrap; cursor: pointer;
}
body.crm-pipeline-novo .tbk-tab svg { width: 16px; height: 16px; color: var(--tbk-muted); }
body.crm-pipeline-novo .tbk-tab:hover { color: var(--tbk-ink); }
body.crm-pipeline-novo .tbk-tab--on { color: var(--tbk-accent); font-weight: 600; border-bottom-color: var(--tbk-accent); }
body.crm-pipeline-novo .tbk-tab--on svg { color: var(--tbk-accent); }

/* ---------- Filtros ---------- */
body.crm-pipeline-novo .crmp-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--tbk-font);
}
body.crm-pipeline-novo .crmp-toolbar .crmp-spacer { margin-left: auto; }
body.crm-pipeline-novo .crmp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; max-width: 220px;
  background: var(--tbk-card); color: var(--tbk-text);
  border: 1px solid var(--tbk-line); border-radius: 10px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  text-overflow: ellipsis; overflow: hidden; cursor: pointer;
  transition: background .15s, border-color .15s;
}
body.crm-pipeline-novo .crmp-chip:hover { background: var(--tbk-hover); border-color: var(--tbk-line-2); }
body.crm-pipeline-novo .crmp-chip svg { width: 16px; height: 16px; color: var(--tbk-muted); flex: 0 0 auto; }
body.crm-pipeline-novo select.crmp-chip { padding-right: 28px; }
body.crm-pipeline-novo .crmp-chip--on { background: var(--tbk-tint); border-color: var(--tbk-accent); color: var(--tbk-accent); }
body.crm-pipeline-novo .crmp-chip--on svg { color: var(--tbk-accent); }
body.crm-pipeline-novo .crmp-cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 10px;
  background: var(--tbk-accent); border: 1px solid var(--tbk-accent-d); color: #FFF;
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
body.crm-pipeline-novo .crmp-cta:hover { background: var(--tbk-accent-d); }
body.crm-pipeline-novo .crmp-cta svg { width: 16px; height: 16px; }
body.crm-pipeline-novo .crmp-search { position: relative; }
body.crm-pipeline-novo .crmp-search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--tbk-muted);
}
body.crm-pipeline-novo .crmp-search input {
  height: 32px; width: 260px; max-width: 100%; padding: 0 10px 0 32px;
  background: var(--tbk-card); color: var(--tbk-ink);
  border: 1px solid var(--tbk-line); border-radius: 10px;
  font-size: 13px; font-weight: 500;
}
body.crm-pipeline-novo .crmp-search input::placeholder { color: var(--tbk-muted); }
body.crm-pipeline-novo .crmp-search input:focus { outline: 0; border-color: var(--tbk-accent); box-shadow: 0 0 0 3px var(--tbk-tint); }

/* ---------- Quadro e colunas ---------- */
body.crm-pipeline-novo .tbk-board { max-width: 100%; }
body.crm-pipeline-novo .tbk-board-row { gap: 10px; align-items: flex-start; }
body.crm-pipeline-novo .tbk-col { width: 272px; flex: 0 0 272px; }
body.crm-pipeline-novo .tbk-col > div {
  background: var(--tbk-col) !important;
  border: 0 !important; border-radius: 10px !important;
  box-shadow: none !important; overflow: visible !important;
}
body.crm-pipeline-novo .crmp-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 0; font-family: var(--tbk-font);
}
body.crm-pipeline-novo .tbk-pill {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  height: 28px; padding: 0 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--etapa) 14%, var(--tbk-card));
  color: color-mix(in srgb, var(--etapa) 75%, #000);
}
html[data-theme="dark"] body.crm-pipeline-novo .tbk-pill {
  background: color-mix(in srgb, var(--etapa) 22%, transparent);
  color: color-mix(in srgb, var(--etapa) 60%, #FFF);
}
body.crm-pipeline-novo .crmp-col-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
body.crm-pipeline-novo .crmp-col-name {
  margin: 0; font-size: 12px; font-weight: 600; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.crm-pipeline-novo .tbk-count {
  font-size: 11px; font-weight: 700; opacity: .75; flex: 0 0 auto;
}
body.crm-pipeline-novo .crmp-col-meta {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--tbk-muted);
  white-space: nowrap; flex: 0 0 auto;
}
body.crm-pipeline-novo .crmp-col-tools { display: flex; align-items: center; flex: 0 0 auto; }
body.crm-pipeline-novo .crmp-col-tools button { color: var(--tbk-muted) !important; }
body.crm-pipeline-novo .tbk-col .kanban-column {
  background: transparent !important;
  padding: 6px !important;
  min-height: 160px !important;
}
body.crm-pipeline-novo .tbk-col .kanban-column > * + * { margin-top: 6px !important; }
body.crm-pipeline-novo .kanban-column.drag-over {
  background: var(--tbk-tint) !important;
  box-shadow: inset 0 0 0 2px var(--tbk-accent) !important;
  border-radius: 10px;
}

/* ---------- Card compacto ---------- */
body.crm-pipeline-novo .tbk-card {
  display: block; position: relative;
  background: var(--tbk-card); border-radius: 6px;
  padding: 12px 14px; font-family: var(--tbk-font); color: var(--tbk-text);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
  cursor: grab; transition: box-shadow .15s;
}
body.crm-pipeline-novo .tbk-card:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
body.crm-pipeline-novo .tbk-card.dragging,
body.crm-pipeline-novo .tbk-card.opacity-50 { opacity: .5; }

body.crm-pipeline-novo .tbk-card-head { display: flex; align-items: flex-start; gap: 6px; }
body.crm-pipeline-novo .tbk-card-title-wrap { min-width: 0; flex: 1 1 auto; }
body.crm-pipeline-novo .tbk-card-title {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--tbk-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
body.crm-pipeline-novo .tbk-card:hover .tbk-card-title { color: var(--tbk-accent); }
body.crm-pipeline-novo .tbk-card-sub {
  margin: 2px 0 0; font-size: 11px; font-weight: 500; color: var(--tbk-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

body.crm-pipeline-novo .tbk-rule { border-top: 1px dashed var(--tbk-rule); margin: 10px 0 8px; }

body.crm-pipeline-novo .tbk-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 26px; font-size: 12px; font-weight: 500;
}
body.crm-pipeline-novo .tbk-ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--tbk-muted); }
body.crm-pipeline-novo .tbk-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.crm-pipeline-novo .tbk-muted { color: var(--tbk-muted); }
body.crm-pipeline-novo .tbk-val { margin-left: auto; font-weight: 700; color: var(--tbk-ink); white-space: nowrap; }
body.crm-pipeline-novo .tbk-av {
  width: 20px; height: 20px; border-radius: 999px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tbk-tint); color: var(--tbk-accent);
  font-size: 10px; font-weight: 700; box-shadow: 0 0 0 2px var(--tbk-card);
}
body.crm-pipeline-novo .tbk-flag--quente { color: var(--tbk-hot); }
body.crm-pipeline-novo .tbk-flag--morno  { color: var(--tbk-warm); }
body.crm-pipeline-novo .tbk-flag--frio   { color: var(--tbk-cold); }
body.crm-pipeline-novo .tbk-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px;
  background: var(--tbk-col); color: var(--tbk-text);
  font-size: 10px; font-weight: 600; white-space: nowrap; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
body.crm-pipeline-novo .tbk-card-sub .tbk-tag { margin-right: 4px; vertical-align: 1px; }
body.crm-pipeline-novo .tbk-tag--ok   { background: var(--tbk-ok-bg); color: var(--tbk-ok-fg); }
body.crm-pipeline-novo .tbk-tag--plan { background: var(--tbk-tint); color: var(--tbk-accent); }
body.crm-pipeline-novo .tbk-row .tbk-txt + .tbk-tag { margin-left: auto; }

/* Pos-venda / "Análise geral": checklist embutido no card compacto */
body.crm-pipeline-novo .tbk-analise { margin-top: 10px; }
body.crm-pipeline-novo .tbk-analise-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border-radius: 6px; background: var(--tbk-col); color: var(--tbk-text);
  font-size: 12px; font-weight: 600; border: 1px solid var(--tbk-line);
}
body.crm-pipeline-novo .tbk-analise-btn:hover { border-color: var(--tbk-accent); color: var(--tbk-accent); }
body.crm-pipeline-novo .tbk-analise-btn svg { width: 14px; height: 14px; transition: transform .15s; }
body.crm-pipeline-novo .tbk-analise-btn svg.tbk-rot { transform: rotate(90deg); }
body.crm-pipeline-novo .tbk-analise-btn--meio { background: #FFF7E6; border-color: #F5D9A8; color: #B45309; }
body.crm-pipeline-novo .tbk-analise-btn--ok { background: var(--tbk-ok-bg); border-color: transparent; color: var(--tbk-ok-fg); }
body.crm-pipeline-novo .tbk-analise > [x-show] { margin-top: 8px; }

/* ---------- Menu "..." do card ---------- */
body.crm-pipeline-novo .tbk-menu { position: relative; flex: 0 0 auto; }
body.crm-pipeline-novo .tbk-icon-btn {
  width: 24px; height: 24px; border-radius: 6px; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tbk-muted); cursor: pointer;
}
body.crm-pipeline-novo .tbk-icon-btn:hover { background: var(--tbk-hover); color: var(--tbk-ink); }
body.crm-pipeline-novo .tbk-icon-btn svg { width: 18px; height: 18px; }
body.crm-pipeline-novo .tbk-drop {
  position: absolute; right: 0; top: 28px; z-index: 40; width: 240px;
  background: var(--tbk-card); border: 1px solid var(--tbk-line); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14); padding: 4px; cursor: default;
}
body.crm-pipeline-novo .tbk-drop button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 6px; background: none;
  font-size: 13px; font-weight: 500; color: var(--tbk-text); cursor: pointer;
}
body.crm-pipeline-novo .tbk-drop button:hover { background: var(--tbk-hover); color: var(--tbk-ink); }
body.crm-pipeline-novo .tbk-drop button svg { width: 16px; height: 16px; color: var(--tbk-muted); flex: 0 0 auto; }
body.crm-pipeline-novo .tbk-drop button small { margin-left: auto; font-size: 11px; color: var(--tbk-muted); }
body.crm-pipeline-novo .tbk-drop-list { max-height: 240px; overflow-y: auto; }

@media (max-width: 640px) {
  body.crm-pipeline-novo .crmp-search input { width: 100%; }
  body.crm-pipeline-novo .crmp-search { flex: 1 1 100%; }
}

/* ============================================================
   TELA DO LEAD (crm/lead_detail.html) no mesmo acabamento limpo
   ------------------------------------------------------------
   Pedido da equipe em 24/09: a faixa em gradiente com 9 botoes de
   9 cores (WhatsApp verde, Email azul, SST verde, Painel indigo,
   Acesso violeta...) virou cabecalho claro com UM botao principal
   (WhatsApp) e os demais no mesmo formato neutro do kanban.

   So CSS sobre ancoras (.ld, .ld-head, .ld-actions...) — o template
   tem 3 mil linhas, modais e Alpine; nenhum comportamento muda.
   Liga junto com o Pipeline novo (body.crm-pipeline-novo).
   ============================================================ */

/* ---------- Cabecalho ---------- */
body.crm-pipeline-novo .ld { font-family: var(--tbk-font); }
/* Cartao de perfil do Optivue ("Contact Details" — Figma cg3gA8bCsr6Y9EB8g7p1fn,
   no 498:6377): borda fina #E6E9E8, raio 16, sombra de 1px, respiro de 24. */
body.crm-pipeline-novo .ld-head {
  background: var(--tbk-card) !important;
  border: 1px solid var(--ld-edge) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
  padding: 24px !important;
}
body.crm-pipeline-novo .ld-head .text-white     { color: var(--tbk-ink) !important; }
body.crm-pipeline-novo .ld-head .text-white\/70,
body.crm-pipeline-novo .ld-head .text-white\/90 { color: var(--tbk-muted) !important; }
body.crm-pipeline-novo .ld-head .text-white\/30 { color: var(--tbk-line-2) !important; }
body.crm-pipeline-novo .ld-head h1 { font-size: 22px !important; font-weight: 700 !important; }
body.crm-pipeline-novo .ld-head .bg-white\/20 { background: var(--tbk-col) !important; color: var(--tbk-text) !important; }
body.crm-pipeline-novo .ld-head a.bg-white\/20 { border: 1px solid var(--tbk-line); }
body.crm-pipeline-novo .ld-head .hover\:bg-white\/20:hover,
body.crm-pipeline-novo .ld-head .hover\:bg-white\/30:hover { background: var(--tbk-hover) !important; }
body.crm-pipeline-novo .ld-head .hover\:text-white:hover { color: var(--tbk-ink) !important; }
/* etiquetas Cliente / tipo de contrato: tons suaves em vez de chapados */
body.crm-pipeline-novo .ld-head .bg-green-400 { background: var(--tbk-ok-bg) !important; color: var(--tbk-ok-fg) !important; box-shadow: none !important; }
body.crm-pipeline-novo .ld-head .bg-blue-400  { background: var(--tbk-tint) !important; color: var(--tbk-accent) !important; box-shadow: none !important; }

/* avatar: bloco neutro no lugar do gradiente na cor da etapa */
body.crm-pipeline-novo .ld-av {
  width: 64px !important; height: 64px !important; border-radius: 999px !important;
  background: var(--tbk-tint) !important; color: var(--tbk-accent) !important;
  font-size: 20px !important; box-shadow: none !important;
}
/* etapa: etiqueta do kanban (tom da cor da etapa), nao bloco chapado */
body.crm-pipeline-novo .ld-etapa {
  background: color-mix(in srgb, var(--etapa) 14%, var(--tbk-card)) !important;
  color: color-mix(in srgb, var(--etapa) 75%, #000) !important;
  border-radius: 6px !important; box-shadow: none !important;
  font-size: 12px !important; padding: 5px 10px !important;
}
html[data-theme="dark"] body.crm-pipeline-novo .ld-etapa {
  background: color-mix(in srgb, var(--etapa) 22%, transparent) !important;
  color: color-mix(in srgb, var(--etapa) 60%, #FFF) !important;
}

/* ---------- Botoes: um formato so, um principal ---------- */
body.crm-pipeline-novo .ld-actions { gap: 8px !important; }
body.crm-pipeline-novo .ld-actions > a,
body.crm-pipeline-novo .ld-actions > button,
body.crm-pipeline-novo .ld-actions > form > button {
  display: inline-flex !important; align-items: center; gap: 6px !important;
  height: 36px; padding: 0 12px !important;
  background: var(--tbk-card) !important; color: var(--tbk-ink) !important;
  border: 1px solid var(--ld-edge) !important; border-radius: 8px !important;
  box-shadow: inset 0 -2px 8px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .04) !important; animation: none !important;
  font-size: 13px !important; font-weight: 600 !important; white-space: nowrap;
  transition: background-color .15s, border-color .15s !important;
}
body.crm-pipeline-novo .ld-actions > a:hover,
body.crm-pipeline-novo .ld-actions > button:hover,
body.crm-pipeline-novo .ld-actions > form > button:hover {
  background: var(--tbk-hover) !important; border-color: var(--tbk-line-2) !important;
}
body.crm-pipeline-novo .ld-actions svg { width: 16px !important; height: 16px !important; color: var(--tbk-muted); }
body.crm-pipeline-novo .ld-actions > .ld-primary {
  background: var(--tbk-accent) !important; border-color: var(--tbk-accent-d) !important; color: #FFF !important;
}
body.crm-pipeline-novo .ld-actions > .ld-primary:hover { background: var(--tbk-accent-d) !important; }
body.crm-pipeline-novo .ld-actions > .ld-primary svg { color: #FFF; }
/* "Avancar sem assinatura" (so na etapa Contrato) segue chamando atencao, sem piscar */
body.crm-pipeline-novo .ld-actions > .ld-attn {
  background: var(--tbk-ok-bg) !important; border-color: transparent !important; color: var(--tbk-ok-fg) !important;
}
body.crm-pipeline-novo .ld-actions > .ld-attn svg { color: var(--tbk-ok-fg); }

/* ---------- Numeros -> UM cartao "resumo" (o "Activity Summary" do Optivue) ----------
   Os 4 cartoes soltos (Propostas, Valor, Checklist, Atividades) viram um
   cartao so, com divisoria fina entre os numeros: rotulo cinza em cima,
   valor escuro embaixo, sem o quadradinho de icone. */
body.crm-pipeline-novo .ld-stats {
  gap: 0 !important;
  background: var(--tbk-card);
  border: 1px solid var(--ld-edge);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  padding: 20px 0;
}
body.crm-pipeline-novo .ld-stats > div {
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: transparent !important;
  padding: 4px 24px !important;
}
@media (min-width: 768px) {
  body.crm-pipeline-novo .ld-stats > div + div { border-left: 1px solid var(--ld-rule) !important; }
}
@media (max-width: 767px) {
  body.crm-pipeline-novo .ld-stats { row-gap: 16px !important; }
  body.crm-pipeline-novo .ld-stats > div:nth-child(even) { border-left: 1px solid var(--ld-rule) !important; }
}
body.crm-pipeline-novo .ld-stats > div > div > div:first-child:not(:has(p)) { display: none !important; }
body.crm-pipeline-novo .ld-stats > div > div > div:has(> p) { display: flex; flex-direction: column-reverse; gap: 4px; }
body.crm-pipeline-novo .ld-stats p:first-child {
  color: var(--tbk-ink) !important; font-size: 18px !important; font-weight: 600 !important;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
body.crm-pipeline-novo .ld-stats p:last-child { color: #929292 !important; font-size: 13px !important; font-weight: 500; }

/* ---------- Pos-venda ---------- */
body.crm-pipeline-novo .ld-pv { background: var(--tbk-card) !important; border-color: var(--tbk-line) !important; border-radius: 14px !important; }
body.crm-pipeline-novo .ld-pv .bg-indigo-500 { background: var(--tbk-accent) !important; }
body.crm-pipeline-novo .ld-pv .bg-indigo-200 { background: var(--tbk-col) !important; }
body.crm-pipeline-novo .ld-pv .text-indigo-900 { color: var(--tbk-ink) !important; }
body.crm-pipeline-novo .ld-pv .text-indigo-600 { color: var(--tbk-muted) !important; }
body.crm-pipeline-novo .ld-pv a.text-indigo-600 { color: var(--tbk-accent) !important; }
body.crm-pipeline-novo .ld-pv .border-amber-200 { border-color: var(--tbk-line) !important; }
body.crm-pipeline-novo .ld-pv [class*="bg-purple-6"],
body.crm-pipeline-novo .ld-pv [class*="bg-violet-6"] { background: var(--tbk-accent) !important; }

/* ---------- Cards da coluna (Dados do Cadastro, Unidades, Grupo...) ----------
   Cabecalhos em gradiente (azul, verde, laranja, rosa, cinza) viram
   titulo sobre fundo branco com filete, como os cards do dashboard. */
body.crm-pipeline-novo .ld .rounded-2xl { border-radius: 14px !important; }
body.crm-pipeline-novo .ld .rounded-2xl.shadow-sm { box-shadow: none !important; border-color: var(--tbk-line) !important; }
body.crm-pipeline-novo .ld .rounded-2xl > .px-5.py-4[class*="bg-gradient-to-r"] {
  background: var(--tbk-card) !important;
  border-bottom: 1px solid var(--tbk-line);
  padding: 14px 18px !important;
}
body.crm-pipeline-novo .ld .rounded-2xl > .px-5.py-4[class*="bg-gradient-to-r"] .text-white,
body.crm-pipeline-novo .ld .rounded-2xl > .px-5.py-4[class*="bg-gradient-to-r"] h3 { color: var(--tbk-ink) !important; font-size: 14px !important; }
body.crm-pipeline-novo .ld .rounded-2xl > .px-5.py-4[class*="bg-gradient-to-r"] svg { color: var(--tbk-accent) !important; }
body.crm-pipeline-novo .ld .rounded-2xl > .px-5.py-4[class*="bg-gradient-to-r"] .bg-white\/20 { background: var(--tbk-col) !important; color: var(--tbk-text) !important; }

/* ---------- Abas (Historico, Checklist, Tarefas...) ---------- */
body.crm-pipeline-novo .ld nav .border-indigo-500 { border-color: var(--tbk-accent) !important; }
body.crm-pipeline-novo .ld nav .text-indigo-600 { color: var(--tbk-accent) !important; font-weight: 600; }
body.crm-pipeline-novo .ld nav .bg-indigo-50\/50 { background: transparent !important; }
body.crm-pipeline-novo .ld nav .bg-indigo-100 { background: var(--tbk-tint) !important; }
body.crm-pipeline-novo .ld nav .text-indigo-700 { color: var(--tbk-accent) !important; }

/* Botoes de acao em gradiente dentro da tela (ex.: "Nova Interacao") -> acento solido */
body.crm-pipeline-novo .ld button[class*="bg-gradient-to-r"],
body.crm-pipeline-novo .ld a[class*="bg-gradient-to-r"] {
  background: var(--tbk-accent) !important; box-shadow: none !important; border-radius: 10px !important;
}
body.crm-pipeline-novo .ld button[class*="bg-gradient-to-r"]:hover,
body.crm-pipeline-novo .ld a[class*="bg-gradient-to-r"]:hover { background: var(--tbk-accent-d) !important; }

/* Botoes principais solidos em roxo/indigo (ex.: "Nova Interacao") -> azul da marca */
body.crm-pipeline-novo .ld button.bg-purple-600, body.crm-pipeline-novo .ld button.bg-violet-600,
body.crm-pipeline-novo .ld button.bg-indigo-600, body.crm-pipeline-novo .ld a.bg-indigo-600 {
  background: var(--tbk-accent) !important; border-radius: 10px !important; box-shadow: none !important;
}
body.crm-pipeline-novo .ld button.bg-purple-600:hover, body.crm-pipeline-novo .ld button.bg-violet-600:hover,
body.crm-pipeline-novo .ld button.bg-indigo-600:hover, body.crm-pipeline-novo .ld a.bg-indigo-600:hover { background: var(--tbk-accent-d) !important; }

/* ============================================================
   TELA DE CLIENTES (crm/lead_list.html, aba Clientes) no desenho do
   Figma "Customer Management Dashboard" (file 8m9iq9KBSmH4FajR8s9QVH).
   SO template/CSS — a view nao muda (pedido da equipe em 24/09).
   Topo em crm/_clientes_topo_novo.html; a tabela, os filtros e a
   paginacao sao os do classico, aqui so com acabamento novo.
   Escopo: .cl (so aparece com crm_pipeline_novo e filtro=clientes).

   Tokens (API do Figma): fundo #F8F8F8 · tinta #2D364F · texto #151718
   apoio #A0A1AC / #787988 · cartao branco borda rgba(63,64,95,.15) raio 6
   titulo 36/500 · numero 40/400 · lista 28/600 · cabecalho da tabela
   #FAFCFE borda #E2E2E7 · linha 76px zebra #FBFBFB filete #F0F0F4
   Acento: vermelho do template -> azul Pro SST.
   ============================================================ */
body.crm-pipeline-novo .cl {
  --cl-ink:   #2D364F;
  --cl-text:  #151718;
  --cl-muted: #A0A1AC;
  --cl-label: #787988;
  --cl-card:  #FFFFFF;
  --cl-edge:  rgba(63, 64, 95, .15);
  --cl-thead: #FAFCFE;
  --cl-zebra: #FBFBFB;
  --cl-rule:  #F0F0F4;
  --cl-chip:  #F3F4F6;
  font-family: var(--tbk-font);
}
html[data-theme="dark"] body.crm-pipeline-novo .cl {
  --cl-ink:   #E8ECF2;
  --cl-text:  #D6DCE4;
  --cl-muted: #8A929C;
  --cl-label: #9AA3AE;
  --cl-card:  #161B23;
  --cl-edge:  #2A313C;
  --cl-thead: #1B212B;
  --cl-zebra: #181E27;
  --cl-rule:  #232A35;
  --cl-chip:  #1F2631;
}

/* ---------- Cabecalho ---------- */
body.crm-pipeline-novo .cl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.crm-pipeline-novo .cl-head h1 { font-size: 32px; font-weight: 500; color: var(--cl-ink); line-height: 1.2; margin: 0; }
body.crm-pipeline-novo .cl-head p { font-size: 14px; color: var(--cl-muted); margin-top: 4px; }
body.crm-pipeline-novo .cl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.crm-pipeline-novo .cl-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--cl-edge); background: var(--cl-card); color: var(--cl-text);
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
body.crm-pipeline-novo .cl-btn:hover { border-color: var(--cl-label); }
body.crm-pipeline-novo .cl-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
body.crm-pipeline-novo .cl-btn--icon { width: 40px; padding: 0; justify-content: center; }
body.crm-pipeline-novo .cl-btn--primary { background: var(--tbk-accent); border-color: var(--tbk-accent); color: #FFF; }
body.crm-pipeline-novo .cl-btn--primary:hover { background: var(--tbk-accent-d); }
body.crm-pipeline-novo .cl-drop { position: relative; }
body.crm-pipeline-novo .cl-drop-menu {
  position: absolute; right: 0; top: 46px; z-index: 40; min-width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--cl-card); border: 1px solid var(--cl-edge); border-radius: 10px; padding: 4px;
  box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}
body.crm-pipeline-novo .cl-drop-menu a { display: block; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--cl-text); }
body.crm-pipeline-novo .cl-drop-menu a:hover { background: var(--cl-chip); }

/* ---------- 4 cartoes ---------- */
body.crm-pipeline-novo .cl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1279px) { body.crm-pipeline-novo .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { body.crm-pipeline-novo .cl-kpis { grid-template-columns: minmax(0, 1fr); } }
body.crm-pipeline-novo .cl-kpi { display: block; background: var(--cl-card); border: 1px solid var(--cl-edge); border-radius: 6px; }
body.crm-pipeline-novo .cl-kpi--link:hover { border-color: var(--tbk-accent); }
body.crm-pipeline-novo .cl-kpi-h {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--cl-edge); font-size: 15px; font-weight: 500; color: var(--cl-ink);
}
body.crm-pipeline-novo .cl-kpi-ic {
  width: 30px; height: 30px; border-radius: 6px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid;
}
body.crm-pipeline-novo .cl-kpi-ic svg { width: 16px; height: 16px; }
body.crm-pipeline-novo .cl-kpi-ic--a { color: #2E8B57; background: #EAF6EF; border-color: #BFE3CC; }
body.crm-pipeline-novo .cl-kpi-ic--b { color: #1E5CAD; background: #EAF1FB; border-color: #C3D6F2; }
body.crm-pipeline-novo .cl-kpi-ic--c { color: #7C5CD6; background: #F1EDFC; border-color: #D6CBF5; }
body.crm-pipeline-novo .cl-kpi-ic--d { color: #C2410C; background: #FDF0E8; border-color: #F5CDB5; }
body.crm-pipeline-novo .cl-kpi-ic--e { color: #B7791F; background: #FBF3E2; border-color: #F0DAAE; }
body.crm-pipeline-novo .cl-kpi-ic--f { color: #0E7490; background: #E6F6FA; border-color: #B5E3EE; }
html[data-theme="dark"] body.crm-pipeline-novo .cl-kpi-ic { background: transparent; }
body.crm-pipeline-novo .cl-kpi-b { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px 18px; flex-wrap: wrap; }
body.crm-pipeline-novo .cl-kpi-b b { font-size: 36px; font-weight: 400; color: var(--cl-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
body.crm-pipeline-novo .cl-kpi-b small { font-size: 13px; font-weight: 600; color: var(--cl-muted); }

/* ---------- Faixa de segmentacao ---------- */
body.crm-pipeline-novo .cl-seg {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--cl-card); border: 1px solid var(--cl-edge); border-radius: 6px;
}
body.crm-pipeline-novo .cl-seg-t { font-size: 12px; font-weight: 700; color: var(--cl-label); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
body.crm-pipeline-novo .cl-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 6px; border: 1px solid var(--cl-edge); background: var(--cl-card);
  font-size: 13px; font-weight: 600; color: var(--cl-text);
}
body.crm-pipeline-novo .cl-chip i { width: 8px; height: 8px; border-radius: 999px; }
body.crm-pipeline-novo .cl-chip b { color: var(--cl-ink); font-variant-numeric: tabular-nums; }
body.crm-pipeline-novo .cl-chip:hover { border-color: var(--cl-label); }
body.crm-pipeline-novo .cl-chip.on { border-color: var(--tbk-accent); background: var(--tbk-tint); color: var(--tbk-accent); }
body.crm-pipeline-novo .cl-chip--warn b { color: #C2410C; }
body.crm-pipeline-novo .cl-seg-sep { width: 1px; height: 22px; background: var(--cl-edge); margin: 0 4px; }
body.crm-pipeline-novo .cl-stat { font-size: 13px; color: var(--cl-label); padding: 0 4px; }
body.crm-pipeline-novo .cl-stat b { color: var(--cl-ink); font-weight: 700; }
body.crm-pipeline-novo .cl-stat small { color: var(--cl-muted); }

/* ---------- Filtros ativos (o "All time x / Team plan x" do desenho) ---------- */
body.crm-pipeline-novo .cl #filtros-ativos-banner {
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
body.crm-pipeline-novo .cl #filtros-ativos-banner > span {
  background: var(--cl-chip) !important; border: 1px solid var(--cl-edge) !important; color: var(--cl-ink) !important;
  border-radius: 6px !important; box-shadow: none !important; height: 32px; font-size: 13px !important; font-weight: 600 !important;
}
body.crm-pipeline-novo .cl #filtros-ativos-banner .text-amber-700 { color: var(--cl-label) !important; }

/* ---------- Lista (card da tabela) ---------- */
body.crm-pipeline-novo .cl .cl-list {
  background: var(--cl-card) !important; border: 1px solid var(--cl-edge) !important;
  border-radius: 6px !important; box-shadow: none !important;
}
body.crm-pipeline-novo .cl-list-head { display: flex; align-items: baseline; gap: 12px; padding: 22px 24px 4px; }
body.crm-pipeline-novo .cl-list-head h2 { font-size: 24px; font-weight: 600; color: var(--cl-ink); margin: 0; }
body.crm-pipeline-novo .cl-list-head span { font-size: 13px; font-weight: 600; color: var(--cl-muted); }
/* barra de filtros do classico, sem o fundo cinza */
body.crm-pipeline-novo .cl .cl-filtros { background: transparent !important; border-bottom-color: var(--cl-edge) !important; padding: 14px 24px 18px !important; }
body.crm-pipeline-novo .cl .cl-filtros select,
body.crm-pipeline-novo .cl .cl-filtros input[type="text"],
body.crm-pipeline-novo .cl .cl-filtros input[type="search"],
body.crm-pipeline-novo .cl .cl-filtros input[type="date"] {
  height: 40px; border-radius: 8px !important; border: 1px solid var(--cl-edge) !important;
  background-color: var(--cl-card) !important; color: var(--cl-text); font-size: 14px; font-weight: 500; box-shadow: none !important;
}
body.crm-pipeline-novo .cl .cl-filtros button[type="submit"] {
  background: var(--tbk-accent) !important; color: #FFF !important; border-radius: 8px !important; height: 40px;
}
body.crm-pipeline-novo .cl .cl-filtros .bg-gray-200\/60 { background: var(--cl-chip) !important; }

/* tabela */
body.crm-pipeline-novo .cl .cl-list table thead tr {
  background: var(--cl-thead) !important; border-top: 1px solid #E2E2E7; border-bottom: 1px solid #E2E2E7;
}
html[data-theme="dark"] body.crm-pipeline-novo .cl .cl-list table thead tr { border-color: var(--cl-rule); }
body.crm-pipeline-novo .cl .cl-list table thead th {
  font-size: 12px !important; font-weight: 700 !important; color: var(--cl-label) !important;
  letter-spacing: .02em; padding-top: 16px !important; padding-bottom: 16px !important;
}
body.crm-pipeline-novo .cl .cl-list table tbody tr { border-bottom: 1px solid var(--cl-rule) !important; }
body.crm-pipeline-novo .cl .cl-list table tbody tr:nth-child(even) { background: var(--cl-zebra); }
body.crm-pipeline-novo .cl .cl-list table tbody tr:hover { background: var(--tbk-hover) !important; }
body.crm-pipeline-novo .cl .cl-list table tbody td { padding-top: 16px !important; padding-bottom: 16px !important; color: var(--cl-text); }
/* etiquetas cheias (Mensalista, Prata, Frio...) viram contornadas como o "TEAM" do desenho */
body.crm-pipeline-novo .cl .cl-list table tbody td span.rounded-full {
  background: transparent !important; border: 1px solid currentColor; font-weight: 600 !important;
}
body.crm-pipeline-novo .cl .cl-list table tbody td span.rounded-full > span { border: 0; }

/* paginacao: pagina atual no acento */
body.crm-pipeline-novo .cl .cl-list .bg-amber-500,
body.crm-pipeline-novo .cl .cl-list .bg-amber-600 { background: var(--tbk-accent) !important; }
body.crm-pipeline-novo .cl .cl-list .hover\:text-amber-600:hover { color: var(--tbk-accent) !important; }
body.crm-pipeline-novo .cl .cl-list .hover\:bg-amber-50:hover { background: var(--tbk-tint) !important; }

/* Coluna Nome sem o quadrado colorido da inicial: igual em toda linha, nao
   informava nada e pesava mais que o proprio nome (o desenho nao tem avatar).
   Sobra largura e nome longo deixa de quebrar em duas linhas. */
body.crm-pipeline-novo .cl .cl-list tbody tr > td:first-child .w-10.h-10 { display: none !important; }
body.crm-pipeline-novo .cl .cl-list tbody tr > td:first-child .gap-3 { gap: 0 !important; }
body.crm-pipeline-novo .cl .cl-list tbody tr > td:first-child p.font-semibold { font-size: 15px; color: var(--cl-text) !important; }
/* etiquetas sempre numa linha (a de unidade "Pro SST" quebrava em duas) */
body.crm-pipeline-novo .cl .cl-list tbody td span.rounded-full { white-space: nowrap; }
body.crm-pipeline-novo .cl .cl-list tbody tr > td:nth-child(2) span.rounded-full {
  display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
/* ============================================================
   LISTAS DO CRM no mesmo desenho (Leads, Orcamentos, Contratos) —
   24/09, pedido da equipe. SO template/CSS, views intactas.
   Leads: mesmo topo de Clientes (crm/_clientes_topo_novo.html).
   Orcamentos: topo novo (crm/_orcamentos_topo_novo.html).
   Contratos: o cabecalho tem JS preso a ids (sincronizar, config),
   entao fica a marcacao e muda so o visual (.cl-hero, .cl-tabs,
   .cl-stats) — mesmo caminho da tela do lead.
   ============================================================ */
body.crm-pipeline-novo .cl-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1279px) { body.crm-pipeline-novo .cl-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { body.crm-pipeline-novo .cl-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.crm-pipeline-novo .cl-kpi.on { border-color: var(--tbk-accent); box-shadow: inset 0 0 0 1px var(--tbk-accent); }
body.crm-pipeline-novo .cl-kpi-b b.cl-kpi-money { font-size: 26px; }

/* filtros como card proprio (Orcamentos, Contratos); dentro da lista (Clientes/Leads) seguem sem fundo */
body.crm-pipeline-novo .cl > .cl-filtros {
  background: var(--cl-card) !important; border: 1px solid var(--cl-edge) !important;
  border-radius: 6px !important; box-shadow: none !important; padding: 0 !important;
}
body.crm-pipeline-novo .cl > .cl-filtros .bg-gray-50\/50,
body.crm-pipeline-novo .cl > .cl-filtros .bg-gray-50 { background: transparent !important; }
/* barra "Lista de Orcamentos" do classico, no tom do card */
body.crm-pipeline-novo .cl .cl-list > .border-b.bg-gray-50\/50 { background: transparent !important; padding: 18px 24px !important; }
body.crm-pipeline-novo .cl .cl-list > .border-b.bg-gray-50\/50 .font-medium { font-size: 20px; font-weight: 600 !important; color: var(--cl-ink) !important; }

/* ---------- Contratos: cabecalho ---------- */
body.crm-pipeline-novo .cl .cl-hero {
  background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important;
}
body.crm-pipeline-novo .cl .cl-hero h1 { font-size: 32px !important; font-weight: 500 !important; color: var(--cl-ink) !important; }
body.crm-pipeline-novo .cl .cl-hero .text-violet-100 { color: var(--cl-muted) !important; font-size: 14px; }
body.crm-pipeline-novo .cl .cl-hero .w-14.h-14 { display: none !important; }   /* bloco do icone: o desenho nao tem */
body.crm-pipeline-novo .cl .cl-hero .bg-white\/20.rounded-lg {   /* botao de configuracoes */
  background: var(--cl-card) !important; border: 1px solid var(--cl-edge); color: var(--cl-text) !important;
}
body.crm-pipeline-novo .cl .cl-hero-actions > * {
  height: 40px; padding: 0 14px !important; border-radius: 8px !important; box-shadow: none !important;
  background: var(--cl-card) !important; border: 1px solid var(--cl-edge) !important; color: var(--cl-text) !important;
  font-size: 14px !important; backdrop-filter: none !important;
}
body.crm-pipeline-novo .cl .cl-hero-actions > *:hover { border-color: var(--cl-label) !important; }
body.crm-pipeline-novo .cl .cl-hero-actions svg { width: 16px !important; height: 16px !important; }
body.crm-pipeline-novo .cl .cl-hero-actions > .cl-hero-primary {
  background: var(--tbk-accent) !important; border-color: var(--tbk-accent) !important; color: #FFF !important;
}

/* ---------- Contratos: abas ---------- */
body.crm-pipeline-novo .cl .cl-tabs {
  background: var(--cl-card) !important; border: 1px solid var(--cl-edge) !important; border-radius: 8px !important; box-shadow: none !important;
}
body.crm-pipeline-novo .cl .cl-tabs > a { border-radius: 6px !important; }
body.crm-pipeline-novo .cl .cl-tabs > a[class*="bg-gradient"] {
  background: var(--tbk-accent) !important; background-image: none !important; color: #FFF !important; box-shadow: none !important;
}
body.crm-pipeline-novo .cl .cl-tabs > a[class*="bg-gradient"] svg { color: #FFF !important; }
body.crm-pipeline-novo .cl .cl-tabs > a[class*="bg-gradient"] span[class*="rounded-full"] {
  background: rgba(255, 255, 255, .22) !important; color: #FFF !important;
}

/* ---------- Contratos: numeros de cada aba ---------- */
body.crm-pipeline-novo .cl .cl-stats > a,
body.crm-pipeline-novo .cl .cl-stats > div {
  background: var(--cl-card) !important; border: 1px solid var(--cl-edge) !important;
  border-radius: 6px !important; box-shadow: none !important;
}
body.crm-pipeline-novo .cl .cl-stats > a:hover { border-color: var(--tbk-accent) !important; }
body.crm-pipeline-novo .cl .cl-stats p.text-2xl,
body.crm-pipeline-novo .cl .cl-stats p.text-3xl { font-weight: 400 !important; font-size: 30px !important; color: var(--cl-ink) !important; }
body.crm-pipeline-novo .cl .cl-stats p.uppercase { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--cl-label) !important; }
body.crm-pipeline-novo .cl .cl-alerta { border-radius: 6px !important; box-shadow: none !important; }
/* Contratos: a pagina tinha max-w-7xl (1280px) e as outras listas usam a
   largura toda. Com as etiquetas numa linha so, a tabela passava da area e a
   coluna "Acoes" (fixa a direita) cobria a "Vigencia" (print de 24/09).
   Largura total + respiro lateral menor nas celulas de todas as listas. */
body.crm-pipeline-novo .cl.max-w-7xl { max-width: none !important; }
body.crm-pipeline-novo .cl .cl-list table th,
body.crm-pipeline-novo .cl .cl-list table td { padding-left: 14px !important; padding-right: 14px !important; }
body.crm-pipeline-novo .cl .cl-list table th:first-child,
body.crm-pipeline-novo .cl .cl-list table td:first-child { padding-left: 24px !important; }
/* numero do contrato (CRM-2026-124544) sem quebrar no meio */
body.crm-pipeline-novo .cl .cl-list table tbody td:first-child p.font-semibold,
body.crm-pipeline-novo .cl .cl-list table tbody td:first-child a.font-semibold { white-space: nowrap; }