/* ============================================================================
   iBooster Demo Tracker - vistas
   Visao geral, Demos (uso), Fluxo e custo, Parque.
   ========================================================================== */

/* ---------------- faixas de aviso ---------------- */
.faixa{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:var(--r);
  border:1px solid var(--warn-soft);background:var(--warn-soft);color:var(--ink)}
.faixa .ic{width:19px;height:19px;flex:none;color:var(--warn);margin-top:1px}
.faixa.perigo{border-color:var(--brand-line);background:var(--brand-soft)}
.faixa.perigo .ic{color:var(--brand)}
.faixa .t{font-weight:750;font-size:13px}
.faixa .d{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.faixa code{background:color-mix(in srgb,var(--ink) 7%,transparent);padding:1px 5px;border-radius:5px;font-size:11.5px}

/* ---------------- grafico de barras por dia ----------------
   A coluna e uma pilha de tres partes com altura propria (numero, barra, dia).
   Nada e posicionado por absoluto: a versao anterior punha o numero em
   position:absolute e ele escrevia por cima do texto do cartao de cima.
   max-width na coluna impede que 4 dias virem 4 tijolos gigantes. */
.serie{display:flex;align-items:flex-end;justify-content:flex-start;gap:5px;padding:4px 0 0}
.serie .col{flex:1 1 0;min-width:9px;max-width:34px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:3px}
.serie .col b{font-size:9.5px;font-weight:800;color:var(--ink-2);height:12px;line-height:12px;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity var(--transicao)}
.serie .col:hover b{opacity:1}
.serie .col i{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 55%,transparent) 100%);
  transition:height .45s cubic-bezier(.3,.8,.3,1)}
.serie .col.zero i{background:var(--line);min-height:2px}
.serie .col em{font-style:normal;font-size:9px;color:var(--ink-4);font-weight:650;white-space:nowrap}
.serie .col em u{text-decoration:none;color:var(--ink-3);font-weight:750}
.serie .col:hover i{filter:brightness(1.08)}
.serie-vazia{display:grid;place-items:center;height:92px;color:var(--ink-4);font-size:12.5px}

/* ---------------- barras horizontais (custo por provedor, funil) ---------------- */
.barras{display:grid;gap:11px}
.barra-linha{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto;gap:11px;align-items:center;font-size:12.5px}
.barra-linha .rot{color:var(--ink-2);font-weight:650;white-space:nowrap}
.barra-linha .trilho{height:8px;border-radius:20px;background:var(--surface-3);overflow:hidden}
.barra-linha .trilho i{display:block;height:100%;border-radius:20px;background:var(--cor,var(--brand));
  transition:width .5s cubic-bezier(.3,.8,.3,1)}
.barra-linha .val{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--ink)}

/* ---------------- funil ----------------
   A barra mora dentro de um TRILHO de largura fixa. Antes ela era o proprio item
   da grade e a largura em % era calculada contra uma base de outro publico: dava
   500%, e a barra saia da coluna e escrevia por cima do cartao ao lado.
   A cor sai dos tokens - o gradiente tinha um laranja cravado no codigo, que
   brigava com o tema da casa. */
.funil-grupo + .funil-grupo{margin-top:14px}
.funil-rot{font-size:11px;font-weight:700;color:var(--ink-3);margin-bottom:7px;
  display:flex;align-items:center;gap:7px}
.funil-rot::after{content:'';flex:1;height:1px;background:var(--line-soft)}
.funil{display:grid;gap:6px}
.funil-passo{display:grid;grid-template-columns:1fr 84px;gap:10px;align-items:center}
.trilho-funil{background:var(--surface-3);border-radius:var(--r-xs);overflow:hidden}
.funil-passo .caixa{height:32px;border-radius:var(--r-xs);display:flex;align-items:center;padding:0 11px;
  font-size:12.5px;font-weight:650;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 74%,var(--info)) 100%);
  min-width:0;max-width:100%;transition:width .5s cubic-bezier(.3,.8,.3,1)}
.funil-passo .lado{display:flex;align-items:baseline;gap:6px;justify-content:flex-end}
.funil-passo .n{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px}
.funil-passo .queda{font-size:11px;color:var(--ink-3);font-weight:650;font-variant-numeric:tabular-nums}

/* ---------------- busca ---------------- */
.busca-linha{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.busca-linha input{flex:1 1 auto;max-width:420px;height:36px}
.busca-linha .conta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* No celular os quatro indicadores empilhavam e ocupavam quatro telas de rolagem
   antes da primeira demo aparecer. Dois por linha cabem e continuam legiveis. */
@media(max-width:560px){
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:12px 13px}
  .kpi .n{font-size:21px}
  .kpi .l{font-size:9.5px}
  .kpi .s{font-size:10.5px}
  .busca-linha input{max-width:none}
}

/* ---------------- lista de demos ---------------- */
.lista{display:grid;gap:9px}
.demo-cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sombra-1);overflow:hidden;transition:box-shadow var(--transicao)}
.demo-cartao:hover{box-shadow:var(--sombra-2)}
.demo-cab{display:grid;grid-template-columns:34px minmax(140px,1.5fr) auto repeat(3,minmax(74px,.7fr)) 22px;
  gap:13px;align-items:center;padding:13px 16px;cursor:pointer;width:100%;text-align:left}
