/*
 * UiMetadata.Elements — ProgressBar
 *
 * Self-contained (var(--token, fallback) en cada regla, mismo criterio que
 * elements.css) — funciona aunque solo este archivo esté cargado.
 *
 * Tokens --color-primary/--color-success/--text-main/--text-muted/
 * --border-soft: la MISMA familia que ya usa .plan-usage (plan.css) para su
 * indicador de cupo — no la familia --glass-*/--text-*-strong (pensada para
 * cards grandes con blur, ej. StatusCard/SettingsCard). El track con
 * --glass-border/--glass-bg-soft (rgba muy tenues, ~3-8% de opacidad) quedaba
 * casi invisible en un track de 10px de alto, sin el contraste que sí tiene
 * el resto de indicadores "chicos" de la app — --border-soft es un color
 * sólido definido por los 4 temas (#2e2e4e en oscuro, no un rgba), visible de
 * verdad como track.
 */

.ui-progress-bar {
    display: grid;
    gap: 0.5rem;
}

.ui-progress-bar-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.ui-progress-bar-label {
    color: var(--text-main, #ffffff);
    font-weight: 600;
}

.ui-progress-bar-percentage {
    color: var(--text-muted, #9090b0);
    font-variant-numeric: tabular-nums;
}

.ui-progress-bar-track {
    height: 10px;
    border-radius: 999px;
    background: var(--border-soft, #2e2e4e);
    overflow: hidden;
}

.ui-progress-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary, #7b2ff7);
    transition: width .35s ease;
}

.ui-progress-bar.is-complete .ui-progress-bar-fill {
    background: var(--color-success, #00e396);
}

.ui-progress-bar.is-complete .ui-progress-bar-label {
    color: var(--color-success, #00e396);
}

.ui-progress-bar-detail {
    color: var(--text-muted, #9090b0);
    font-size: 0.85rem;
}

.ui-progress-bar-cta {
    justify-self: start;
    color: var(--color-primary, #7b2ff7);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.ui-progress-bar-cta:hover {
    text-decoration: underline;
}