/* Tarjeta de métrica con mini-gráfico (sparkline). Aspecto de la tarjeta de coss ui; color solo del tema.
   La variación lleva flecha y texto: no depende de verde o rojo. Necesita tokens.css. */
.c-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; width: 100%; max-width: 44rem; }
.c-stat { position: relative; display: grid; gap: .25rem; padding: 1.125rem 1.25rem 1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); background: var(--card); color: var(--card-foreground); box-shadow: 0 1px 2px 0 #0000000d; }
.c-stat__label { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); }
.c-stat__value { margin: 0; font-size: 1.75rem; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.c-stat__delta { margin: 0; font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.c-stat__vs { font-weight: 400; color: var(--muted-foreground); }
.c-stat__spark { display: block; width: 100%; height: 36px; margin-top: .5rem; overflow: visible; color: var(--primary); }
.c-stat__spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-stat__spark line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-stat-note { margin: .5rem 0 0; font-size: .75rem; color: var(--muted-foreground); }