/* ==========================================================================
   PROGRESS — barras de progreso
   Base reutilizable + alias de las barras existentes (track + fill).
   Markup nuevo:  <div class="bar"><i class="bar-fill" style="width:70%"></i></div>
   Ajustes por variable:  --bar-h (altura), --bar-track (fondo), --bar-fill (color)
   ========================================================================== */
.bar {
    height: var(--bar-h, 5px);
    background: var(--bar-track, var(--track));
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--bar-fill, var(--brand-accent));
    transition: width var(--t-slow) ease;
}

/* Barras existentes: comparten track (radio + recorte) y fill (alto + transicion).
   Cada una solo define su altura y su color en su propio archivo. */
.role-wr-bar,
.agent-wr-bar,
.hz-bar-wrap,
.logro-progress-bar {
    border-radius: var(--radius-xs);
    overflow: hidden;
}
.role-wr-bar-fill,
.agent-wr-bar-fill,
.hz-bar-fill,
.logro-progress-fill {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width var(--t-slow) ease;
}

/* --------------------------------------------------------------------------
   Revelado al montar: la barra se "llena" de 0 al valor.
   El JS inyecta el fill con su width% final en el mismo innerHTML, asi que una
   transition no dispararia (el valor inicial ya es el final). Un keyframe con
   clip-path es independiente del width inline y revela el relleno —texto
   incluido— de izquierda a derecha sin deformarlo (a diferencia de scaleX).
   -------------------------------------------------------------------------- */
@keyframes rig-bar-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

.bar-fill,
.role-wr-bar-fill,
.agent-wr-bar-fill,
.hz-bar-fill,
.logro-progress-fill {
    animation: rig-bar-reveal var(--t-slow) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
    .bar-fill,
    .role-wr-bar-fill,
    .agent-wr-bar-fill,
    .hz-bar-fill,
    .logro-progress-fill { animation: none; }
}