/* ============================================================================
   demonstracao.css — barra do modo Demonstração + telas sociais fictícias.
   Cobre os DOIS temas (escuro padrão + body.theme-light) — regra forte do projeto.
   Cores da marca: roxo #5B1F7E, ouro #D4AF37.
   ============================================================================ */

/* ------------------------------- BARRA ------------------------------------ */
.avance-demo-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.6rem 1rem; border-bottom:1px solid rgba(212,175,55,.35);
  background:linear-gradient(90deg, rgba(91,31,126,.95), rgba(60,20,90,.95));
  color:#fff; font-size:.8rem;
}
.avance-demo-bar-info{ display:flex; align-items:center; gap:.6rem; }
.avance-demo-bar-info > i{ font-size:1.1rem; color:#D4AF37; }
.avance-demo-bar-info b{ display:block; font-weight:800; letter-spacing:.02em; }
.avance-demo-bar-info span{ display:block; font-size:.72rem; color:rgba(255,255,255,.78); }
.avance-demo-bar-personas{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.avance-demo-vercomo{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); font-weight:700; }
.avance-demo-persona{
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:.6rem;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff;
  font-size:.75rem; font-weight:700; cursor:pointer; transition:all .15s;
}
.avance-demo-persona:hover{ background:rgba(255,255,255,.18); }
.avance-demo-persona[data-ativo="1"]{ background:#D4AF37; color:#3a2456; border-color:#D4AF37; box-shadow:0 2px 10px rgba(212,175,55,.4); }

/* No modo demo, esconde a sub-aba "Resultados" do painel do gestor (medalhas reais — não faladas). */
body.avance-demo [data-pgtab="resultados"]{ display:none !important; }
/* Some com o rodapé de tendência (delta vs 7 dias / sparkline): sem histórico fictício de KPI-cache,
   o delta compararia com base zerada e mostraria % absurdos. Os números absolutos já contam a história. */
body.avance-demo .pg-trend{ display:none !important; }

/* ------------------------------ PAINÉIS ----------------------------------- */
.avance-demo-panel{ max-width:1100px; margin:0 auto; padding:.25rem 0 1.5rem; }
.avance-demo-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.avance-demo-head h2{ font-size:1.35rem; font-weight:800; color:#fff; margin:0; }
.avance-demo-head p{ font-size:.85rem; color:#9aa4b2; margin:.15rem 0 0; }
.avance-demo-selo{
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  padding:.3rem .6rem; border-radius:999px; font-size:.68rem; font-weight:800;
  background:rgba(212,175,55,.15); color:#D4AF37; border:1px solid rgba(212,175,55,.4);
}

.avance-demo-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.75rem; margin-bottom:1rem; }
.avance-demo-kpi{
  background:#141a24; border:1px solid #232c3a; border-radius:1rem; padding:.9rem 1rem;
  display:flex; flex-direction:column; gap:.15rem; position:relative; overflow:hidden;
}
.avance-demo-kpi > i{ font-size:1.05rem; color:#8b5cf6; margin-bottom:.2rem; }
.avance-demo-kpi.chama > i{ color:#f97316; }
.avance-demo-kpi b{ font-size:1.5rem; font-weight:800; color:#fff; line-height:1; }
.avance-demo-kpi span{ font-size:.72rem; color:#8b95a5; }

.avance-demo-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:760px){ .avance-demo-grid2{ grid-template-columns:1fr; } }
.avance-demo-bloco{ background:#141a24; border:1px solid #232c3a; border-radius:1rem; padding:1rem; }
.avance-demo-bloco h3{ font-size:.9rem; font-weight:800; color:#e5e9f0; margin:0 0 .75rem; display:flex; align-items:center; gap:.45rem; }
.avance-demo-bloco h3 > i{ color:#D4AF37; }

.avance-demo-barra{ height:8px; border-radius:999px; background:#232c3a; overflow:hidden; margin-top:.35rem; }
.avance-demo-barra.sm{ height:5px; margin-top:.3rem; }
.avance-demo-barra > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#8b5cf6,#5B1F7E); }
.avance-demo-barra > span.alto{ background:linear-gradient(90deg,#34d399,#059669); }
.avance-demo-barra > span.medio{ background:linear-gradient(90deg,#fbbf24,#d97706); }
.avance-demo-barra > span.baixo{ background:linear-gradient(90deg,#fb7185,#e11d48); }

.avance-demo-missao, .avance-demo-trilha{ margin-bottom:.7rem; }
.avance-demo-missao-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.82rem; color:#cdd4de; }
.avance-demo-missao-top b{ color:#D4AF37; font-size:.72rem; }
.avance-demo-missao small, .avance-demo-quando{ font-size:.68rem; color:#7c8698; }
.avance-demo-missao.ok .avance-demo-missao-top span{ color:#34d399; }

.avance-demo-aula{
  display:flex; align-items:center; gap:.8rem; background:linear-gradient(90deg,rgba(91,31,126,.4),rgba(20,26,36,.4));
  border:1px solid #2c2350; border-radius:1rem; padding:.85rem 1rem; margin-bottom:1rem;
}
.avance-demo-aula > i{ font-size:1.3rem; color:#a78bfa; }
.avance-demo-aula b{ display:block; color:#fff; font-size:.9rem; }
.avance-demo-aula span{ display:block; font-size:.75rem; color:#9aa4b2; }
.avance-demo-aula .avance-demo-btn{ margin-left:auto; }

.avance-demo-btn{ padding:.45rem .9rem; border-radius:.6rem; border:none; background:#D4AF37; color:#3a2456; font-weight:800; font-size:.78rem; cursor:pointer; }
.avance-demo-btn.sm{ padding:.3rem .7rem; font-size:.72rem; margin-top:.5rem; }
.avance-demo-btn:hover{ filter:brightness(1.06); }

/* Mural */
.avance-demo-mural-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; margin-bottom:1rem; }
.avance-demo-mural-card{ background:#141a24; border:1px solid #232c3a; border-radius:1rem; padding:.9rem; }
.avance-demo-mural-top{ display:flex; align-items:center; gap:.5rem; }
.avance-demo-avatar{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#8b5cf6,#5B1F7E); flex:none; }
.avance-demo-avatar.sm{ width:28px; height:28px; font-size:.8rem; }
.avance-demo-mural-top b{ display:block; color:#fff; font-size:.85rem; }
.avance-demo-mural-top small{ display:block; color:#8b95a5; font-size:.7rem; }
.avance-demo-medalha{ margin-left:auto; font-size:1.3rem; }
.avance-demo-conquista{ margin:.6rem 0 .3rem; font-size:.82rem; color:#dbe1ea; }

/* Ranking */
.avance-demo-rank-linha{ display:flex; align-items:center; gap:.7rem; padding:.4rem 0; border-bottom:1px solid #1e2632; }
.avance-demo-rank-linha:last-child{ border-bottom:none; }
.avance-demo-pos{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.78rem; background:#232c3a; color:#cdd4de; flex:none; }
.avance-demo-pos.top{ background:#D4AF37; color:#3a2456; }
.avance-demo-rank-nome{ flex:1; }
.avance-demo-rank-nome b{ display:block; color:#e5e9f0; font-size:.82rem; }
.avance-demo-rank-nome small{ display:block; color:#8b95a5; font-size:.68rem; }
.avance-demo-pontos{ font-weight:800; color:#D4AF37; font-size:.8rem; }

/* Monitoria */
.avance-demo-duvida{ background:#141a24; border:1px solid #232c3a; border-left:3px solid #f59e0b; border-radius:.8rem; padding:.75rem; margin-bottom:.6rem; }
.avance-demo-duvida.ok{ border-left-color:#34d399; }
.avance-demo-duvida-top{ display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.avance-demo-duvida-top b{ color:#fff; font-size:.82rem; }
.avance-demo-duvida-top small{ color:#8b95a5; font-size:.68rem; }
.avance-demo-duvida p{ font-size:.82rem; color:#cdd4de; margin:.2rem 0 .3rem; }
.avance-demo-tag{ margin-left:auto; font-size:.62rem; text-transform:uppercase; font-weight:800; padding:.2rem .5rem; border-radius:999px; }
.avance-demo-tag.pend{ background:rgba(245,158,11,.18); color:#fbbf24; }
.avance-demo-tag.ok{ background:rgba(52,211,153,.18); color:#34d399; }
.avance-demo-sala{ display:flex; align-items:center; gap:.6rem; background:#0f151d; border:1px solid #232c3a; border-radius:.7rem; padding:.6rem .75rem; margin-bottom:.5rem; }
.avance-demo-sala > i{ color:#a78bfa; }
.avance-demo-sala b{ display:block; color:#e5e9f0; font-size:.82rem; }
.avance-demo-sala small{ display:block; color:#8b95a5; font-size:.68rem; }
.avance-demo-badge{ margin-left:auto; background:#ef4444; color:#fff; font-weight:800; font-size:.7rem; border-radius:999px; padding:.1rem .5rem; }

/* Meus Resultados */
.avance-demo-res-linha{ display:grid; grid-template-columns:1.4fr 2fr auto; align-items:center; gap:.75rem; padding:.5rem 0; border-bottom:1px solid #1e2632; }
.avance-demo-res-linha:last-child{ border-bottom:none; }
.avance-demo-res-linha b{ color:#e5e9f0; font-size:.82rem; }
.avance-demo-res-linha small{ color:#8b95a5; font-size:.68rem; }
.avance-demo-nota{ font-weight:800; font-size:.85rem; }
.avance-demo-nota.alto{ color:#34d399; } .avance-demo-nota.medio{ color:#fbbf24; } .avance-demo-nota.baixo{ color:#fb7185; }
@media (max-width:620px){ .avance-demo-res-linha{ grid-template-columns:1fr auto; } .avance-demo-res-linha .avance-demo-barra{ grid-column:1 / -1; } }

/* =============================== TEMA CLARO =============================== */
body.theme-light .avance-demo-head h2{ color:#1f2937; }
body.theme-light .avance-demo-head p{ color:#6b7280; }
body.theme-light .avance-demo-kpi,
body.theme-light .avance-demo-bloco,
body.theme-light .avance-demo-mural-card{ background:#fff; border-color:#e5e7eb; box-shadow:0 1px 3px rgba(0,0,0,.05); }
body.theme-light .avance-demo-kpi b,
body.theme-light .avance-demo-mural-top b,
body.theme-light .avance-demo-duvida-top b,
body.theme-light .avance-demo-aula b,
body.theme-light .avance-demo-res-linha b{ color:#1f2937; }
body.theme-light .avance-demo-kpi span,
body.theme-light .avance-demo-mural-top small,
body.theme-light .avance-demo-rank-nome small{ color:#6b7280; }
body.theme-light .avance-demo-bloco h3{ color:#374151; }
body.theme-light .avance-demo-barra{ background:#e5e7eb; }
body.theme-light .avance-demo-missao-top{ color:#4b5563; }
body.theme-light .avance-demo-duvida{ background:#fff; }
body.theme-light .avance-demo-duvida p{ color:#4b5563; }
body.theme-light .avance-demo-sala{ background:#f9fafb; }
body.theme-light .avance-demo-sala b, body.theme-light .avance-demo-rank-nome b{ color:#1f2937; }
body.theme-light .avance-demo-pos{ background:#eef2f7; color:#4b5563; }
body.theme-light .avance-demo-avatar{ color:#fff; }
body.theme-light .avance-demo-aula{ background:linear-gradient(90deg,rgba(91,31,126,.08),rgba(0,0,0,.02)); border-color:#e5d9f2; }
body.theme-light .avance-demo-aula span{ color:#6b7280; }