// === PasosSign — la espina dorsal del tutorial ===
// Cinco pasos siempre visibles arriba, con el actual encendido. Existe porque es un tutorial:
// en cada escena el espectador tiene que saber en qué punto del montaje va sin preguntárselo.
// Vive en su propio archivo (y se carga el primero) porque lo usan las seis escenas.
function PasosSign({ t, activo, start=0 }){
  const PASOS = ['El documento', 'El tipo', 'Aparece solo', 'Lo envías', 'Lo aceptas'];
  const p = clamp((t-start)/0.6,0,1);
  if (p <= 0) return null;
  return (
    <div style={{position:'absolute', left:0, right:0, top:150, display:'flex', justifyContent:'center',
                 alignItems:'center', gap:0, opacity:p, zIndex:4}}>
      {PASOS.map((n,i)=>{
        const on = i+1 === activo;
        const hecho = i+1 < activo;
        const col = on ? '#0085FF' : (hecho ? '#059669' : '#CBD5E1');
        return (
          <React.Fragment key={n}>
            {0 < i && <span style={{width:34, height:2, background:hecho || on ? '#BFDBFE' : '#E2E8F0'}}/>}
            <span style={{display:'inline-flex', alignItems:'center', gap:11, padding:on ? '11px 22px' : '9px 16px',
                          borderRadius:99, background:on ? 'rgba(0,133,255,0.10)' : 'transparent',
                          border:`1px solid ${on ? 'rgba(0,133,255,0.32)' : 'transparent'}`}}>
              <span style={{width:on ? 30 : 26, height:on ? 30 : 26, borderRadius:99, flexShrink:0,
                            display:'grid', placeItems:'center', background:hecho ? '#059669' : (on ? '#0085FF' : '#EEF2F6')}}>
                {hecho
                  ? <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5 L10 17 L19 7"/></svg>
                  : <span className="f-mono" style={{fontSize:on ? 16 : 14, fontWeight:700, color:on ? '#fff' : '#94A3B8'}}>{i+1}</span>}
              </span>
              <span className="f-plex" style={{fontSize:on ? 20 : 18, fontWeight:on ? 700 : 500, color:on ? '#0F172A' : col}}>{n}</span>
            </span>
          </React.Fragment>
        );
      })}
    </div>
  );
}
Object.assign(window, { PasosSign });