/*
 * Aiden UI · progress
 * CSS module de Arc (registry/components/progress/progress.module.css) traducido a clases .aui-progress-<parte>,
 * con las MISMAS variables de kit/foundation.css.
 *
 * Correspondencia: .progress → .aui-progress · .meta → -meta · .label → -label · .line → -line · .value → -value ·
 * .count → -count · .done → -done · .track → -track · .fill → -fill.
 * Añadido: el relleno sin JS sale de la propiedad --progress (PHP: style="--progress: 40%"); con JS manda el
 * transform en línea que mueve el muelle. El ancho reservado del número sale de data-widest («100 %» en es/sv).
 */
.aui-progress { width: 100%; color: var(--text-secondary); font-size: var(--text-sm); font-family: var(--font-body); }
.aui-progress, .aui-progress * { box-sizing: border-box; }
.aui-progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; line-height: var(--leading-body); }
.aui-progress-meta[hidden], .aui-progress-value[hidden] { display: none; }
.aui-progress-label { position: relative; min-width: 0; }
.aui-progress-line { display: block; }
.aui-progress-value { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aui-progress-count { display: inline-grid; justify-items: end; }
/* Una fila oculta con «100 %» reserva el ancho del número más largo, así la marca no se mueve al ganar una cifra. */
.aui-progress-count::before { content: attr(data-widest); height: 0; overflow: hidden; visibility: hidden; }
.aui-progress-count:not([data-widest])::before { content: "100%"; }
.aui-progress-done { display: grid; place-items: center; color: var(--success); }
.aui-progress-done svg { display: block; }
.aui-progress-track { height: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-muted); }
.aui-progress-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--accent); transform: translateX(calc(var(--progress, 0%) - 100%)); transition: background-color var(--duration-standard) var(--ease-standard); }
.aui-progress[data-complete] .aui-progress-fill { background: var(--success); transition-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { .aui-progress-fill, .aui-progress[data-complete] .aui-progress-fill { transition: none; } }