/* Selva Design System, escopo Vendas.
   Toda regra aqui é prefixada por body[data-ds="vendas"].
   Sem !important: o prefixo já vence a especificidade do CSS antigo. */

body[data-ds="vendas"]{
  --ds-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ds-bg: #FAFAF8;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #F6F6F3;

  --ds-text: #14171A;
  --ds-text-2: #5B6470;
  --ds-text-3: #8A929C;

  --ds-border: #E9E8E3;
  --ds-border-2: #DEDCD5;

  --ds-primary: #2D3A1F;
  --ds-primary-hover: #232E17;
  --ds-gold: #A8884A;

  --ds-r-sm: 8px;
  --ds-r: 10px;
  --ds-r-lg: 12px;

  --ds-shadow: 0 1px 2px rgba(16,18,20,.05);

  background: var(--ds-bg);
  background-image: none;
  font-family: var(--ds-font);
  color: var(--ds-text);
}

body[data-ds="vendas"] .wrap,
body[data-ds="vendas"] .app-nav,
body[data-ds="vendas"] h1,
body[data-ds="vendas"] h2,
body[data-ds="vendas"] h3,
body[data-ds="vendas"] .ttl,
body[data-ds="vendas"] input,
body[data-ds="vendas"] select,
body[data-ds="vendas"] textarea,
body[data-ds="vendas"] button{
  font-family: var(--ds-font);
}

/* ---------- cabeçalho de página ---------- */
body[data-ds="vendas"] .pagehead{ margin: 0 0 24px; }
body[data-ds="vendas"] .pagehead .eyebrow{
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-text-3); font-weight: 600;
}
body[data-ds="vendas"] .pagehead h1{
  font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--ds-text);
  margin: 8px 0 0; letter-spacing: 0;
}
body[data-ds="vendas"] .pagehead p{
  font-size: 14px; color: var(--ds-text-2); max-width: 68ch; margin: 8px 0 0;
}

/* ---------- abas de produto ---------- */
body[data-ds="vendas"] .cv-tabs{
  background: transparent; border: 0; border-bottom: 1px solid var(--ds-border);
  border-radius: 0; gap: 24px; padding: 0; margin: 0 0 16px;
  display: flex; box-shadow: none;
}
body[data-ds="vendas"] .cv-tab{
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; box-shadow: none; transform: none;
  font-size: 14px; font-weight: 500; color: var(--ds-text-2);
  padding: 0 0 12px; min-height: 44px;
}
body[data-ds="vendas"] .cv-tab:hover{ color: var(--ds-text); background: transparent; transform: none; }
body[data-ds="vendas"] .cv-tab.on{
  color: var(--ds-text); font-weight: 600; background: transparent;
  border-bottom: 2px solid var(--ds-primary);
}
body[data-ds="vendas"] .cv-tab:focus-visible{ outline: 2px solid var(--ds-primary); outline-offset: 2px; }

/* ---------- barra de ferramentas ---------- */
body[data-ds="vendas"] .crm-toolbar{
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; flex-wrap: wrap;
}
body[data-ds="vendas"] .crm-toolbar input[type="text"]{
  flex: 1 1 auto; min-width: 240px;
}
body[data-ds="vendas"] .crm-toolbar select{
  flex: 0 0 auto; width: auto; max-width: 200px;
}
body[data-ds="vendas"] .crm-toolbar input[type="text"],
body[data-ds="vendas"] .crm-toolbar select{
  height: 40px; border-radius: var(--ds-r); border: 1px solid var(--ds-border-2);
  background: var(--ds-surface); font-size: 14px; color: var(--ds-text);
  padding: 0 12px; box-shadow: none;
}
body[data-ds="vendas"] .crm-toolbar input[type="text"]:focus,
body[data-ds="vendas"] .crm-toolbar select:focus{
  outline: none; border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(45,58,31,.12);
}
body[data-ds="vendas"] .crm-toolbar #crm-novo{ flex: 0 0 auto; margin-left: auto; }

/* ---------- botões ---------- */
body[data-ds="vendas"] .btn{
  border-radius: var(--ds-r); min-height: 40px; height: auto; padding: 0 16px;
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  background: var(--ds-primary); color: #fff; border: 1px solid var(--ds-primary);
  box-shadow: none; transform: none;
}
body[data-ds="vendas"] .btn:hover{
  background: var(--ds-primary-hover); border-color: var(--ds-primary-hover);
  box-shadow: none; transform: none;
}
body[data-ds="vendas"] .btn.ghost{
  background: var(--ds-surface); border: 1px solid var(--ds-border-2); color: var(--ds-text);
}
body[data-ds="vendas"] .btn.ghost:hover{ background: var(--ds-surface-2); }
body[data-ds="vendas"] .btn.danger{
  background: var(--ds-surface);
  border: 1px solid #E7C9C3;
  color: #A43B2F;
  box-shadow: none;
  transform: none;
}
body[data-ds="vendas"] .btn.danger:hover{
  background: #FCECEA;
  border-color: #DDB4AC;
  color: #A43B2F;
}
body[data-ds="vendas"] .btn.brass{
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-2);
  color: var(--ds-text);
  box-shadow: none;
  transform: none;
}
body[data-ds="vendas"] .btn.brass:hover{
  background: var(--ds-surface-2);
}
body[data-ds="vendas"] .btn:focus-visible{ outline: 2px solid var(--ds-primary); outline-offset: 2px; }
body[data-ds="vendas"] .linklike{
  font-family: var(--ds-font); font-size: 13px; color: var(--ds-primary);
}

