/* ═══════════ XP POR PERÍODO (BIMESTRE) ═══════════ */
/* Chips de escopo, faixa de aviso e card de evolução por bimestre.
   Ver js/xp-periods.js. */

/* ── Chips de escopo ── */
.xpp-scope-chips{
  align-items:center;
  padding:7px 9px;
  background:rgba(34,211,238,0.04);
  border:1px solid rgba(34,211,238,0.14);
  border-radius:10px;
}
.xpp-scope-lbl{
  font-size:0.64rem;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--muted);margin-right:3px;align-self:center;
}
.xpp-scope-chips .chip.active{
  background:rgba(34,211,238,0.14);color:var(--teal);border-color:rgba(34,211,238,0.32);
}

/* ── Faixa de aviso (vendo período passado / ano) ── */
.xpp-scope-hint{
  padding:8px 12px;margin-bottom:11px;border-radius:8px;
  font-size:0.74rem;line-height:1.4;
  background:rgba(251,146,60,0.07);
  border:1px solid rgba(251,146,60,0.22);
  color:var(--muted2);
}
.xpp-scope-hint strong{color:var(--orange);}

/* ── Evolução por bimestre (perfil do aluno) ── */
.xpp-breakdown{
  background:var(--card2);border:1px solid var(--border);
  border-radius:10px;padding:11px 12px;margin-bottom:14px;
}
.xpp-bd-hd{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:0.74rem;font-weight:900;color:var(--teal);margin-bottom:10px;
}
.xpp-bd-year{font-size:0.68rem;font-weight:600;color:var(--muted2);}
.xpp-bd-year strong{color:var(--gold);font-weight:900;}

.xpp-bd-bars{display:flex;align-items:flex-end;gap:8px;}
.xpp-bd-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.xpp-bd-val{
  font-size:0.64rem;font-weight:900;color:var(--muted2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.xpp-bd-track{
  width:100%;height:56px;display:flex;align-items:flex-end;
  background:rgba(255,255,255,0.03);border-radius:5px;overflow:hidden;
}
.xpp-bd-fill{
  width:100%;min-height:2px;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--teal),var(--teal2));
  transition:height 0.25s ease;
}
.xpp-bd-fill.is-current{background:linear-gradient(180deg,var(--gold),var(--gold2));}
.xpp-bd-lbl{
  font-size:0.6rem;font-weight:800;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.xpp-bd-lbl.is-current{color:var(--gold);}
.xpp-bd-note{
  margin-top:9px;font-size:0.64rem;color:var(--muted);line-height:1.35;
}

/* ── Selo de escopo reutilizável (portal do aluno / responsável) ── */
.xpp-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:20px;
  font-size:0.62rem;font-weight:800;
  background:rgba(34,211,238,0.1);color:var(--teal);
  border:1px solid rgba(34,211,238,0.22);
}

@media (max-width:600px){
  .xpp-scope-lbl{display:none;}
  .xpp-bd-track{height:44px;}
  .xpp-bd-val{font-size:0.58rem;}
  .xpp-bd-lbl{font-size:0.55rem;}
}