/* Cápsulas e Loja (assets/js/capsulas.js): saldo, nível, como ganhar, níveis, Loja e extrato.
   Cores, letra e espaços só pelos tokens (tokens.css), para valer no modo claro e no escuro.
   Mobile first: a base é o celular (390 px sem rolagem lateral); as media queries abrem colunas. */

/* Círculo com emoji: o emoji ocupa ~55% do círculo */
.cap-ic{--d:2.25rem;width:var(--d);height:var(--d);flex:none;border-radius:50%;display:inline-grid;place-items:center;background:var(--surface-2);font-style:normal;font-size:calc(var(--d) * .55);line-height:1}
.cap-ic.grande{--d:3.5rem;box-shadow:inset 0 0 0 2px var(--orange)}

/* Barra de progresso (nível, regra do dia, quanto falta para um item) */
.cap-barra{height:12px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;min-width:0}
.cap-barra > span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--orange-deep),var(--orange));transition:width .4s}
.cap-barra.fina{height:6px}
.cap-dica{color:var(--muted);font-size:var(--fs-meta)}

/* ---------- Resumo ---------- */
.cap-resumo{border-top:4px solid var(--orange);padding:var(--space-4);display:grid;gap:var(--space-4)}
/* Convite para entrar (visitante, sem conta): faixa no topo do resumo */
.cap-entrar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-4);background:var(--surface-2);border-left:4px solid var(--orange);border-radius:var(--r-md);padding:var(--space-3) var(--space-4);min-width:0}
.cap-entrar-txt{margin:0;flex:1 1 18rem;min-width:0}
.cap-entrar .btn{flex:none}
.cap-resumo-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5) var(--space-6)}
.cap-saldo{display:flex;align-items:flex-start;gap:var(--space-4);min-width:0}
.cap-saldo-txt{display:grid;gap:.15rem;min-width:0}
.cap-saldo-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .45rem}
.cap-saldo-n b{font-size:var(--fs-h1-page);font-weight:var(--fw-black);line-height:1;color:var(--heading-on-surface);font-variant-numeric:tabular-nums}
.cap-saldo-n span{color:var(--muted);font-weight:var(--fw-semibold)}
.cap-saldo-meta{color:var(--muted)}
.cap-nivel{display:grid;gap:.45rem;align-content:center;min-width:0}
.cap-nivel-nome{font-size:var(--fs-h2);font-weight:var(--fw-black);line-height:var(--lh-heading);color:var(--heading-on-surface)}
.cap-nivel-falta{color:var(--muted)}
.cap-stats{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);min-width:0}
.cap-stat{background:var(--bg);border-radius:var(--r-md);padding:var(--space-3);display:grid;gap:.2rem;align-content:start;min-width:0}
.cap-stat dd{margin:0}
.cap-stat-n{font-weight:var(--fw-semibold);color:var(--muted)}
.cap-stat-n b{font-size:var(--fs-h2);font-weight:var(--fw-black);color:var(--heading-on-surface);font-variant-numeric:tabular-nums}
.cap-atalhos{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:var(--space-3);border-top:1px solid var(--line)}
@media (min-width:720px){
  .cap-resumo{padding:var(--space-5) var(--space-6)}
  .cap-resumo-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-stats{grid-column:1/-1}
  .cap-stat{padding:var(--space-3) var(--space-4)}
}
@media (min-width:1100px){
  .cap-resumo-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);align-items:center}
  .cap-stats{grid-column:auto}
}

