/* Rosca "Por categoria / Por cliente" (2026-10-19, modelo A escolhido pelo Romeu).
   Cores por marca: 2R (padrao) e SP (body.fin-theme-sp), claro e escuro. */
body.fin {
  --fin-r1: #0f766e; --fin-r2: #2563eb; --fin-r3: #d97706; --fin-r4: #7c3aed;
  --fin-r5: #e11d48; --fin-r6: #0891b2; --fin-r7: #65a30d; --fin-r8: #94a3b8;
}
body.fin-theme-sp {
  --fin-r1: #8d642f; --fin-r2: #2f6f73; --fin-r3: #b4553a; --fin-r4: #6b7a3a;
  --fin-r5: #5b5f97; --fin-r6: #c2913b; --fin-r7: #8a4f6d; --fin-r8: #a89f92;
}
.fin-dark body.fin {
  --fin-r1: #2dd4bf; --fin-r2: #60a5fa; --fin-r3: #fbbf24; --fin-r4: #a78bfa;
  --fin-r5: #fb7185; --fin-r6: #22d3ee; --fin-r7: #a3e635; --fin-r8: #64748b;
}
.fin-dark body.fin.fin-theme-sp {
  --fin-r1: #d8b081; --fin-r2: #5fb3b8; --fin-r3: #e08a6d; --fin-r4: #a7b86a;
  --fin-r5: #9a9fe0; --fin-r6: #e8c06a; --fin-r7: #d08fb0; --fin-r8: #756d64;
}

.tot-cats.is-rosca { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fin-border-soft); }
.rosca { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 10px; }
.rosca-g { position: relative; width: 100%; max-width: 240px; aspect-ratio: 1; margin: 0 auto; }
.rosca-g svg { display: block; width: 100%; height: 100%; }
.rosca-g circle { fill: none; stroke-width: 24; cursor: pointer; transition: stroke-width .15s, opacity .15s; }
.rosca-g circle.bg { stroke: var(--fin-border-soft); cursor: default; }
.rosca-g circle.dim { opacity: .25; }
.rosca-g circle.hi { stroke-width: 32; }
.rosca-c { position: absolute; inset: 24%; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rosca-c small { font-size: 12px; color: var(--fin-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rosca-c b { font-size: 19px; font-weight: 700; color: var(--fin-text); font-variant-numeric: tabular-nums; line-height: 1.25; }
.rosca-c span { font-size: 12px; color: var(--fin-text-soft); }
.rosca-l { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; min-width: 0; }
.rosca-i { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--fin-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; width: 100%; }
.rosca-i:hover, .rosca-i.hi { background: var(--fin-border-soft); }
.rosca-i.on { border-color: var(--fin-primary); background: var(--fin-border-soft); }
.rosca-i:focus-visible { outline: 2px solid var(--fin-primary); outline-offset: 1px; }
.rosca-i i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.rosca-i .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-i b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rosca-i .p { font-size: 12px; color: var(--fin-text-soft); text-align: right; font-variant-numeric: tabular-nums; }
.rosca-dica { font-size: 12px; color: var(--fin-text-faint); margin-top: 8px; }
@media (max-width: 640px) {
  .rosca { grid-template-columns: 1fr; gap: 14px; }
  .rosca-g { max-width: 210px; }
  .rosca-l { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .rosca-g circle { transition: none; } }