/* ============================================================
   TELA · JORDÃO GESTOR · quatro abas do CRM
   ============================================================
   A copy da seção 06 da LP faz quatro promessas, e cada uma mora
   numa aba diferente. A peça atravessa as quatro:

     1. /meetings          · Como o time está vendendo + Voz do cliente
     2. /meetings/raiox    · Raio-X do closer
     3. /meetings/rep/[id] · Coaching do vendedor (drill-down)
     4. /dashboard         · O que o time fez + Painel dos Campeões

   Tokens:
     .rn  → src/app/(app)/meetings/calls.css:13-27   (fases 1, 3)
     .rx  → src/app/(app)/meetings/raiox/raiox.css:5-27 (fase 2)
     .kp  → src/app/(app)/dashboard/kpis.css        (fase 4)

   Medidas em cqw, escala de referência 1600px.
   ============================================================ */

/* ── Tokens · calls.css (tema CLARO, que é o padrão de .rn) ── */
.tela[data-tela="jordao-gestor"] {
  --bg:#FFFFFF; --bg-2:#F6F5F1; --card:#FFFFFF; --card-2:#F4F4F5; --card-3:#ECECEE;
  --rule:#E2E2E6; --rule-soft:#EDEDF0;
  --ink:#1A1A16; --ink-soft:#46453E; --ink-mute:#71706A; --ink-dim:#A7A69E;
  --y:#F5C518; --y-deep:#E0B000; --y-soft:rgba(245,197,24,.14); --y-glow:rgba(245,197,24,.22);
  --green:#46C46B; --green-soft:rgba(70,196,107,.14);
  --red:#E5533C; --red-soft:rgba(229,83,60,.12);
  --blue:#4A9BE5; --blue-soft:rgba(74,155,229,.14);
  --purple:#8B5CF6; --purple-soft:rgba(139,92,246,.14);
  --orange:#F5A623;

  /* Raio-X · raiox.css:5-27 · esse é escuro */
  --rx-bg:#0b0b0c; --rx-paper:#141416; --rx-paper-2:#1a1a1d; --rx-paper-3:#222226;
  --rx-rule:#2a2a2e; --rx-ink:#f4f3f0; --rx-ink-soft:#c6c4bc; --rx-ink-mute:#8b8980;
  --rx-ink-dim:#5e5c55; --rx-y:#f5c518; --rx-glow:rgba(245,197,24,.3);
}

.gestor {
  position: absolute; inset: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875cqw;
  line-height: 1.5;
  overflow: hidden;
}
.gestor *, .gestor *::before, .gestor *::after { box-sizing: border-box; }
.gestor button { font-family: inherit; cursor: pointer; }

/* Cada fase ocupa a área inteira */
.fase { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }

/* Cabeçalho de aba · comum às quatro */
.g-top {
  display: flex; align-items: center; gap: 0.75cqw;
  padding: 0.75cqw 1.5cqw;
  border-bottom: 0.0625cqw solid var(--rule);
  flex-shrink: 0;
}
.g-top h1 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.06cqw; font-weight: 700; letter-spacing: -0.02em;
}
.g-top .sub { font-size: 0.75cqw; color: var(--ink-mute); }
.g-top .sp { flex: 1; }
.g-chip {
  font-size: 0.72cqw; font-weight: 700; color: var(--ink-mute);
  background: var(--bg-2); border: 0.0625cqw solid var(--rule);
  border-radius: 999px; padding: 0.31cqw 0.75cqw;
}
.g-chip.on { background: var(--y); color: #0a0a0b; border-color: var(--y); }

.g-corpo { flex: 1; min-height: 0; padding: 1.1cqw 1.5cqw; overflow: hidden; }
.g-2col { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.25cqw; height: 100%; }

/* ── Painel · calls.css .rn-panel ──────────────────────────── */
.rn-panel {
  background: var(--card);
  border: 0.0625cqw solid var(--rule);
  border-radius: 0.875cqw;
  padding: 0.94cqw 1.06cqw;
  display: flex; flex-direction: column; min-height: 0;
}
.rn-panel-head { display: flex; align-items: center; gap: 0.625cqw; margin-bottom: 0.875cqw; }
.rn-panel-head .ic {
  width: 1.94cqw; height: 1.94cqw; border-radius: 0.56cqw;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--y-soft); color: var(--y-deep);
}
.rn-panel-head .ic svg { width: 1.06cqw; height: 1.06cqw; }
.rn-panel-head .ic.azul { background: var(--blue-soft); color: var(--blue); }
.rn-panel-head .t { font-size: 0.94cqw; font-weight: 700; line-height: 1.2; }
.rn-panel-head .t small { display: block; font-size: 0.7cqw; font-weight: 400; color: var(--ink-mute); margin-top: 0.09cqw; }

