:root{
  --cm-bg:#f7f8fa; --cm-card:#fff; --cm-border:#e5e7eb; --cm-text:#111827;
  --cm-muted:#6b7280; --cm-primary:#2563eb; --cm-primary-600:#1d4ed8;
  --cm-green:#16a34a; --cm-orange:#ea580c; --cm-gray:#6b7280; --cm-red:#dc2626;
  --cm-blue:#1e40af; --cm-violet:#6d28d9;
}
.cm-root{ font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial; color:var(--cm-text); background:var(--cm-bg); }
.cm-app{ max-width:1100px; margin:0 auto; padding:16px; }
.cm-header{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.1) blur(4px); border-bottom:1px solid var(--cm-border); }
.cm-header h1{ font-size:20px; font-weight:800; margin:0; }
.cm-legend{ display:flex; flex-wrap:wrap; gap:6px; font-size:12px; align-items:center; color:var(--cm-muted); }
.cm-section{ background:var(--cm-card); border:1px solid var(--cm-border); border-radius:16px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.cm-grid{ display:grid; gap:16px; }
@media(min-width:900px){ .cm-grid-4{ grid-template-columns:1fr 2fr 1fr  } }
.cm-label{ font-size:12px; color:var(--cm-muted); margin-bottom:6px; display:block; }
.cm-select,.cm-input{ width:100%; border:1px solid var(--cm-border); border-radius:10px; padding:8px 12px; font-size:14px; }
.cm-range{ width:100%; }
.cm-stat{ border:1px solid var(--cm-border); border-radius:16px; background:#fff; padding:12px; }
.cm-stat .t{ color:var(--cm-muted); font-size:13px; }
.cm-stat .v{ font-weight:700; font-size:22px; margin-top:2px; }
.cm-btn{ display:inline-block; width:100%; text-align:center; border-radius:12px; padding:10px 12px; font-weight:700; font-size:13px; border:0; cursor:pointer; }
.cm-btn-primary{ background:var(--cm-primary); color:#fff; }
.cm-btn-primary:hover{ background:var(--cm-primary-600); }
.cm-btn-soft{ background:#eff6ff; color:#0f172a; border:1px solid #bfdbfe; }
.cm-btn-soft:hover{ background:#e5efff; }
.cm-btn-ghost{ background:#fff; color:#111827; border:1px solid var(--cm-border); }
.cm-btn-ghost:hover{ background:#f8fafc; }

.cm-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.cm-table th{ text-align:left; font-size:12px; text-transform:uppercase; color:var(--cm-muted); background:#f8fafc; position:sticky; top:0; z-index:1; }
.cm-table th,.cm-table td{ padding:10px 12px; border-bottom:1px solid #f0f2f5; }
.cm-row-activo{ background:#f0fdf4; }         /* green-50 */
.cm-row-eq{ background:#fff7ed; }             /* orange-50 */

.cm-badge{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px; }
.cm-badge.green{ background:#dcfce7; color:#166534; }
.cm-badge.orange{ background:#ffedd5; color:#9a3412; }
.cm-badge.gray{ background:#e5e7eb; color:#374151; }
.cm-badge.blue{ background:#dbeafe; color:#1e40af; }
.cm-badge.red{ background:#fee2e2; color:#991b1b; }
.cm-badge.violet{ background:#ede9fe; color:#5b21b6; }

.cm-base-input{ width:90px; border:1px solid var(--cm-border); border-radius:8px; padding:6px 8px; font-size:14px; }
.cm-base-input.changed{ background:#fffbeb; outline:2px solid #facc15; }

.cm-cards{ display:grid; gap:12px; grid-template-columns:repeat(1, minmax(0,1fr)); }
@media(min-width:640px){ .cm-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media(min-width:1024px){ .cm-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media(min-width:1280px){ .cm-cards{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.cm-card{ border:1px solid var(--cm-border); border-radius:14px; padding:12px; background:#fff; }
.cm-pill{ border-radius:10px; padding:8px; font-size:14px; }
.cm-pill.muted{ background:#f3f4f6; }
.cm-pill.positive{ background:#ecfccb; }

.cm-chart-wrap{ height:300px; }
.cm-note{ font-size:12px; color:var(--cm-muted); margin-top:8px; }