/* ---------- Como funciona e Níveis (lado a lado a partir de 960 px) ---------- */
.cap-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);align-items:start;min-width:0}
@media (min-width:960px){.cap-grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.cap-funciona{display:grid;gap:.6rem}
.cap-funciona p{margin:0}
.cap-funciona ul{margin:0;padding-left:1.15rem;display:grid;gap:.35rem}

.cap-niveis{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cap-nv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:var(--r-md);min-width:0}
.cap-nv-marca{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-style:normal;font-weight:var(--fw-black);font-size:var(--fs-meta)}
.cap-nv-txt{display:grid;min-width:0}
.cap-nv-txt span{color:var(--muted);font-size:var(--fs-meta)}
.cap-nv.passou .cap-nv-marca{background:var(--ok-bg);color:var(--ok)}
.cap-nv.atual{border-color:var(--orange);background:var(--surface-2)}
.cap-nv.atual .cap-nv-marca{background:var(--orange);color:var(--navy-deep)}
.cap-nv-aqui{font-size:var(--fs-label);font-weight:var(--fw-black);padding:.2rem .6rem;border-radius:var(--r-pill);background:var(--orange);color:var(--navy-deep);white-space:nowrap}
.cap-nv-falta{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}

/* ---------- Loja ---------- */
.cap-loja{display:grid;gap:var(--space-3);min-width:0}
.cap-loja-topo{display:grid;gap:.25rem}
.cap-h2{font-size:var(--fs-h2);color:var(--heading-on-surface)}
.cap-loja-sub{color:var(--muted)}
.cap-check{display:inline-flex;align-items:center;gap:.5rem;min-height:42px;font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--fg);cursor:pointer}
.cap-check input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--orange)}
.cap-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--space-3);min-width:0}
.cap-item{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);border-top:4px solid var(--orange);padding:var(--space-4);display:flex;flex-direction:column;gap:.6rem;min-width:0}
.cap-item.liberado{border-top-color:var(--ok)}
.cap-item-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem}
.cap-tipo{display:inline-flex;align-items:center;gap:.5rem;margin-right:auto;min-width:0;font-size:var(--fs-meta);font-weight:var(--fw-semibold);color:var(--muted)}
.cap-status{font-size:var(--fs-label);font-weight:var(--fw-black);padding:.2rem .6rem;border-radius:var(--r-pill);white-space:nowrap}
.cap-status.em-breve{background:var(--surface-2);color:var(--muted)}
.cap-status.disponivel{background:var(--ok-bg);color:var(--ok)}
.cap-item-titulo{font-size:var(--fs-h3)}
.cap-item-desc{color:var(--muted)}
.cap-item-pe{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--space-3)}
.cap-preco{margin-right:auto;font-weight:var(--fw-semibold);color:var(--muted);white-space:nowrap}
.cap-preco b{font-size:var(--fs-h3);font-weight:var(--fw-black);color:var(--heading-on-surface);font-variant-numeric:tabular-nums}
.cap-item-pe .btn{font-size:var(--fs-small)}
.cap-item-pe .btn:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed;filter:none}
.cap-item-pe .btn[aria-busy="true"]{cursor:progress}
.cap-item-pe .cap-barra{flex:1 1 100%}
.cap-liberado{margin-right:auto;padding:.3rem .8rem;border-radius:var(--r-pill);background:var(--ok-bg);color:var(--ok);font-weight:var(--fw-black);white-space:nowrap}

/* ---------- Extrato ---------- */
.cap-extrato{list-style:none;margin:0;padding:0;display:grid}
.cap-mov{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"desc valor" "quando valor";gap:.1rem var(--space-3);align-items:center;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.cap-mov:last-child{border-bottom:0}
.cap-mov-quando{grid-area:quando;color:var(--muted);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.cap-mov-txt{grid-area:desc;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;min-width:0}
.cap-mov-desc{font-weight:var(--fw-semibold);overflow-wrap:anywhere}
.cap-mov-valor{grid-area:valor;font-weight:var(--fw-black);white-space:nowrap;font-variant-numeric:tabular-nums}
.cap-mov.mais .cap-mov-valor{color:var(--ok)}
.cap-mov.gasto .cap-mov-valor{color:var(--muted)}
.cap-mov.estorno .cap-mov-valor{color:var(--erro)}
.cap-extrato .vazio{color:var(--muted);padding:.4rem 0}
@media (min-width:720px){.cap-mov{grid-template-columns:9rem minmax(0,1fr) auto;grid-template-areas:"quando desc valor"}}
/* Selo do Harrison e "Exemplo" na mesma linha: o selo encolhe com reticências, como na Biblioteca */
.cap-item .post-badges{flex-wrap:nowrap}
.cap-item .post-badges .pill{flex:none}