.cb-top{display:flex;align-items:center;gap:12px;margin:6px 0 4px}
.cb-updated{margin-left:auto;font-size:.8rem;opacity:.6}
.cb-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:.82rem;font-weight:600;border:1px solid var(--line,#CCC6BA)}
.cb-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.cb-chip.ok{color:#2E7D32;border-color:#2E7D3255}.cb-chip.warn{color:#B26A00;border-color:#B26A0055}.cb-chip.bad{color:#B3261E;border-color:#B3261E55}
.cb-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
@media (max-width:900px){.cb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cb-kpis{grid-template-columns:1fr}}
.cb-kpi{padding:16px 18px;border-radius:16px;border:1px solid var(--line,#CCC6BA);background:var(--surface,#F8F6F1);animation:cbin .5s both}
.cb-kpi:nth-child(2){animation-delay:.05s}.cb-kpi:nth-child(3){animation-delay:.1s}.cb-kpi:nth-child(4){animation-delay:.15s}
.cb-kpi span{display:block;font-size:.8rem;opacity:.7}.cb-kpi strong{display:block;font-size:1.65rem;margin:4px 0;font-variant-numeric:tabular-nums}.cb-kpi small{opacity:.65}
.cb-kpi.pending{border-color:#B26A0066}.cb-kpi.alert{border-color:#C6F432;box-shadow:0 0 0 3px #C6F43222}
@keyframes cbin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cb-chart-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.cb-chart h2,.cb-two h2,.panel h2{margin:0 0 4px;font-size:1.05rem}
.cb-chart svg{width:100%;height:auto;margin-top:10px;overflow:visible}
.cb-bar{fill:#C6F432;transform-box:fill-box;transform-origin:bottom;animation:cbgrow .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*18ms)}
.cb-bar:hover{fill:#2DE1C2}.cb-zero{fill:var(--line,#CCC6BA);opacity:.6}
.cb-chart text{font-size:10px;fill:currentColor;opacity:.55}
@keyframes cbgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.cb-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2DE1C2;margin-left:4px;animation:cbpulse 1.8s infinite}
@keyframes cbpulse{0%{box-shadow:0 0 0 0 #2DE1C288}100%{box-shadow:0 0 0 9px #2DE1C200}}
.cb-two{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin:14px 0}
.cb-two-wide{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:980px){.cb-two,.cb-two-wide{grid-template-columns:1fr}}
.cb-plan{margin:12px 0}.cb-plan-top{display:flex;justify-content:space-between;gap:8px;font-size:.92rem}.cb-plan-top span{opacity:.65;font-size:.82rem}
.cb-meter{height:10px;border-radius:99px;background:var(--line,#CCC6BA);margin:6px 0;overflow:hidden}
.cb-meter i{display:block;height:100%;border-radius:99px;background:#C6F43255;transition:width .6s}
.cb-meter b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#C6F432,#2DE1C2);transition:width .6s}
.cb-methods{list-style:none;margin:8px 0 0;padding:0}.cb-methods li{display:grid;grid-template-columns:1fr auto 28px;gap:8px;padding:9px 0;border-bottom:1px solid var(--line,#CCC6BA)}.cb-methods small{opacity:.6;text-align:right}
.cb-feed{list-style:none;margin:8px 0 0;padding:0}.cb-feed li{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line,#CCC6BA);animation:cbin .4s both}
.cb-feed i{width:9px;height:9px;border-radius:50%;background:#999}.cb-feed .cb-ok i{background:#2E7D32}.cb-feed .cb-warn i{background:#B26A00;animation:cbpulse 1.8s infinite}.cb-feed .cb-pending i{background:#C6F432}
.cb-feed small{display:block;opacity:.65}
.cb-actions{display:flex;gap:6px;flex-wrap:wrap}.cb-actions .small{padding:6px 10px;font-size:.8rem}
.cb-empty{padding:18px 4px}
.cb-stripe{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin:12px 0;padding:14px;border:1px solid var(--line,#CCC6BA);border-radius:12px}
.cb-stripe code{word-break:break-all}.cb-ok{color:#2E7D32}.cb-bad{color:#B3261E}
@media (prefers-reduced-motion:reduce){.cb-kpi,.cb-bar,.cb-live,.cb-feed li,.cb-feed i{animation:none!important}}

/* Ajustes de maquetación */
#cb-root .panel{padding:20px 22px;margin:0}
#cb-root .cb-chart{margin:14px 0}
#cb-root .cb-two,#cb-root .cb-two-wide{grid-template-columns:1fr}
@media (min-width:1100px){#cb-root .cb-two:not(.cb-two-wide){grid-template-columns:2fr 1fr}}
#cb-root .cb-actions{flex-direction:row;flex-wrap:wrap;min-width:260px}
#cb-root .table-tools{padding:0 0 12px}
#cb-root td small{display:block;opacity:.6}

/* Mensualidades (8.1) */
.cb-renew-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.cb-renew-head h2{margin:0 0 4px}.cb-renew-head p{margin:0;max-width:70ch}
.cb-renew-row td small{display:block}
.cb-renew-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--tone,#C6F432) 13%,transparent);color:var(--tone,#C6F432)}
.cb-renew-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cb-renew-tag.is-ok,.cb-renew-row.is-ok{--tone:#1a9f5c}
.cb-renew-tag.is-soon,.cb-renew-row.is-soon{--tone:#C6F432}
.cb-renew-tag.is-due,.cb-renew-row.is-due{--tone:#d98a00}
.cb-renew-tag.is-check,.cb-renew-row.is-check{--tone:#1e8fd6}
.cb-renew-tag.is-over,.cb-renew-row.is-over{--tone:#d93636}
.cb-renew-tag.is-void,.cb-renew-row.is-void{--tone:#8a8fa3}
.cb-renew-row.is-over td:first-child,.cb-renew-row.is-due td:first-child,.cb-renew-row.is-check td:first-child{box-shadow:inset 3px 0 0 var(--tone)}
.cb-renew-row.is-void{opacity:.6}
/* Mensualidades en tarjetas: se leen y se usan bien a cualquier ancho */
.cb-renew-list{display:grid;gap:10px}
.cb-renew-row{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(220px,1.4fr) minmax(150px,1fr) auto;gap:18px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:inset 3px 0 0 var(--tone)}
.cb-renew-row.is-ok,.cb-renew-row.is-soon{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--tone) 55%,transparent)}
.cb-renew-row small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.cb-renew-who strong{display:block;font-size:15px;margin-bottom:2px}
.cb-renew-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.cb-renew-dates dt{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--muted);margin-bottom:2px}
.cb-renew-dates dd{margin:0;font-size:14px}
.cb-renew-dates .cb-renew-when{font-size:12px;color:var(--tone);font-weight:600;margin-top:2px}
.cb-renew-state{display:grid;gap:6px;justify-items:start}
.cb-renew-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media(max-width:1100px){.cb-renew-row{grid-template-columns:1fr 1fr}.cb-renew-actions{justify-content:flex-start}}
@media(max-width:640px){.cb-renew-row{grid-template-columns:1fr}.cb-renew-head{flex-direction:column}}