/* ---------- filtro de estágio ---------- */
body[data-ds="vendas"] .crm-tabs{
  display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap;
  background: transparent; border: 0; padding: 0;
}
body[data-ds="vendas"] .crm-tab{
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 999px;
  min-height: 32px; height: 32px; padding: 0 12px;
  font-size: 13px; font-weight: 500; color: var(--ds-text-2);
  box-shadow: none; transform: none;
}
body[data-ds="vendas"] .crm-tab:hover{ background: var(--ds-surface-2); transform: none; box-shadow: none; }
body[data-ds="vendas"] .crm-tab.on{
  background: var(--ds-primary); border-color: var(--ds-primary); color: #fff;
}
body[data-ds="vendas"] .crm-tab:focus-visible{ outline: 2px solid var(--ds-primary); outline-offset: 2px; }
body[data-ds="vendas"] .kcol-n{
  font-size: 12px; opacity: .7; margin-left: 6px; font-variant-numeric: tabular-nums;
}

/* ---------- selos de status ---------- */
body[data-ds="vendas"] .badge{
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px;
  border: 1px solid transparent; letter-spacing: 0; margin-left: 0;
  display: inline-block; white-space: nowrap;
}
body[data-ds="vendas"] .badge.st-lead{ background:#F1F2F3; color:#5B6470; border-color:#E4E6E8; }
body[data-ds="vendas"] .badge.st-enviada{ background:#EAF1FB; color:#24558F; border-color:#D3E2F5; }
body[data-ds="vendas"] .badge.st-negociacao{ background:#FBF3E0; color:#8A6516; border-color:#F0E3C0; }
body[data-ds="vendas"] .badge.st-prox{ background:#FBF3E0; color:#8A6516; border-color:#F0E3C0; }
body[data-ds="vendas"] .badge.st-aceita{ background:#E9F4EC; color:#21683B; border-color:#CFE7D7; }
body[data-ds="vendas"] .badge.st-concluida{ background:#E9F4EC; color:#21683B; border-color:#CFE7D7; }
body[data-ds="vendas"] .badge.st-recusada{ background:#FCECEA; color:#A43B2F; border-color:#F4D5D0; }
body[data-ds="vendas"] .badge.badge-contrato{
  background: var(--ds-surface); border: 1px solid var(--ds-border-2); color: var(--ds-text-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
body[data-ds="vendas"] .tag-chip{
  background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: 6px;
  font-size: 12px; color: var(--ds-text-2); padding: 2px 8px; display: inline-block;
}

/* ---------- superfícies ---------- */
body[data-ds="vendas"] .card{
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow);
}
body[data-ds="vendas"] .card.ds-list{ padding: 0; overflow: hidden; }
body[data-ds="vendas"] .empty{
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg);
  padding: 40px 24px; color: var(--ds-text-2); font-size: 14px;
}
body[data-ds="vendas"] .hint{
  font-size: 13px; color: var(--ds-text-3); line-height: 1.5; margin: 0 0 16px;
}
body[data-ds="vendas"] .ds-diag{
  font-size: 12px; color: var(--ds-text-3); opacity: 1; margin-top: 8px;
}

/* ---------- aviso de origem ---------- */
body[data-ds="vendas"] .ds-aviso{
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-gold); border-radius: var(--ds-r);
  padding: 12px 16px; margin: 0 0 16px; font-size: 13px; color: var(--ds-text-2);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
body[data-ds="vendas"] .ds-aviso strong{ color: var(--ds-text); font-size: 14px; }
body[data-ds="vendas"] .ds-aviso .meta{ font-size: 13px; color: var(--ds-text-2); margin-top: 4px; }

/* ---------- linha de cliente ---------- */
body[data-ds="vendas"] .ds-row{
  padding: 16px 20px; border-bottom: 1px solid var(--ds-border); cursor: pointer;
  background: var(--ds-surface);
}
body[data-ds="vendas"] .ds-row:last-child{ border-bottom: 0; }
body[data-ds="vendas"] .ds-row:hover{ background: var(--ds-surface-2); }
body[data-ds="vendas"] .ds-row-top{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
body[data-ds="vendas"] .ds-row-title{
  font-size: 15px; font-weight: 600; color: var(--ds-text);
}
body[data-ds="vendas"] .ds-row-status{ flex: 0 0 auto; }
body[data-ds="vendas"] .ds-row-sub{
  font-size: 13px; color: var(--ds-text-2); margin-top: 8px;
}
body[data-ds="vendas"] .ds-row-foot{
  display: flex; justify-content: space-between; gap: 16px; margin-top: 8px;
  font-size: 13px; color: var(--ds-text-3);
}
body[data-ds="vendas"] .ds-row-foot b{ font-weight: 600; color: var(--ds-text-2); }
body[data-ds="vendas"] .ds-erro{ font-size: 13px; color: #A43B2F; margin-top: 8px; }

@media (max-width: 1023px){
  body[data-ds="vendas"] .ds-row-foot{ flex-direction: column; gap: 4px; }
}

@media (max-width: 767px){
  body[data-ds="vendas"] .card.ds-list{
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
  }
  body[data-ds="vendas"] .ds-row{
    border: 1px solid var(--ds-border); border-radius: var(--ds-r);
    background: var(--ds-surface); padding: 12px 14px; margin-bottom: 8px;
  }
  body[data-ds="vendas"] .ds-row:last-child{ border-bottom: 1px solid var(--ds-border); }
  body[data-ds="vendas"] .ds-row-top{ flex-direction: column; align-items: flex-start; gap: 8px; }
  body[data-ds="vendas"] .pagehead h1{ font-size: 24px; }
  body[data-ds="vendas"] .crm-toolbar #crm-novo{ margin-left: 0; width: 100%; }
}