/* ── Eyebrow ─────────────────────────────────────────── */
.ey {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--lav);
  display: block;
  margin-bottom: 14px;
}

/* ── Buttons ─────────────────────────────────────────── */
.bp, .bs, .bg, .bw {
  display: inline-block;
  border-radius: 0;
  font-family: 'Kind Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  border: 1px solid transparent;
}

.bp { background: var(--cta);        color: var(--wh);  padding: 12px 28px; border-color: var(--cta);        border-radius: 6px; }
.bs { background: transparent;       color: var(--burg); padding: 12px 24px; border-color: var(--burg);      border-radius: 6px; }
.bg { background: transparent;       color: var(--ink);  padding: 11px 22px; border-color: rgba(0,0,0,0.2);  border-radius: 6px; font-weight: 500; letter-spacing: 1.6px; }
.bw { background: var(--wh);         color: var(--ink);  padding: 12px 24px; border-color: var(--wh);        border-radius: 6px; }

.bp:hover { background: #5a2238; border-color: #5a2238; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(112,43,71,0.32); }
.bs:hover { background: var(--burg); color: var(--wh); }
.bg:hover { border-color: rgba(0,0,0,0.38); background: rgba(0,0,0,0.025); }

/* ── Avatar ──────────────────────────────────────────── */
.av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wh);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* ── Status badges ───────────────────────────────────── */
.sb {
  font-size: 10px;
  padding: 3px 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 4px;
}
/* Payment states (canonical) */
.s-ok  { background: rgba(41,63,50,0.1);    color: var(--forest); } /* Pago al día     */
.s-pe  { background: rgba(202,168,0,0.15);  color: #7a6000; }       /* Pago en proceso */
.s-fp  { background: rgba(220,38,38,0.1);   color: #dc2626; }       /* Falta pago      */
.s-in  { background: rgba(0,0,0,0.06);      color: var(--stone); }  /* Inactivo        */
/* Legacy / internal */
.s-bl  { background: rgba(112,43,71,0.08);  color: var(--cta); }

/* ── Metric color badges ─────────────────────────────── */
.dmet-b {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  display: inline-block;
}
.b-ok   { background: rgba(41,63,50,0.1);    color: var(--forest); }
.b-warn { background: rgba(202,168,0,0.15);  color: #7a6000; }
.b-err  { background: rgba(220,38,38,0.1);   color: #dc2626; }
.b-in   { background: rgba(0,0,0,0.06);      color: var(--stone); }
.b-blk  { background: rgba(112,43,71,0.08);  color: var(--cta); }
.b-lav  { background: rgba(152,118,245,0.1); color: var(--lav); }

/* ── Progress bars ───────────────────────────────────── */
.prog-bar { height: 4px; background: rgba(0,0,0,0.06); margin: 10px 0 4px; border-radius: 2px; }
.prog-f   { height: 4px; background: linear-gradient(90deg, var(--lav), var(--burg)); border-radius: 2px; }
.pr       { height: 4px; background: rgba(0,0,0,0.06); margin-bottom: 5px; border-radius: 2px; }
.pf       { height: 4px; background: linear-gradient(90deg, var(--lav), var(--burg)); border-radius: 2px; }

/* ── Level badge ─────────────────────────────────────── */
.lv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(152,118,245,0.1);
  color: var(--lav);
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  border-radius: 6px;
}