/* Matching LabLink: bloque de espera con barra de progreso (lablink-match-progress.js). Usa la escala y los colores
   (tokens --tl-*) de lablink-landing.css, que cargan todas las páginas LabLink; sin escala, las medidas del video. */
.tl-progress {
    display: flex;
    flex-direction: column;
    gap: calc(14px * var(--tl-scale, 1));
    padding: calc(16px * var(--tl-scale, 1)) 0 calc(8px * var(--tl-scale, 1));
    font-family: 'Roboto', sans-serif;
    color: var(--tl-ink);
}
.tl-progress:focus { outline: none; }
.tl-progress__titulo {
    margin: 0;
    font-size: max(16px, calc(20px * var(--tl-type-scale, 1)));
    font-weight: 500;
    line-height: 1.3;
}
.tl-progress__texto {
    margin: 0;
    font-size: max(13px, calc(15px * var(--tl-type-scale, 1)));
    line-height: 1.55;
    color: var(--tl-muted);
}
.tl-progress__pista {
    height: 8px;
    margin-top: calc(14px * var(--tl-scale, 1));
    border-radius: 4px;
    background: var(--tl-line);
    overflow: hidden;
}
.tl-progress__relleno {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: var(--tl-ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .2s linear;
}
/* Sin animación: la barra salta a cada valor nuevo, pero sigue avanzando. */
@media (prefers-reduced-motion: reduce) {
    .tl-progress__relleno { transition: none; }
}