/* /staging/programa.css — Programa de miembros (rango, insignias, ranking). Usa los tokens del site. */
.pg-grid { display:grid; grid-template-columns: 1.15fr 1fr; gap:18px; }
@media (max-width: 900px) { .pg-grid { grid-template-columns: 1fr; } }
.pg-card { padding:24px; }
.pg-head { display:flex; align-items:center; gap:18px; }
.pg-ring { display:inline-flex; align-items:center; justify-content:center; width:var(--pg-s,64px); height:var(--pg-s,64px);
  border-radius:50%; border:var(--pg-w,3px) solid var(--pg-c,#6B7280); background:rgba(255,255,255,0.03); flex:0 0 auto;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.03), 0 0 24px -8px var(--pg-c,#6B7280); }
.pg-ring > span { font-family:var(--display); font-weight:800; font-size:calc(var(--pg-s,64px) * .38); color:var(--pg-c,#6B7280); }
.pg-ring-xs { vertical-align:middle; box-shadow:none; }
.pg-nombre { font-family:var(--display); font-weight:800; font-size:28px; letter-spacing:.02em; line-height:1; }
.pg-lema { font-size:13.5px; color:var(--ink-2); margin-top:6px; }
.pg-chip { display:inline-block; padding:3px 10px; border-radius:999px; font-family:var(--display); font-weight:700; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.pg-chip-xs { font-size:9.5px; padding:2px 7px; vertical-align:middle; }
.pg-titulo { font-size:13px; color:var(--ink-2); margin-left:6px; }
.pg-desc { font-size:14px; margin:16px 0 14px; }
.pg-prog-label { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.pg-bar { height:10px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; margin:6px 0; }
.pg-bar > span { display:block; height:100%; border-radius:999px; transition:width .4s ease; }
.pg-prog-txt { font-size:13px; color:var(--ink-2); font-style:italic; }
.pg-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:18px; }
@media (max-width: 600px) { .pg-stats { grid-template-columns: repeat(2, 1fr); } }
.pg-stats > div { background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.pg-stats b { display:block; font-family:var(--display); font-weight:800; font-size:22px; color:var(--ink); line-height:1.1; }
.pg-stats span { font-size:11.5px; color:var(--ink-3); line-height:1.3; display:block; margin-top:3px; }
.pg-escudo { font-style:normal; margin-left:4px; }
.pg-nota { font-size:12.5px; color:var(--ink-3); margin-top:12px; line-height:1.5; }
.pg-legal { font-size:11.5px; color:var(--ink-4, var(--ink-3)); margin-top:14px; line-height:1.5; border-top:1px solid var(--line); padding-top:10px; }
.pg-tabla { width:100%; border-collapse:collapse; margin-top:10px; font-size:12.5px; }
.pg-tabla th, .pg-tabla td { padding:7px 6px; border-bottom:1px solid var(--line); text-align:center; color:var(--ink-2); }
.pg-tabla th { font-family:var(--display); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.pg-tabla td:first-child { text-align:left; color:var(--ink-2); }
.pg-tabla .pg-yo { background:rgba(124,58,237,0.12); color:var(--ink); font-weight:700; }
.pg-bono { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
@media (max-width: 600px) { .pg-bono { grid-template-columns:1fr; } }
.pg-bono-pct { font-family:var(--display); font-weight:800; font-size:34px; line-height:1; color:var(--ink); }
.pg-bono-txt { font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.4; }
.pg-codigo { display:flex; align-items:center; gap:10px; margin-top:10px; }
.pg-codigo code { font-family:var(--mono); font-size:18px; letter-spacing:.12em; color:var(--ink); background:rgba(255,255,255,0.05);
  border:1px dashed var(--line-strong, var(--line)); border-radius:10px; padding:8px 14px; }
.pg-fam { font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:22px 0 10px; }
.pg-ins-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.pg-ins { border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:rgba(255,255,255,0.02); }
.pg-ins-on { border-color:rgba(252,163,17,0.55); background:rgba(252,163,17,0.06); }
.pg-ins-dest { box-shadow: 0 0 0 2px rgba(252,163,17,0.5); }
.pg-ins-off { opacity:.55; }
.pg-ins-top { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; }
.pg-ins-star { color:#FCA311; font-size:16px; }
.pg-ins-off .pg-ins-star { color:var(--ink-3); }
.pg-ins-desc { font-size:12.5px; color:var(--ink-2); margin-top:6px; line-height:1.4; }
.pg-ins-fecha { font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:8px; }
.pg-ins-acts { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.pg-ins-mini { display:inline-block; padding:6px 10px; margin:0 8px 8px 0; font-size:12.5px; }
.pg-lnk { background:none; border:0; padding:0; color:var(--violet-2); font-size:12px; cursor:pointer; text-decoration:underline; }
.pg-dest { margin-top:8px; }
.pg-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.pg-tab { background:rgba(255,255,255,0.04); border:1px solid var(--line); color:var(--ink-2); border-radius:999px; padding:8px 14px;
  font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.04em; cursor:pointer; }
.pg-tab small { font-weight:400; opacity:.7; margin-left:4px; text-transform:lowercase; }
.pg-tab.on { background:var(--violet); border-color:var(--violet); color:#fff; }
.pg-rk { width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; }
.pg-rk th { text-align:left; font-family:var(--display); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:8px 6px; border-bottom:1px solid var(--line); }
.pg-rk td { padding:9px 6px; border-bottom:1px solid var(--line); color:var(--ink-2); }
.pg-rk td b { color:var(--ink); }
.pg-rk-podio td:first-child { color:#FCA311; font-weight:800; }
.pg-rk-yo td { background:rgba(124,58,237,0.12); }
.pg-rk-head { display:flex; flex-direction:column; gap:4px; }
.muted { color:var(--ink-3); }

/* badges SVG (badges.js) */
.gab { display:inline-block; vertical-align:middle; flex:0 0 auto; }
.gab-off { opacity:.4; filter:grayscale(1); }
img.gab { object-fit:contain; }
.pg-ins-top img.gab { width:52px; height:52px; }
.pg-ins-top .gab { margin-right:10px; }
.pg-ins-mini .gab { margin-right:6px; }
.pg-rk-m { display:flex; align-items:center; gap:10px; }
.pg-rk-sub { font-family:var(--display); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.pg-rk-top { display:flex; gap:2px; margin-left:auto; padding-left:8px; }
@media (max-width: 600px) { .pg-rk-top { display:none; } }
.pg-head .gab-rank { margin:-10px 0 -10px -8px; }

/* carrusel de consejos bajo la barra de progreso: misma altura que la leyenda que reemplaza */
.pg-tips { display:flex; align-items:center; gap:8px; min-height:40px; margin-top:2px; }
.pg-tip-txt { flex:1; font-size:12.5px; line-height:1.35; color:var(--ink-2); font-style:italic; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pg-tip-estado { color:var(--ink); }
.pg-tip-tag { display:inline-block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:8px; }
.pg-tip-btn { flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,0.04); color:var(--ink-2); font-size:18px; line-height:1; cursor:pointer; padding:0 0 2px; }
.pg-tip-btn:hover { border-color:var(--violet); color:var(--ink); }