/* «Mi progreso» (templates/mi_progreso.html) */
.mp-head { margin-bottom: var(--s-5); }
.mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mp-card { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.mp-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mp-card-head h2 { margin: 0; font-size: 1.05rem; }
.mp-kv { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin: 0; font-size: var(--t-sm); }
.mp-kv dt { color: var(--muted); }
.mp-kv dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.mp-up { margin: 0 0 8px; font-weight: 600; color: var(--success); }
.mp-spark { display: block; width: 100%; height: 44px; margin: 12px 0 4px; }
.mp-spark polyline { fill: none; stroke: var(--sel); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mp-spark circle { fill: var(--sel); }
.mp-tip { margin: 8px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.mp-empty { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.mp-note { margin-top: var(--s-5); font-size: var(--t-sm); }
@media (max-width: 900px) { .mp-grid { grid-template-columns: minmax(0, 1fr); } }