.demo-cab:hover{background:var(--surface-2)}
@media(max-width:900px){
  .demo-cab{grid-template-columns:34px 1fr auto 22px}
  .demo-cab .metrica{display:none}
}
.demo-cab .marca-demo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:#fff;letter-spacing:-.02em;flex:none}
.demo-cab .nome{font-weight:700;font-size:13.5px;letter-spacing:-.01em;min-width:0}
.demo-cab .nome small{display:block;font-weight:500;color:var(--ink-3);font-size:11.5px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-cab .metrica{text-align:right}
.demo-cab .metrica b{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.demo-cab .metrica span{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.demo-cab .seta{color:var(--ink-4);transition:transform var(--transicao)}
.demo-cartao.aberto .seta{transform:rotate(180deg)}

.demo-detalhe{border-top:1px solid var(--line);background:var(--surface-2);padding:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.demo-detalhe{grid-template-columns:1fr}}
.bloco-tit{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:750;
  color:var(--ink-3);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.bloco-tit .ic{width:13px;height:13px}
.linha-evento{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;
  font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--line-soft)}
.linha-evento:last-child{border-bottom:none}
.linha-evento time{color:var(--ink-4);font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap}
.linha-evento .quem{color:var(--ink-3);font-size:11px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.pessoa{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px dashed var(--line-soft);font-size:12.5px}
.pessoa:last-child{border-bottom:none}
.pessoa .quando{margin-left:auto;color:var(--ink-3);font-size:11px;white-space:nowrap}
.mini-tabela{width:100%;border-collapse:collapse;font-size:12.5px}
.mini-tabela td{padding:5px 0;border-bottom:1px dashed var(--line-soft)}
.mini-tabela td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.mini-tabela tr:last-child td{border-bottom:none}

/* ---------------- follow-up: demos que estao com cliente ----------------
   A cor da borda esquerda e o estado do follow-up. O cartao inteiro muda de
   temperatura, entao a fila de quem precisa de contato se le de longe, sem
   ninguem ter que comparar numero por numero. */
.demo-cartao.follow{border-left:3px solid var(--line)}
.demo-cartao.follow.ativo{border-left-color:var(--ok)}
.demo-cartao.follow.morno{border-left-color:var(--ink-4)}
.demo-cartao.follow.esfriou{border-left-color:var(--warn)}
.demo-cartao.follow.nao-abriu{border-left-color:var(--brand)}
.demo-cab.enviada{grid-template-columns:34px minmax(150px,1.6fr) auto repeat(3,minmax(78px,.7fr)) 22px}
@media(max-width:900px){.demo-cab.enviada{grid-template-columns:34px 1fr auto 22px}}

.recado{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:12.5px;font-weight:650;
  border-top:1px solid var(--line-soft);background:var(--surface-2);color:var(--ink-2)}
.recado .ic{width:15px;height:15px;flex:none}
.recado.ruim{background:var(--brand-soft);color:var(--brand)}
.recado.aviso{background:var(--warn-soft);color:var(--warn)}
.recado.ok{background:var(--ok-soft);color:var(--ok)}
.recado .btn{margin-left:auto}

.form-envio{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:5px}
.form-envio input{width:auto;height:32px;font-size:12.5px;min-width:0}
.form-envio input[type="date"]{width:135px}
.form-envio input[type="text"]{flex:1 1 110px}

.pessoas-lista{display:grid;gap:7px}
.pessoa-cartao{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.pessoa-cartao .quem{min-width:0;display:grid}
.pessoa-cartao .quem b{font-size:12.5px;font-weight:700}
.pessoa-cartao .quem span{font-size:11px;color:var(--ink-3)}
.pessoa-cartao .ultimo{margin-left:auto;font-size:11px;color:var(--ink-3);white-space:nowrap;font-weight:650}

/* ---------------- fluxo do candidato ---------------- */
.trilha{display:grid;gap:0}
.etapa{display:grid;grid-template-columns:44px 1fr auto;gap:15px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 17px;box-shadow:var(--sombra-1);position:relative;transition:box-shadow var(--transicao)}
.etapa:hover{box-shadow:var(--sombra-2)}
.etapa.desligada{opacity:.6;box-shadow:none;background:var(--surface-2)}
.etapa .selo-n{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);flex:none}
.etapa .selo-n svg{width:17px;height:17px;stroke-width:2}
.etapa.desligada .selo-n{background:var(--surface-3);color:var(--ink-4)}
.etapa .t{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.etapa .motor{font-size:11.5px;color:var(--ink-2);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.etapa .motor code{background:var(--surface-3);padding:2px 7px;border-radius:6px;font-size:10.5px;font-weight:650;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.etapa .d{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.etapa .c{text-align:right;white-space:nowrap}
.etapa .c b{font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.etapa .c span{display:block;font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-top:2px}
.tubo{width:2px;height:14px;background:var(--line);margin-left:38px}
.tubo.morno{background:linear-gradient(180deg,var(--brand-line),var(--line))}

.seletor-demo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seletor-demo select{width:auto;min-width:230px;height:36px}
.seletor-demo .rot{font-size:11.5px;font-weight:700;color:var(--ink-2)}

/* ---------------- estado dos servicos ---------------- */
.selo-estado{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:750;
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.selo-estado::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.selo-estado.ok{background:var(--ok-soft);color:var(--ok)}
.selo-estado.aviso{background:var(--warn-soft);color:var(--warn)}
.selo-estado.ruim{background:var(--brand-soft);color:var(--brand)}
.selo-estado.neutro{background:var(--surface-3);color:var(--ink-3)}

/* contagem de acoes iguais e seguidas ("abriu a vaga 10x") */
.linha-evento .vezes{font-size:10.5px;font-weight:800;color:var(--ink-3);
  background:var(--surface-3);padding:1px 5px;border-radius:20px;margin-left:4px;
  font-variant-numeric:tabular-nums}