/* ============================================================================
   iBooster CRM - Sales: placar da campanha e meta coletiva
   Saiu de vistas.css para o arquivo ficar abaixo de 500 linhas.
   ========================================================================== */

/* ============================================================================
   Sales: placar da campanha. O objetivo da tela e COMPETITIVO - quem abre tem
   que ver na hora quanto falta para virar. Por isso a distancia para o lider
   aparece em numero, e nao so a posicao.
   ========================================================================== */
.sales-topo{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:16px}
@media (max-width:860px){.sales-topo{grid-template-columns:1fr}}

.sales-premio{position:relative;overflow:hidden;border-radius:var(--r-sm);padding:20px 22px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;
  box-shadow:var(--sombra-brand)}
.sales-premio .rotulo{font-size:var(--fs-xs);font-weight:600;
  color:#fff !important;opacity:.92}
.sales-premio .sub{color:#fff}
/* raio da marca como marca d'agua do cartao: reforca de quem e o premio sem
   competir com o numero */
.sales-raio{position:absolute;right:18px;bottom:-14px;width:96px;height:96px;color:#fff;opacity:.16;pointer-events:none}
.sales-raio svg{width:100%;height:100%;stroke:none;fill:currentColor}
.sales-premio .rotulo-linha{display:flex;align-items:center;gap:8px}
.sales-premio .rotulo-linha .ic{width:15px;height:15px;fill:#fff;stroke:none;opacity:.95}
.sales-premio .valor{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.03em;line-height:1;margin:6px 0 4px}
.sales-premio .sub{font-size:var(--fs-sm);opacity:.9}
.sales-premio .selo-alvo{position:absolute;right:-18px;top:-18px;width:110px;height:110px;border-radius:50%;
  background:rgba(255,255,255,.13)}

.sales-relogio{border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;background:var(--surface)}
.sales-relogio .n{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.sales-relogio .n small{font-size:15px;font-weight:600;color:var(--ink-3);margin-left:6px}
.sales-barra{height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;margin-top:12px}
.sales-barra i{display:block;height:100%;border-radius:var(--r-full);background:var(--brand)}

/* linha do placar */
.sales-linha{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  margin-bottom:8px;transition:transform var(--transicao),box-shadow var(--transicao)}
.sales-linha:hover{transform:translateX(2px);box-shadow:var(--sombra-1)}
.sales-linha.lider{border-color:var(--brand);box-shadow:var(--sombra-brand);background:var(--brand-soft)}
.sales-linha .pos{font-size:var(--fs-xl);font-weight:600;text-align:center;color:var(--ink-3)}
.sales-linha.lider .pos{color:var(--brand)}
.sales-linha .nome{font-weight:600;font-size:var(--fs-md);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sales-linha .num{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1;text-align:right}
.sales-linha .num small{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);margin-top:3px}

/* a badge do lider: e o alvo que os outros querem tirar */
.badge-lider{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);
  background:var(--brand);color:#fff;font-size:var(--fs-xs);font-weight:600}
.badge-lider .pulso{width:6px;height:6px;border-radius:50%;background:#fff;animation:sales-pulso 1.8s ease-in-out infinite}
@keyframes sales-pulso{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.badge-lider .pulso{animation:none}}

/* distancia para o topo: o gatilho de virada */
.sales-falta{font-size:var(--fs-xs);font-weight:600;color:var(--warn);background:var(--warn-soft);
  padding:2px 9px;border-radius:var(--r-full);white-space:nowrap}
.sales-empatado{font-size:var(--fs-xs);font-weight:600;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);
  padding:2px 9px;border-radius:var(--r-full)}
.sales-progresso{height:4px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;margin-top:7px;max-width:260px}
.sales-progresso i{display:block;height:100%;border-radius:var(--r-full);background:var(--brand);opacity:.55}

/* marca do numero lancado a mao pelo admin - transparencia importa quando ha
   bonus em jogo: quem olha precisa saber o que veio da agenda e o que veio da mao */
.sales-ajustado{font-size:var(--fs-2xs);font-weight:600;color:var(--ink-3);background:var(--surface-3);
  padding:2px 8px;border-radius:var(--r-full);white-space:nowrap}
.sales-editar{opacity:0;transition:opacity var(--transicao)}
.sales-linha:hover .sales-editar,.sales-linha:focus-within .sales-editar{opacity:1}
@media (hover:none){.sales-editar{opacity:1}}

/* bloco "como conta" - a regra do jogo fica na propria tela, nao numa mensagem */
.sales-regra{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;background:var(--surface-2);margin-top:18px}
.sales-regra h4{font-size:var(--fs-sm);font-weight:600;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.sales-regra ol{margin:0;padding-left:19px;display:grid;gap:7px}
.sales-regra li{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.sales-regra .obs{font-size:var(--fs-xs);color:var(--ink-3);margin:11px 0 0;line-height:1.5}

/* meta coletiva: a barra que dobra (ou nao) o premio de todo mundo */
.sales-meta{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;background:var(--surface)}
.sales-meta.batida{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--surface))}
.sales-meta .cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sales-meta .n{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1}
.sales-meta .de{font-size:var(--fs-sm);color:var(--ink-3);font-weight:600}
.sales-meta .falta{margin-left:auto;font-size:var(--fs-sm);font-weight:600;color:var(--danger)}
.sales-meta.batida .falta{color:var(--ok)}
.sales-meta .trilho{height:10px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.sales-meta .trilho i{display:block;height:100%;border-radius:var(--r-full);background:var(--brand);transition:width var(--transicao)}
.sales-meta.batida .trilho i{background:var(--ok)}

/* premio ao lado do nome: o que a pessoa leva se acabar assim */
.sales-premio-chip{font-size:var(--fs-xs);font-weight:600;padding:3px 10px;border-radius:var(--r-full);
  background:var(--ok);color:#fff;white-space:nowrap}
.sales-premio-chip[data-vezes]::after{content:' ' attr(data-vezes);opacity:.85;font-weight:600}
.sales-linha.lider .sales-premio-chip{background:#fff;color:var(--brand)}

/* faixa de premios no cartao vermelho */
.sales-podio{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.sales-podio div{font-size:var(--fs-xs);color:#fff;opacity:.9}
.sales-podio b{display:block;font-size:15px;font-weight:600;opacity:1}

/* ============================================================================
   Meta coletiva, versao com peso visual: o time precisa OLHAR e entender em um
   segundo que existe o dobro em jogo. Por isso os dois cenarios aparecem lado a
   lado (o que vale hoje x o que vale batendo), e nao so uma barra com texto.
   ========================================================================== */
.sales-meta-v2{grid-column:1/-1;border:2px dashed var(--line);border-radius:var(--r-sm);
  padding:18px 20px;background:var(--surface);position:relative;overflow:hidden}
.sales-meta-v2.batida{border-style:solid;border-color:var(--ok);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 12%,var(--surface)) 0%,var(--surface) 60%)}

.sales-meta-v2 .topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sales-meta-v2 .titulo{font-size:var(--fs-sm);font-weight:500;
  display:flex;align-items:center;gap:8px}
.sales-meta-v2 .titulo .ic{width:16px;height:16px}
.sales-meta-v2.batida .titulo{color:var(--ok)}

/* numeros grandes: 3 / 30 */
.sales-meta-v2 .contagem{display:flex;align-items:baseline;gap:6px;margin-left:auto}
.sales-meta-v2 .contagem b{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.03em;line-height:1}
.sales-meta-v2 .contagem span{font-size:var(--fs-lg);font-weight:600;color:var(--ink-3)}

/* trilho grosso com o quanto falta escrito por cima */
.sales-trilho{position:relative;height:26px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.sales-trilho i{position:absolute;inset:0 auto 0 0;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 100%);transition:width .5s ease}
.sales-meta-v2.batida .sales-trilho i{background:linear-gradient(90deg,var(--ok) 0%,color-mix(in srgb,var(--ok) 70%,#000) 100%)}
.sales-trilho em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:var(--fs-xs);font-weight:600;color:var(--ink);letter-spacing:.02em;mix-blend-mode:luminosity}

/* os dois cenarios: hoje x dobrado */
.sales-cenarios{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:16px}
@media (max-width:720px){.sales-cenarios{grid-template-columns:1fr;gap:10px}}
.sales-cenario{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface-2)}
.sales-cenario .rot{font-size:var(--fs-xs);font-weight:500;color:var(--ink-3)}
.sales-cenario .val{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:3px}
.sales-cenario .det{font-size:var(--fs-xs);color:var(--ink-3);margin-top:5px}
.sales-cenario.alvo{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--surface))}
.sales-cenario.alvo .val{color:var(--ok)}
.sales-cenarios .seta{font-size:var(--fs-xl);font-weight:600;color:var(--ink-4)}
@media (max-width:720px){.sales-cenarios .seta{display:none}}

/* premio ainda nao liberado: valor visivel, mas claramente "nao e seu ainda" */
.sales-premio-chip.travado{background:var(--surface-3);color:var(--ink-3);
  border:1px dashed var(--line);font-weight:600}