/* La barra de etapas del portal del cliente (Matías, 19/10): un componente propio, sobre los tokens de
   diseno/circuito/estilos.css, para que Dirección lo pula sin tocar el resto. Movimiento corto, solo transform y
   opacity, y nada de movimiento con "reducir movimiento". La arman vistas.mjs (barraEtapas) y sus clases son:
   .etapas > .etapas__ahora + ol.etapas__lista > li.etapa(.etapa--hecha | .etapa--actual) > .etapa__marca + .etapa__nombre */

.etapas { margin: 28px 0 8px; }
.etapas__ahora { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 14px; color: var(--text-muted); }
.etapas__ahora b { color: var(--text); font-weight: 600; }
.etapas__lista { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.etapa { display: grid; gap: 8px; align-content: start; }
.etapa__marca { display: block; height: 6px; border-radius: 999px; background: var(--line); transform-origin: left center; }
.etapa--hecha .etapa__marca { background: var(--text-muted); }
.etapa--actual .etapa__marca { background: var(--accent); animation: etapa-llena 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tema-hueso .etapa--actual .etapa__marca { background: var(--accent-text); }
.etapa__nombre { font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.etapa--actual .etapa__nombre { color: var(--text); font-weight: 600; animation: etapa-aparece 320ms ease-out 80ms both; }

@keyframes etapa-llena { from { transform: scaleX(0.15); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } }
@keyframes etapa-aparece { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }

/* En el celular, la línea "Ahora: …" dice la etapa; los nombres de cada tramo no entran. */
@media (max-width: 640px) {
  .etapa__nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .etapa--actual .etapa__marca, .etapa--actual .etapa__nombre { animation: none; }
}