/* Linhas do "Como o time está vendendo" · .rn-coach-row */
.rn-coach-row {
  display: flex; align-items: center; gap: 0.75cqw;
  padding: 0.625cqw 0;
  border-bottom: 0.0625cqw solid var(--rule-soft);
}
.rn-coach-row:last-child { border-bottom: 0; }
.rn-coach-av {
  width: 2cqw; height: 2cqw; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.72cqw; font-weight: 700; color: #1a1a16;
}
.rn-coach-id { width: 7.5cqw; flex-shrink: 0; }
.rn-coach-id .nm { font-size: 0.8125cqw; font-weight: 700; display: flex; align-items: center; gap: 0.31cqw; }
.rn-coach-id .role { font-size: 0.688cqw; color: var(--ink-mute); }
.you-tag {
  font-size: 0.55cqw; font-weight: 800; letter-spacing: 0.08em;
  background: var(--y); color: #1a1a16; border-radius: 0.25cqw; padding: 0.06cqw 0.31cqw;
}
.rn-coach-bar-wrap { flex: 1; min-width: 0; }
.rn-coach-bar-top {
  display: flex; justify-content: space-between;
  font-size: 0.656cqw; color: var(--ink-mute); margin-bottom: 0.25cqw;
}
.rn-coach-bar { height: 0.44cqw; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.rn-coach-bar i {
  display: block; height: 100%; border-radius: 999px; width: 0;
  background: var(--y);
  transition: width 0.7s cubic-bezier(.22,.61,.36,1);
}
.rn-coach-bar i.risco { background: var(--red); }
.rn-coach-grade {
  width: 2.5cqw; text-align: right; flex-shrink: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.19cqw; font-weight: 700; line-height: 1;
}
.rn-coach-grade.ok { color: var(--green); }
.rn-coach-grade.med { color: var(--y-deep); }
.rn-coach-grade.risco { color: var(--red); }

/* Voz do cliente · .rn-voc */
.rn-voc { display: flex; flex-direction: column; gap: 0.875cqw; }
.rn-voc-lbl {
  display: flex; align-items: center; gap: 0.31cqw;
  font-size: 0.625cqw; font-weight: 800; letter-spacing: 0.08em;
  color: var(--ink-mute); margin-bottom: 0.44cqw;
}
.rn-voc-lbl svg { width: 0.688cqw; height: 0.688cqw; }
.rn-voc-lbl .obj  { color: var(--red); }
.rn-voc-lbl .want { color: var(--green); }
.rn-voc-item {
  display: flex; align-items: center; gap: 0.5cqw;
  padding: 0.31cqw 0;
  font-size: 0.75cqw;
}
.rn-voc-item .rank {
  width: 1cqw; height: 1cqw; border-radius: 0.25cqw;
  background: var(--card-2); color: var(--ink-mute);
  display: grid; place-items: center;
  font-size: 0.6cqw; font-weight: 700; flex-shrink: 0;
}
.rn-voc-item .txt { width: 9cqw; flex-shrink: 0; font-weight: 600; }
.rn-voc-item .track { flex: 1; height: 0.375cqw; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.rn-voc-item .track i {
  display: block; height: 100%; border-radius: 999px; width: 0;
  transition: width 0.6s cubic-bezier(.22,.61,.36,1);
}
.rn-voc-item .cnt { width: 1.75cqw; text-align: right; flex-shrink: 0; font-size: 0.688cqw; font-weight: 700; color: var(--ink-mute); }

/* ── FASE 2 · Raio-X (escuro) ──────────────────────────────── */
.fase-rx { background: var(--rx-bg); color: var(--rx-ink); }
.fase-rx .g-top { border-bottom-color: var(--rx-rule); }
.fase-rx .g-top .sub { color: var(--rx-ink-mute); }
.fase-rx .g-chip { background: var(--rx-paper); border-color: var(--rx-rule); color: var(--rx-ink-mute); }
.fase-rx .g-chip.on { background: var(--rx-y); color: #0a0a0b; border-color: var(--rx-y); }
.rx-linha { display: flex; align-items: center; gap: 0.75cqw; margin-bottom: 0.75cqw; }
.rx-linha .nm { width: 5cqw; flex-shrink: 0; font-size: 0.8125cqw; font-weight: 700; }
.rx-linha .track { flex: 1; height: 0.625cqw; border-radius: 999px; background: var(--rx-paper-3); overflow: hidden; }
.rx-linha .track i {
  display: block; height: 100%; border-radius: 999px; width: 0;
  background: var(--rx-y);
  transition: width 0.7s cubic-bezier(.22,.61,.36,1);
}
.rx-linha .track i.risco { background: var(--red); }
.rx-linha .pct { width: 2.75cqw; text-align: right; flex-shrink: 0; font-size: 0.8125cqw; font-weight: 800; }
.rx-linha .pct.risco { color: var(--red); }
.rx-alerta {
  background: var(--rx-paper);
  border: 0.0625cqw solid var(--rx-rule);
  border-left: 0.19cqw solid var(--red);
  border-radius: 0.75cqw;
  padding: 0.875cqw 1cqw;
  font-size: 0.8125cqw; line-height: 1.45;
}
.rx-alerta b { color: var(--rx-y); }
.rx-card {
  background: var(--rx-paper);
  border: 0.0625cqw solid var(--rx-rule);
  border-radius: 0.875cqw;
  padding: 0.94cqw 1.1cqw;
}
.rx-card .k {
  font-size: 0.63cqw; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rx-ink-mute); margin-bottom: 0.44cqw;
}
.rx-card .v {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.06cqw; font-weight: 700; line-height: 1.25; color: var(--rx-ink);
}
.rx-card .v.grande { font-size: 2cqw; line-height: 1; }
.rx-card .sub { font-size: 0.688cqw; color: var(--rx-ink-mute); margin-top: 0.19cqw; }
.rx-card .sub.up { color: var(--green); }
.rx-caveat { font-family: "Caveat", cursive; font-size: 1.5cqw; color: var(--rx-y); line-height: 1.15; margin-top: auto; }
.rx-col { display: flex; flex-direction: column; gap: 0.875cqw; min-width: 0; }

/* ── FASE 3 · Coaching do vendedor ─────────────────────────── */
.rn-evo-hero {
  display: flex; align-items: center; gap: 1.1cqw;
  background: var(--card); border: 0.0625cqw solid var(--rule);
  border-radius: 0.875cqw; padding: 1.1cqw 1.25cqw;
  margin-bottom: 0.875cqw;
}
.rn-evo-av {
  width: 3.5cqw; height: 3.5cqw; border-radius: 0.75cqw;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 1.25cqw; font-weight: 800; color: #1a1a16;
}
.rn-evo-id { flex: 1; min-width: 0; }
.rn-evo-id .nm { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.25cqw; font-weight: 700; }
.rn-evo-id .rl { font-size: 0.75cqw; color: var(--ink-mute); }
.rn-evo-score { text-align: center; flex-shrink: 0; }
.rn-evo-score .g {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 3.1cqw; font-weight: 800; letter-spacing: -0.04em;
  color: var(--y-deep); line-height: 0.85;
}
.rn-evo-score .l { font-size: 0.688cqw; color: var(--ink-mute); font-weight: 700; margin-top: 0.31cqw; }
.rn-evo-score .delta { font-size: 0.75cqw; font-weight: 700; color: var(--green); margin-top: 0.31cqw; }
.rn-evo-score .delta.down { color: var(--red); }

/* Notas por competência · .rn-skill */
.rn-skill { margin-bottom: 0.75cqw; }
.rn-skill-top {
  display: flex; justify-content: space-between;
  font-size: 0.75cqw; margin-bottom: 0.25cqw;
}
.rn-skill-top b { font-weight: 700; }
.rn-skill-track { height: 0.44cqw; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.rn-skill-track i {
  display: block; height: 100%; border-radius: 999px; width: 0;
  transition: width 0.7s cubic-bezier(.22,.61,.36,1);
}

/* Plano · foco das próximas semanas */
.rn-plan-item {
  display: flex; gap: 0.625cqw; align-items: flex-start;
  padding: 0.56cqw 0;
  border-bottom: 0.0625cqw solid var(--rule-soft);
  font-size: 0.8125cqw; line-height: 1.4;
}
.rn-plan-item:last-child { border-bottom: 0; }
.rn-plan-item .n {
  width: 1.25cqw; height: 1.25cqw; border-radius: 0.31cqw;
  background: var(--y-soft); color: var(--y-deep);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.63cqw; font-weight: 800;
}
.rn-plan-item b { color: var(--ink); }

/* Gráfico de evolução por call · .rn-evo-chart (simplificado em barras) */
.rn-evo-chart { display: flex; align-items: flex-end; gap: 0.44cqw; height: 5cqw; }
.rn-evo-call {
  flex: 1; border-radius: 0.19cqw 0.19cqw 0 0;
  background: var(--y); height: 0;
  transition: height 0.7s cubic-bezier(.22,.61,.36,1);
}
.rn-evo-call.baixa { background: var(--red); }
.rn-evo-axis {
  display: flex; justify-content: space-between;
  font-size: 0.6cqw; color: var(--ink-dim); margin-top: 0.31cqw;
}

/* ── FASE 4 · KPIs ─────────────────────────────────────────── */
.D-section-head { margin-bottom: 0.625cqw; }
.D-section-head .lbl {
  font-size: 0.75cqw; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute);
}
.D-section-head .lbl b { color: var(--ink); font-weight: 800; }
.D-work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75cqw; margin-bottom: 1.1cqw; }
.D-work-card {
  background: var(--card); border: 0.0625cqw solid var(--rule);
  border-radius: 0.875cqw; padding: 0.875cqw;
}
.D-work-card .wtop { display: flex; align-items: center; gap: 0.5cqw; }
.D-work-card .wic {
  width: 1.75cqw; height: 1.75cqw; border-radius: 0.5cqw;
  display: grid; place-items: center; flex-shrink: 0;
}
.D-work-card .wic svg { width: 1.06cqw; height: 1.06cqw; }
.D-work-card .wnm {
  font-size: 0.63cqw; font-weight: 800; letter-spacing: 0.08em; color: var(--ink-mute);
}
.D-work-card .wbig {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.75cqw; font-weight: 700; line-height: 1; margin-top: 0.44cqw;
}
.D-work-card .wper { font-size: 0.66cqw; color: var(--ink-mute); margin-top: 0.19cqw; }
.D-work-card .wper b { color: var(--ink-soft); }
/* Mini histórico · barrinhas por dia */
.D-mini { display: flex; align-items: flex-end; gap: 0.125cqw; height: 1.5cqw; margin-top: 0.56cqw; }
.D-mini i { flex: 1; border-radius: 0.09cqw 0.09cqw 0 0; opacity: .55; }

/* Painel dos Campeões */
.D-champ-head { display: flex; align-items: center; gap: 0.75cqw; margin-bottom: 0.625cqw; }
.D-champ-head .t {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.94cqw; font-weight: 700;
}
.D-champ-head .sp { flex: 1; }
.D-champ-head button {
  font-size: 0.688cqw; font-weight: 600; color: var(--ink-mute);
  background: var(--bg-2); border: 0.0625cqw solid var(--rule);
  border-radius: 999px; padding: 0.25cqw 0.625cqw;
}
.D-champ-head button.on { background: var(--y); color: #1a1a16; border-color: var(--y); }
.D-table {
  width: 100%; border-collapse: collapse;
  background: var(--card); border: 0.0625cqw solid var(--rule);
  border-radius: 0.875cqw; overflow: hidden;
}
.D-table th {
  font-size: 0.6cqw; font-weight: 800; letter-spacing: 0.06em;
  color: var(--ink-mute); text-align: right;
  padding: 0.625cqw 0.5cqw;
  border-bottom: 0.0625cqw solid var(--rule);
  background: var(--bg-2);
}
.D-table th.l, .D-table td.l { text-align: left; padding-left: 0.875cqw; }
.D-table td {
  font-size: 0.78cqw; text-align: right;
  padding: 0.5cqw; border-bottom: 0.0625cqw solid var(--rule-soft);
  font-variant-numeric: tabular-nums;
}
.D-table tr:last-child td { border-bottom: 0; }
.D-table tr.lead td { background: var(--y-soft); }
.D-rep { display: flex; align-items: center; gap: 0.5cqw; }
.D-rep .pos {
  width: 1.06cqw; height: 1.06cqw; border-radius: 0.25cqw;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.6cqw; font-weight: 800;
  background: var(--card-3); color: var(--ink-mute);
}
.D-rep .pos.p1 { background: var(--y); color: #1a1a16; }
.D-rep .av {
  width: 1.5cqw; height: 1.5cqw; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.63cqw; font-weight: 700; color: #1a1a16;
}
.D-rep .who { font-size: 0.78cqw; font-weight: 600; }

/* ── DEMO ──────────────────────────────────────────────────── */
[data-estado]:not(.mostrar) { display: none; }
.oculto { display: none !important; }
.g-entra { animation: mt-card-in 0.26s ease-out both; }