/* Cockpit — o painel de performance individual.
 *
 * Prefixo ck- e gr- de ponta a ponta: nome generico compartilhado entre
 * modulos ja quebrou o funil uma vez.
 */

.ck-topo-corpo {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}

.ck-nota {
  width: 132px; height: 132px; border-radius: 50%;
  border: 4px solid var(--border);
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  flex-shrink: 0;
}
.ck-nota .n { font-size: 46px; font-weight: 800; letter-spacing: -2px; line-height: 132px; }
.ck-nota .de { font-size: 14px; color: var(--text-faint); font-weight: 600; }

.ck-lado { flex: 1; min-width: 220px; }
.ck-faixa {
  font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
}
.ck-recado { font-size: 15px; line-height: 1.65; margin-top: 8px; }
.ck-pontos { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }

/* O radar mostra o formato do mes: equilibrio vira figura cheia, mes torto
   vira figura amassada — informacao que a tabela nao da. */
.ck-radar { width: 340px; height: 286px; flex-shrink: 0; }

.ck-item { padding: 15px 2px; border-bottom: 1px solid var(--border-soft); }
.ck-item:last-child { border-bottom: none; }
.ck-item-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ck-nome { font-size: 14.5px; font-weight: 600; }
.ck-elo {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface-3);
  padding: 2px 7px; border-radius: 9px; margin-left: 7px;
}
.ck-numeros { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.ck-numeros b { font-size: 17px; letter-spacing: -.3px; }
.ck-peso {
  font-size: 11.5px; color: var(--text-faint);
  background: var(--surface-2); padding: 2px 8px; border-radius: 9px;
}
.ck-trilho {
  height: 6px; background: var(--surface-3); border-radius: 3px;
  margin: 9px 0 7px; overflow: hidden;
}
.ck-trilho i { display: block; height: 100%; border-radius: 3px; }
.ck-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

/* ---- grid do mes ---- */
.gr-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 10px; border-bottom: 1px solid var(--border-soft);
  cursor: pointer; border-radius: 9px;
}
.gr-item:last-child { border-bottom: none; }
.gr-item:hover { background: var(--surface-2); }
.gr-item.lider { background: var(--brand-soft); }
.gr-pos {
  font-size: 19px; font-weight: 800; color: var(--text-faint);
  width: 38px; flex-shrink: 0; text-align: center;
}
.gr-item.lider .gr-pos { color: var(--brand); }
.gr-meio { flex: 1; min-width: 0; }
.gr-nome { font-size: 14.5px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.gr-faixa { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.gr-trilho {
  height: 5px; background: var(--surface-3); border-radius: 3px;
  margin: 8px 0 6px; overflow: hidden;
}
.gr-trilho i { display: block; height: 100%; border-radius: 3px; }
.gr-detalhe { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.gr-nota { font-size: 26px; font-weight: 800; letter-spacing: -1px; flex-shrink: 0; }

.ck-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 10px; }
.ck-mini div {
  display: flex; justify-content: space-between; font-size: 13px;
  padding: 5px 0; border-bottom: 1px solid var(--border-soft);
}

@media (max-width: 820px) {
  .ck-radar { width: 300px; height: 252px; margin: 0 auto; }
  .ck-mini { grid-template-columns: 1fr; }
}